天天看點

Web前端工程師開發規範必須要注意的事(續)Web前端工程師開發規範必須要注意的事(續)

Web前端工程師開發規範必須要注意的事(續)

JavaScript書寫規範

  1. 檔案編碼統一為utf-8, 書寫過程過, 每行代碼結束必須有分号; 原則上所有功能均根據XXX項目需求原生開發, 以避免網上down下來的代碼造成的代碼污染(沉冗代碼 || 與現有代碼沖突 || …);
  2. 庫引入: 原則上僅引入jQuery庫, 若需引入第三方庫, 須與團隊其他人員讨論決定;
  3. 變量命名: 駝峰式命名. 原生JavaScript變量要求是純英文字母, 首字母須小寫, 如iTaoLun;

    jQuery變量要求首字元為’_’, 其他與原生JavaScript 規則相同, 如: _iTaoLun;

    另, 要求變量集中聲明, 避免全局變量.

  4. 類命名: 首字母大寫, 駝峰式命名. 如 ITaoLun;
  5. 函數命名: 首字母小寫駝峰式命名. 如iTaoLun();
  6. 命名語義化, 盡可能利用英文單詞或其縮寫;
  7. 盡量避免使用存在相容性及消耗資源的方法或屬性, 比如eval_r() & innerText;
  8. 後期優化中, JavaScript非注釋類中文字元須轉換成unicode編碼使用, 以避免編碼錯誤時亂碼顯示;
  9. 代碼結構明了, 加适量注釋. 提高函數重用率;
  10. 注重與html分離, 減小reflow, 注重性能.

圖檔規範

  1. 所有頁面元素類圖檔均放入img檔案夾, 測試用圖檔放于img/demoimg檔案夾;
  2. 圖檔格式僅限于gif || png || jpg;
  3. 命名全部用小寫英文字母 || 數字 || _ 的組合,其中不得包含漢字 || 空格 || 特殊字元;盡量用易懂的詞彙, 便于團隊其他成員了解; 另, 命名分頭尾兩部分, 用下劃線隔開, 比如ad_left01.gif || btn_submit.gif;
  4. 在保證視覺效果的情況下選擇最小的圖檔格式與圖檔品質, 以減少加載時間;
  5. 盡量避免使用半透明的png圖檔(若使用, 請參考css規範相關說明);
  6. 運用css sprite技術集中小的背景圖或圖示, 減小頁面http請求, 但注意, 請務必在對應的sprite psd源圖中劃參考線, 并儲存至img目錄下.

注釋規範

  1. html注釋: 注釋格式 , ‘–’隻能在注釋的始末位置,不可置入注釋文字區域;
  2. css注釋: 注釋格式 ;
  3. JavaScript注釋, 單行注釋使用’//這兒是單行注釋’ ,多行注釋使用 ;

開發及測試工具約定

建議使用WebStorm||Aptana || Dw || Vim , 亦可根據自己喜好選擇, 但須遵循如下原則:

  1. 不可利用IDE的視圖模式’畫’代碼;
  2. 不可利用IDE生成相關功能代碼, 比如Dw内置的一些功能js;
  3. 編碼必須格式化, 比如縮進;

測試工具: 前期開發僅測試FireFox & IE6 & IE7 & IE8 & IE9 & Opera & Chrome & Safari;

其他規範

  1. 開發過程中嚴格按分工完成頁面, 以提高css複用率, 避免重複開發;
  2. 減小沉冗代碼, 書寫所有人都可以看的懂的代碼. 簡潔易懂是一種美德. 為使用者着想, 為伺服器着想.