也談談規範JS代碼的幾個注意點

也談談規範JS代碼的幾個注意點

　　寫JS代碼差很少也有兩年了吧，從剛開始的「初生牛犢不怕虎」亂寫一通到後來也慢慢知道去規範一下本身寫的代碼。這種感受就像是代碼是你的做品，你但願它保持一份不只乾淨並且也優雅的姿式。因此後來慢慢規範了本身寫的代碼，再後來以爲僅僅規範本身的代碼還不行，這個團隊其餘人的也須要保持一致，再再後來就開始嘗試寫了一份代碼規範，用於規範團隊的代碼質量。網上有很多講代碼規範的書，我也就再也不獻醜了，你們能夠去看看阿里\百度\騰訊他們的代碼規範，寫的很是不錯。我就僅僅把本身遇到的嘗試作一下總結，這些可能別人也總結過無數次了，歡迎吐槽交流，也但願對你有點兒幫助。

　　一、減小全局污染

　　咱們都知道javascript使用function來管理本身的做用域，一個定義在函數內的變量對外是不可見的，這有點相似於其它語言裏的私有變量。對於javascript的執行環境來講通常都有一個全局變量，在全部的函數外能夠用this來指引，例如在瀏覽器端是window。可是當過多的在全局執行環境下定義變量會形成各類苦逼的事情，比方說你定義的變量被其餘人定義的同名變量覆蓋掉，或者你將來定義的變量把你過去定義的同名變量也覆蓋掉，並且過多的全局變量放在執行對戰裏還會形成內存的浪費等等不優化的狀況發生。我就再也不具體講沒個苦逼的事情是如何苦逼了，僅僅講講可能會致使這種狀況發生的很差的示例吧。

　　①聲明變量忘記使用「var」的狀況。

1 var sample = function () {
2    var a1 = "hello"; 
3        a2 = "world"; 
4 };
5 sample();
6 alert(a1);//undefined
7 alert(a2);//world

　　如你所見，a2由於忘記使用var致使了它成爲了全局的變量，這樣就有可能形成其它地方的修改覆蓋它或者將其它地方的變量覆蓋等（忘記var也會使得該變量能夠delete）。正確的作法是，全部的變量都使用「var」，而且儘可能都生命在函數體的頭部，這樣一目瞭然。以下：

1 var sample = function () {
2    var a1 = true,//標識位1
3        a2 = true, //標識位2
4        a3 = false;//標識位3    
5 6    //do some logic
7 8 }; 

　　(注：用「,」號隔開變量能夠避免過多使用"var"。)

　　②變量名提高。

　　javascript中函數內全部使用var聲明的變量都會提高到函數體頭部，這也是不少人容易犯錯的一點。具體來說就是：

1 myname = "global"; 
2 function sample() {
3    alert(myname); // "undefined"
4    var myname = "local";
5    alert(myname); // "local"
6 }
7 sample();

　　如你所見，第一個alert出來的並不是global。緣由在於，函數sample內部聲明的myname會提高到函數體頂部，而原語句的地方纔是正在賦值的地方。在聲明和賦值直接引用的話確定是undefined了。其執行效果以下：

1 myname = "global"; 
2 function sample() {
3    var myname;//沒有賦值
4    alert(myname); // "undefined"
5    myname = "local";//此處賦值
6    alert(myname); // "local"
7 }
8 sample();

　　因此一個重要的經驗就是，在函數體講全部的var聲明的東西都拿到函數體頂部，以避免形成沒必要要的錯誤。

　　二、for循環。

　　咱們習慣將for循環寫成以下形式：

1 for (var i = 0; i < myarray.length; i++) {
2     //logic
3 }

　　看似沒有問題，可是若是myarray是讀取的DOM的節點，那麼每一次循環都要去DOM裏選取節點再作判斷，很是影響性能。可能數量不大感受不錯來，多了就很是嚴重了。因此，for循環判斷條件裏儘可能不要使用涉及到DOM操做的動做。優化以下：

1 for (var i = 0, max = myarray.length; i < max; i++) {
2     // logic
3 }

     另一個就是使用for-in循環對象的話會讀取對象從原型鏈裏的屬性，若是這不是但願的，那麼能夠用一個判斷hasOwnProperty(i)去掉它。

　　三、用「===」取代「==」

　　前者是嚴格判斷，後者會提早進行隱式的類型轉換。

　　四、不使用eval()

　　五、統一縮進大小（不管用tab或者2個或者4個空格，團隊統一便可），任何用花括號括起來並換行的都進行縮進。

　　六、花括號{}

　　for循環或者if判斷等，即便只有一行，也要換行並用{}括起來。

　　七、空格

　　任何「;」後空一格、for循環中初始化「,」後空一格、數組中","後空一格、對象中「:」後空一格、如：

1 for (var i = 0, j = 1; i < 10; i += 1){
2   var some = [1, 2, 3];
3   var obj = {aa: 1, bb: 2}
3 }

　　函數參數裏「,」後空一格、函數聲明中花括號前空一格、函數表達式中括號先後各空一格，如：

1 func(a, b, c){};
2 function func() {};
3 var func = function () {};

　　全部的操做符先後都跟一個空格，如：

1 var d = 0,
2     a = b + 1;
3 if (a && b && c) {
4     d = a % c;
5     a += d;
6 }

　　八、命名規則

　　構造器函數首字母大寫,如：

1 function Person() {...}

　　變量用駝峯式，如：

1 getFirstName()

　　常量全用大寫字母，如：

1 var PI = 3.1415926;

　　私有函數用下劃線開頭，如：

1 var person = {
2     _setSext: function () {
3     // ...
4     },
5     _setName: function () {
6     // ...
7     }
8 };

　　九、寫註釋

　　這一步很是關鍵，由於你寫的代碼別人不必定看得懂，你寫的未來你也不必定輕易能看懂。因此良好的註釋習慣能夠事半功倍。

　　感謝你這麼大的耐性，天馬行空的對着本身寫的代碼總結了一點兒，但願多少對你有點啓發。