JavaScript 懶癌患者福利

Pandaaa發表於2018-03-07
JavaScript

JavaScript 懶癌患者福利

東西比較老了，大家有啥原生的 JavaScript 魔性的寫法也可以 po 出來大家一起。

以下的絕大部分做法的本質是因為懶 ˙Ꙫ˙

不建議初學者使用，一不小心就坑到自己 (:з」∠)

  • 當然懶癌的終極目標就是愉快的使用各種函式和庫解決你的問題。函數語言程式設計萬歲<(￣▽￣)/，沒有什麼是 jq 解決不了的 (^o^)/

  • 判斷省略括號


//正常版
if(love_me) {
  love_you_too(); // love_me為真才會執行
}
yo(); // 永遠都會執行

//懶癌版
if(love_me)
  love_you_too(); // love_me為真才會執行
yo(); // 永遠都會執行

//掩耳盜鈴版
if(love_me)
  love_you_too(); // love_me為真才會執行
  yo(); // 縮排對齊也沒用，依然永遠都會執行（python表示不服）
複製程式碼
  • 三元運算子和 ||

條件 ? 滿足時執行 : 否則執行

//正常版本

if(me){
    yourHert = me;
}else{
    yourHert = another;
}

//懶癌版
yourHert = me || another;


//正常版
if(love_me) {
  love_you_too();
} else {
  emmmm();
}

//懶癌版
love_me ? love_you_too() : emmmm();
複製程式碼
  • 懶癌判斷函式

//正常版
function greet(love_me) {
  if(love_me) {
    return 'Love you too!';
  } else {
    return 'Emmmm...';
  }
}

//懶癌版
function greet(love_me) {
  if(love_me) 
    return 'Love you too!'; // 如果love_me為真，此處直接返回，後面的通通不會執行

  return 'Emmmm...'; // 否則就會一直執行到這一步
}
複製程式碼
  • ES5中設定傳參預設值

//正常版
function 問好(姓名) {
  if(!姓名) {
    姓名 = '王花花';
  }
  return '你好' + 姓名;
}

//懶癌版
function 問好(姓名) {
  姓名 = 姓名 || '王花花'; // 如果傳了姓名就用，沒傳預設設為"王花花"
  return '你好' + 姓名;
}
複製程式碼
  • 批量宣告變數

//正常版
var a;
var b;
var c;
//懶癌版
var a, b, c;
//懶癌潔癖實用主義綜合症患者（逃
var a
  , b
  , c
  ;
複製程式碼
  • 批量變數賦值

//正常版
var a = 1;
var b = a;
var c = b;
//懶癌版
var a = 1, b = a, c = b;
//懶癌潔癖實用主義綜合症患者
var a, b, c;
a = b = c = 1;
複製程式碼
  • 自觸發函式 (IIFE)

一般用於隔離作用域，一個檔案寫一個，防止一不小心汙染全域性變數。


//正常版
啟動();
function 啟動() {
  'use strict';
  // ...
}
//懶癌版
(function () {
  'use strict';
  // ...
})();

/*
可以這樣理解
先用括號把這個匿名函式包起來：
(匿名函式)

然後執行：
(匿名函式)();
*/

懶癌晚期版
!function () {
  'use strict';
  // ...
}();
懶癌領悟版
;(function () { // 行首的分號是幹嘛的？
  'use strict';
  // ...
})();
複製程式碼

這裡小夥伴就要問了，前面的 “ ; ”幹嘛用的，這裡主要是為了防止檔案壓縮的時候，和前面的檔案產生問題。畢竟沒了分隔符 js 程式碼有時間就 gg 了。還半天找不到出處。

JavaScript 程式碼規範

  • 全域性名稱空間汙染 總是將程式碼放在一個立即執行的表示式中，形成一個獨立的模組

不推薦

var x = 99,
    y = 100;
console.log(window.x + ' ' + window.y);
複製程式碼

推薦

帶入引數，注意 “ ; ”

;(function(window){
    'use strict';
    var x = 99,
        y = 100;
    console.log(window.x + ' ' + window.y);
}(window));
複製程式碼
  • 立即執行函式

不推薦

(function(){
    'use strict';
    var x = 99,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    
    $(document).on('click',function(){
        alert("hello world!")
    })
    
    if( Object.prototype.toString.call(undefined) ){
        //code
    }
}());
複製程式碼

推薦

帶入引數，嚴格模式寫在你的作用域內

;(function($,window,document,undefined){
    'use strict';
    var x = 99,
        y = 100,
        c,
        elem=$('body');
    console.log(window.x + ' ' + window.y);
    $(document).on('click',function(){

    });
    
    if( Object.prototype.toString.call(undefined) ){
        //code
    }
}(jQuery,window,document));
複製程式碼
  • 語句塊內的函式宣告

切勿在語句塊內宣告函式，在 ECMAScript 5 的嚴格模式下，這是不合法的。函式宣告應該在作用域的頂層。但在語句塊內可將函式申明轉化為函式表示式賦值給變數。 不推薦

if (x) {
  function foo() {}
}
複製程式碼

推薦


if (x) {
  var foo = function() {};
}
複製程式碼
  • for迴圈

使用for迴圈過程中，陣列的長度，使用一個變數來接收，這樣有利於程式碼執行效率得到提高，而不是每走一次迴圈，都得重新計算陣列長度

不推薦

for(var i=0;i<arr.length,i++){

}
複製程式碼

推薦

var i = 0,
    len = arr.length;
for(;i<len,i++){

}
複製程式碼

參考

表嚴肅

規範你的 JavaScript

相關文章