網易郵箱前端技術分享之javascript編碼規范（二）類規范

　　上一篇文章介紹了網易郵箱前端 javascript 編碼規范的第一部分，關于變量和函數的編碼規范，本篇文章將繼續介紹網易郵箱制定的 javascript 類編碼規范。

　　網易郵箱頁面在 window 只允許定義三種變量——1：全局變量；2：常量；3：類。任何業務邏輯都需要通過類方法或者示例方法實現。前兩種變量在之前文章中已經介紹，在此不再累述，接下來詳細介紹類定義和使用的規范。

　　定義類是通過一個閉包完成的：

(function(){ 

 //第一步：引入存在的類。引入 support 類 

 var Support = window.Support; 


 //$是網易郵箱基礎庫“base”的引用稍后會介紹 

 //第二步：定義類。可以認為返回了一個類定義 function (){}，并在 window 下定義一個 Image 類 

 var Image = $.createClass ("Image"); 


 //可以認為是 jQuery 的 extend 方法 


 //第三步：定義類屬性/方法定義 

 $.Object.extend (Image,{ 

  _language : null,   //內部屬性 

  getSize  : fImageGetSize 

 }); 

 //第四步：定義實例屬性/方法定義 

 $.Object.extend (Image.prototype,{ 

  name  : null, 

  url   : null, 

  ext   : null, 

  width  : 0, 

  height  : 0, 

  setName  : fImageSetName, 

  getName  : fImageGetName, 

  init  : fImageInit 

 }); 

 //第五步：方法實現 


 function fImageGetSize (nWidth,nHeight){ 

  return nWidth*nHeight; 

 } 


 function fImageSetName (sName){ 

  var oImage = this; 

  oImage.name = sName; 

 } 


 function fImageGetName (){ 

  var oImage = this; 

  return oImage.name; 

 } 


 function fImageInit (sUrl){ 

  var oImage = this; 

  oImage.url = sUrl; 

  oImage.ext = Support.getExt (sUrl); 

  oImage.width = Support.getWidth (sUrl); 

  oImage.height = Support.getHeight (sUrl); 

 } 


})();

　　我們可以看到，這個閉包完成了以下幾件事情：

1. 引入這個類需要用到的其他類。
2. 定義這個類。
3. 定義類的屬性和方法。
4. 定義類的實例屬性和方法。
5. 類和實例方法的實現。

　　在命名上，我們遵循了一下規則：

1. 類名首個字母必需大寫，例如 Image，Support 等。
2. 屬性名需要是有意義的名詞，首字母小寫，例如 oImage.width。
3. 方法名需要是有意義的動詞[+名詞]，首字母小寫，例如 Support.getWidth
4. 如果不希望被其他方法調用，需要在屬性或者方法名前面加“_”，例如 oImage._language
5. 如果不希望被子類調用，需要在屬性或者方法名前加“_”，例如 oImage.__fire ()

　　這里需要特別說明以下幾點：

1. 方法的定義不是通過匿名函數來定義，而是集中在類定義的下面來實現。這樣的好處是能在最開始將類的屬性方法定義都羅列出來，便于通過源碼查看到對應屬性和方法。
2. 在類/實例方法中，使用局部變量代替 this。this 不是一個好的玩意兒，一不小心就會被 this 搞暈。使用局部變量能夠盡量避免這樣的問題，也能夠在壓縮混淆的時候效果更好。
3. 在實際開發過程中，每個類定義都單獨一個 js 實現。

　　除了類的定義，閉包不實現任何其他邏輯。使用閉包能夠將很多變量約束在閉包作用域中，并且能夠在壓縮混淆中效果更好，除此之外，使用閉包定義類，在之后將介紹到的動態加載成為了一件十分容易的事情，稍后會和大家一起分享。

　　by dongua

來自: ntesmailfetc.blog.163.com