js規范

協作開發及分工: 根據各個模塊, 同時根據頁面相似程序, 事先寫好大體框架文件, 分配給前端人員實現內部結構&表現&行為; 共用js工具類, 協作開發過程中， 此文件不可隨意修改.

命名格式

全局變量, 使用全大寫字母，并用下劃線分隔單詞

var CONST_NAME_LIKE_THIS = {}；let CONST_NAME_LIKE_THIS ={}；const CONST_NAME_LIKE_THIS = {}；

局部變量, 使用 Camel 命名法。

var loadingModules = {}；

私有屬性、變量和方法以下劃線 _ 開頭。

var _privateMethod = {}；

函數

> 使用 Camel 命名法。 > 參數, 使用 Camel 命名法。 > 可使用常見動詞約定。 > 構造函數 function stringFormat (source) {}function hear (theBells) {}/* not recommended */function canRead() {return true;}/* recommended */function getName() {return this.name;}

類

> 使用 Pascal 命名法。 > 方法 / 屬性, 使用 Camel 命名法。 > 公共屬性和方法：跟變量和函數的命名一樣。 > 私有屬性和方法：前綴為_(下劃線)，后面跟公共屬性和方法一樣的命名方式。 > 前綴為名稱。 function Student(name) {this.name = name;}var st = new Student('tom'); function Student(name) {var _name = name; // 私有成員// 公共方法this.getName = function () {return _name;}// 公共方式this.setName = function (value) {_name = value;}}var st = new Student('tom');st.setName('jerry');console.log(st.getName()); // => jerry：輸出_name私有變量的值 function TextNode(value,engine) {this.value = value;this.engine = engine;}TextNode.prototype.clone = function(){}

枚舉

> 變量 使用 Pascal 命名法。 > 枚舉的屬性， 使用全部字母大寫，單詞間下劃線分隔的命名方式。 var TargetState = {READING: 1,READED:2,APPLIED:3,READY:4}

接口命名規范

> 可讀性強，見名曉義。 > 盡量不與 jQuery 社區已有的習慣沖突。 > 盡量寫全。不用縮寫，除非是下面列表中約定的；（變量以表達清楚為目標，uglify 會完成壓縮體積工作）。

True 和 False 布爾表達式

> 類型檢測優先使用 typeof。對象類型檢測使用 instanceof。null 或 undefined 的檢測使用 == null。 > 下面的布爾表達式都返回 false: * null * undefined * ‘’ 空字符串 * 0 數字0 > 但小心下面的, 可都返回 true: * ‘0’ 字符串0 * [] 空數組 * {} 空對象

不要在 Array 上使用 for-in 循環

> for-in 循環只用于 object/map/hash 的遍歷, 對 Array 用 for-in 循環有時會出錯. 因為它并不是從 0 到 length - 1 進行遍歷, 而是所有出現在對象及其原型鏈的鍵值。 /* not recommended */function printArry (arr) {for (var key in arr) {print(arr[key])}}printArry([0,1,2,3,4,5,6]) // this is right.var a = new Array(10)printArry(a) // this is wrong.a = document.getElementTagName("*")printArry(a) // this is wrong.a = [0,1,2,3,4,5]a.bunu = "aaaa"printArry(a) // this is wrong.a = new Arraya[3] = 2printArry(a) // this is wrong./* recommended */function printArry (arr) {var len = arr.lengthfor (var i=0, i<len; i++) {print(arr[i])}}

二元和三元操作符

> 操作符始終寫在前一行, 以免分號的隱式插入產生預想不到的問題。 > 操作符始終寫在前一行, 以免分號的隱式插入產生預想不到的問題。如果一行放不下, 還是按照上述的縮進風格來換行。 var x = a ? b : c var y = a ?moreComplicateB : moreComplicateC. 操作符var x = foo.bar().doSomeThing().doSomeThingEls()

條件(三元)操作符 (??

> 三元操作符用于替代 if 條件判斷語句。 /* not recommended */if (val != 0) {return foo()}else {return bar()}/* recommended */return val ? foo() : bar()

&& 和 ||

> 二元布爾操作符是可短路的, 只有在必要時才會計算到最后一項。 /* not recommended */function foo (opt_win) {var winif(opt_win) {win = opt_win} else {win = window}// ...}if (node) {if(node.kids){if(node.kids[index]){foo(node.kids[index])}}}/* recommended */function foo (opt_win) {var win = opt_win || window// ...}var kid = node && node.kids && node.kids[index]if(kid){foo(kid)}

由多個單詞組成的 縮寫詞，在命名中，根據當前命名法和出現的位置，所有字母的大小寫與首字母的大小寫保持一致。

圓括號

> 圓括號在 JavaScript 中有兩種作用，一種表示調用函數，一種表示不同的值的組合。只在必要的時候使用圓括號。 > 對于一元操作符（如delete、typeof、void），或是在某些關鍵詞（如 return、throw、case、new）之后，不要使用括號。

字符串

> 字符串使用單引號，只有 JSON 中的字符串屬性值使用雙引號。 > 符串中的 HTML 屬性使用雙引號。

空行

> 使用空行來劃分一組邏輯上相關聯的代碼片段。文件末尾空一行。

注釋

> 編碼時一定注意寫好注釋，頁面結構和樣式的動態變化和添加，打好注釋，便于后臺同事套頁面時候的閱讀。 > Js做到主要代碼、方法、參數的行行注釋說明，便于其他同事了解你做此功能的思路，避免代碼的冗余，造成性能問題，盡量做到高內聚低耦合。 // Js推薦注釋，注釋符號與注釋說明之間空一個空格，單行// var sellEle = document.querySelector('.sell');// Js推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋/*var sellEle = document.querySelector('.sell');console.log(sellEle);*/ > 函數(方法)注釋 /** * 函數說明 * @關鍵字 *//*** 合并Grid的行* @param {Grid} grid 需要合并的Grid* @param {Array} cols 需要合并列的Index(序號)數組；從0開始計數，序號也包含。* @param {Boolean} isAllSome 是否2個tr的cols必須完成一樣才能進行合并。true：完成一樣；false(默認)：不完全一樣* @return void* @author barry*/function mergeCells(grid, cols, isAllSome) {// Do Something}

參考文檔

• js：主要有縮進，換行，變量名稱，括號，文檔注釋等等。可以參考：
  • airbnb js style
  • google js style
  • idiomatic js style
  • standard js style

ps:建議大家在各個產品，嚴格遵守規范，以便后期的維護以及代碼的健壯性等。

如果文檔有更好的補充和好的建議，歡迎聯系@博主

如有雷同，請聯系@博主。

歡迎進入個人公眾號 ，一起學習啊！

總結

以上是生活随笔為你收集整理的前端开发规范[js篇]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。