javascript最全編碼規範


JavaScript 最全編碼規範 2017-03-15 來自:淡忘~淺思 原文:https://github.com/airbnb/javascript 譯文:http://www.ido321.com/1520.html 譯者:dwqs 類型 1.基本類型:訪問基本類型時,應該直接操作類型值  string  number  boolean  null  undefined var foo = 1; var bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 2.複合類型:訪問複合類型時,應該操作其引用  object  array  function var foo = [1, 2]; var bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9 對象  使用字面量語法創建物件 // bad var item = new Object(); // good var item = {};  不要使用保留字,在 IE8 中不起作用,更多相關資訊 // bad var superman = { default: { clark: 'kent' }, private: true }; // good var superman = { defaults: { clark: 'kent' }, hidden: true };  使用易讀的同義詞代替保留字 // bad var superman = { class: 'alien' }; // bad var superman = { klass: 'alien' }; // good var superman = { type: 'alien' }; 陣列  使用字面量語法創建陣列 // bad var items = new Array(); // good var items = [];  添加陣列元素時,使用 push 而不是直接添加 var someStack = []; // bad someStack[someStack.length] = 'abracadabra'; // good someStack.push('abracadabra');  需要複製陣列時,可以使用 slice,jsPerf 的相關文章 var len = items.length; var itemsCopy = []; var i; // bad for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good itemsCopy = items.slice();  使用 slice 將類陣列物件轉為陣列 function trigger() { var args = Array.prototype.slice.call(arguments); ... } 字串  對字串使用單引號 // bad var name = “Bob Parr“; // good var name = 'Bob Parr'; // bad var fullName = “Bob “ + this.lastName; // good var fullName = 'Bob ' + this.lastName;  超過 80 個字元的字串應該使用字串連接子進行跨行  注意:對長字串過度使用連接子將會影響性能。相關的文章和主題討論: jsPerf & Discussion. // bad var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; // bad var errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.'; // good var errorMessage = 'This is a super long error that was thrown because ' + 'of Batman. When you stop to think about how Batman had anything to do ' + 'with this, you would get nowhere fast.';  以程式設計方式創建字串的時應該使用 Array 的 join 方法而不是通過連接子,尤其 是在 IE 中:jsPerf. var items; var messages; var length; var i; messages = [{ state: 'success', message: 'This one worked.' }, { state: 'success', message: 'This one worked as well.' }, { state: 'error', message: 'This one did not work.' }]; length = messages.length; // bad function inbox(messages) { items = '
    '; for (i = 0; i < length; i++) { items += '
  • ' + messages[i].message + '
  • '; } return items + '
'; } // good function inbox(messages) { items = []; for (i = 0; i < length; i++) { items[i] = '
  • ' + messages[i].message + '
  • '; } return '
      ' + items.join('') + '
    '; } 函數  函數運算式 // anonymous function expression var anonymous = function() { return true; }; // named function expression var named = function named() { return true; }; // immediately-invoked function expression (IIFE) (function() { console.log('Welcome to the Internet. Please follow me.'); })();  不要在非函數塊中(if, while, etc)聲明函數,儘管流覽器允許你分配函數給一個變 數,但壞消息是,不同的流覽器用不同的方式解析它  注意:ECMA-262 把塊定義為一組語句,但函式宣告不是一個語句:Read ECMA- 262’s note on this issue. // bad if (currentUser) { function test() { console.log('Nope.'); } } // good var test; if (currentUser) { test = function test() { console.log('Yup.'); }; }  不要命名一個參數為 arguments,否則它將優先於傳遞給每個函數作用域中的 arguments 物件, // bad function nope(name, options, arguments) { // ...stuff... } // good function yup(name, options, args) { // ...stuff... } 屬性  使用點標記法訪問屬性 var luke = { jedi: true, age: 28 }; // bad var isJedi = luke['jedi']; // good var isJedi = luke.jedi;  用變數訪問屬性時要使用下標標記法([]) var luke = { jedi: true, age: 28 }; function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi'); 變數  總是使用 var 聲明變數,不然其將變為全域變數。我們要想辦法避免全域空間污染 // bad superPower = new SuperPower(); // good var superPower = new SuperPower();  使用 var 聲明每個變數,這樣很容易添加新的變數聲明,而不用去擔心用 a;替換 a, // bad var items = getItems(), goSportsTeam = true, dragonball = 'z'; // bad // (compare to above, and try to spot the mistake) var items = getItems(), goSportsTeam = true; dragonball = 'z'; // good var items = getItems(); var goSportsTeam = true; var dragonball = 'z';  最後聲明未賦值的變數,這對於你需要根據之前已經賦值的變數對一個變數進行賦 值時是很有幫助的 // bad var i, len, dragonball, items = getItems(), goSportsTeam = true; // bad var i; var items = getItems(); var dragonball; var goSportsTeam = true; var len; // good var items = getItems(); var goSportsTeam = true; var dragonball; var length; var i;  在作用域頂端對變數賦值,這有助於避免變數聲明問題和與聲明提升相關的問題 // bad function() { test(); console.log('doing stuff..'); //..other stuff.. var name = getName(); if (name === 'test') { return false; } return name; } // good function() { var name = getName(); test(); console.log('doing stuff..'); //..other stuff.. if (name === 'test') { return false; } return name; } // bad function() { var name = getName(); if (!arguments.length) { return false; } return true; } // good function() { if (!arguments.length) { return false; } var name = getName(); return true; } 聲明提升  變數聲明是在作用域的頂端,但是賦值沒有 // we know this wouldn't work (assuming there // is no notDefined global variable) function example() { console.log(notDefined); // => throws a ReferenceError } // creating a variable declaration after you // reference the variable will work due to // variable hoisting. Note: the assignment // value of `true` is not hoisted. function example() { console.log(declaredButNotAssigned); // => undefined var declaredButNotAssigned = true; } // The interpreter is hoisting the variable // declaration to the top of the scope, // which means our example could be rewritten as: function example() { var declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned = true; }  匿名運算式能提升他們的變數名,但不能提升函數賦值 function example() { console.log(anonymous); // => undefined anonymous(); // => TypeError anonymous is not a function var anonymous = function() { console.log('anonymous function expression'); }; }  命名函數運算式會提升變數名,而不是函數名或者函數體 function example() { console.log(named); // => undefined named(); // => TypeError named is not a function superPower(); // => ReferenceError superPower is not defined var named = function superPower() { console.log('Flying'); }; } // the same is true when the function name // is the same as the variable name. function example() { console.log(named); // => undefined named(); // => TypeError named is not a function var named = function named() { console.log('named'); } }  函式宣告會提升變數名和函數體 function example() { superPower(); // => Flying function superPower() { console.log('Flying'); } } 更多資訊指引:JavaScript Scoping & Hoisting by Ben Cherry. 比較運算子&相等  使用===和!==代替==和!=  比較運算子進行計算時會利用 ToBoolean 方法進行強制轉換資料類型,並遵從一 下規則  Objects 的計算值是 true  Undefined 的計算值是 false  Boolean 的計算值是 boolean 的值  Numbers 如果是-0,+0 或者 NaN,則計算值是 false,反之是 true  Strings 如果是空,則計算值是 false,反之是 true if ([0]) { // true // An array is an object, objects evaluate to true }  使用快捷方式 // bad if (name !== '') { // ...stuff... } // good if (name) { // ...stuff... } // bad if (collection.length > 0) { // ...stuff... } // good if (collection.length) { // ...stuff... } 語句塊  對多行的語句塊使用大括弧 // bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function() { return false; } // good function() { return false; }  對於使用 if 和 else 的多行語句塊,把 else 和 if 語句塊的右大括弧放在同一行 // bad if (test) { thing1(); thing2(); } else { thing3(); } // good if (test) { thing1(); thing2(); } else { thing3(); } 注釋  多行注釋使用/** … */,需包含一個描述、所有參數的具體類型和值以及返回值 // bad // make() returns a new element // based on the passed in tag name // // @param {String} tag // @return {Element} element function make(tag) { // ...stuff... return element; } // good /** * make() returns a new element * based on the passed in tag name * * @param {String} tag * @return {Element} element */ function make(tag) { // ...stuff... return element; }  單行注釋使用//,把單行注釋放在語句的上一行,並且在注釋之前空一行 // bad var active = true; // is current tab // good // is current tab var active = true; // bad function getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; } // good function getType() { console.log('fetching type...'); // set the default type to 'no type' var type = this._type || 'no type'; return type; }  如果你指出的問題需要重新定位或者提出一個待解決的問題需要實現,給注釋添加 FIXME or TODO 首碼有利於其他開發者快速理解。這些注釋不同於通常的注釋, 因為它們是可實施的。這些實施措施就是 FIXME – need to figure this out or TODO – need to implement.  使用// FIXME:給一個問題作注釋 function Calculator() { // FIXME: shouldn't use a global here total = 0; return this; }  使用//TODO:給問題解決方案作注釋 function Calculator() { // TODO: total should be configurable by an options param this.total = 0; return this; } 空白  使用軟定位字元設置兩個空格 // bad function() { ∙∙∙∙var name; } // bad function() { ∙var name; } // good function() { ∙∙var name; }  在左大括弧之前留一個空格 // bad function test(){ console.log('test'); } // good function test() { console.log('test'); } // bad dog.set('attr',{ age: '1 year', breed: 'Bernese Mountain Dog' }); // good dog.set('attr', { age: '1 year', breed: 'Bernese Mountain Dog' });  在控制語句中(if, while etc),左括弧之前留一個空格。函數的參數清單之前不要 有空格 // bad if(isJedi) { fight (); } // good if (isJedi) { fight(); } // bad function fight () { console.log ('Swooosh!'); } // good function fight() { console.log('Swooosh!'); }  用空白分隔運算子 // bad var x=y+5; // good var x = y + 5;  用一個分行符號結束檔 // bad (function(global) { // ...stuff... })(this); // bad (function(global) { // ...stuff... })(this);↵ ↵ // good (function(global) { // ...stuff... })(this);↵  當調用很長的方法鏈時使用縮進,可以強調這行是方法調用,不是新的語句 // bad $('#items').find('.selected').highlight().end().find('.open'). updateCount(); // bad $('#items'). find('.selected'). highlight(). end(). find('.open'). updateCount(); // good $('#items') .find('.selected') .highlight() .end() .find('.open') .updateCount(); // bad var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').c lassed('led', true) .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led); // good var leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') .classed('led', true) .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') .call(tron.led);  在語句塊和下一個語句之前留一個空行 // bad if (foo) { return bar; } return baz; // good if (foo) { return bar; } return baz; // bad var obj = { foo: function() { }, bar: function() { } }; return obj; // good var obj = { foo: function() { }, bar: function() { } }; return obj; 逗號  不要在語句前留逗號 // bad var story = [ once , upon , aTime ]; // good var story = [ once, upon, aTime ]; // bad var hero = { firstName: 'Bob' , lastName: 'Parr' , heroName: 'Mr. Incredible' , superPower: 'strength' }; // good var hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength' };  不要有多餘逗號:這會在 IE6、IE7 和 IE9 的怪異模式中導致一些問題;同時,在 ES3 的一些實現中,多餘的逗號會增加陣列的長度。在 ES5 中已經澄清 (source) // bad var hero = { firstName: 'Kevin', lastName: 'Flynn', }; var heroes = [ 'Batman', 'Superman', ]; // good var hero = { firstName: 'Kevin', lastName: 'Flynn' }; var heroes = [ 'Batman', 'Superman' ]; 分號  恩,這也是規範一部分 // bad (function() { var name = 'Skywalker' return name })() // good (function() { var name = 'Skywalker'; return name; })(); // good (guards against the function becoming an argument when two files with IIFEs are concatenated) ;(function() { var name = 'Skywalker'; return name; })(); 閱讀更多 類型分配&強制轉換  執行強制類型轉換的語句。  Strings: // => this.reviewScore = 9; // bad var totalScore = this.reviewScore + ''; // good var totalScore = '' + this.reviewScore; // bad var totalScore = '' + this.reviewScore + ' total score'; // good var totalScore = this.reviewScore + ' total score';  使用 parseInt 對 Numbers 進行轉換,並帶一個進製作為參數 var inputValue = '4'; // bad var val = new Number(inputValue); // bad var val = +inputValue; // bad var val = inputValue >> 0; // bad var val = parseInt(inputValue); // good var val = Number(inputValue); // good var val = parseInt(inputValue, 10);  無論出於什麼原因,或許你做了一些”粗野”的事;或許 parseInt 成了你的瓶頸;或 許考慮到性能,需要使用位元運算,都要用注釋說明你為什麼這麼做 // good /** * parseInt was the reason my code was slow. * Bitshifting the String to coerce it to a * Number made it a lot faster. */ var val = inputValue >> 0;  注意:當使用位運算時,Numbers 被視為 64 位值,但是位運算總是返回 32 位整 型(source)。對於整型值大於 32 位的進行位運算將導致不可預見的行為。 Discussion.最大的有符號 32 位元整數是 2,147,483,647 2147483647 >> 0 //=> 2147483647 2147483648 >> 0 //=> -2147483648 2147483649 >> 0 //=> -2147483647  Booleans: var age = 0; // bad var hasAge = new Boolean(age); // good var hasAge = Boolean(age); // good var hasAge = !!age; 命名規範  避免單字母名稱,讓名稱具有描述性 // bad function q() { // ...stuff... } // good function query() { // ..stuff.. }  當命名物件、函數和實例時使用駱駝拼寫法 // bad var OBJEcttsssss = {}; var this_is_my_object = {}; function c() {} var u = new user({ name: 'Bob Parr' }); // good var thisIsMyObject = {}; function thisIsMyFunction() {} var user = new User({ name: 'Bob Parr' });  當命名構造函數或類名時,使用駝峰式寫法 // bad function user(options) { this.name = options.name; } var bad = new user({ name: 'nope' }); // good function User(options) { this.name = options.name; } var good = new User({ name: 'yup' });  命名私有屬性時使用前置底線 // bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; // good this._firstName = 'Panda';  保存 this 引用時使用_this // bad function() { var self = this; return function() { console.log(self); }; } // bad function() { var that = this; return function() { console.log(that); }; } // good function() { var _this = this; return function() { console.log(_this); }; }  命名函數時,下面的方式有利於堆疊跟蹤 // bad var log = function(msg) { console.log(msg); }; // good var log = function log(msg) { console.log(msg); };  注意:IE8 和怪異模式下命名函數表示,戳此:http://kangax.github.io/nfe/  如果檔作為一個類被匯出,檔案名應該和類名保持一致 // file contents class CheckBox { // ... } module.exports = CheckBox; // in some other file // bad var CheckBox = require('./checkBox'); // bad var CheckBox = require('./check_box'); // good var CheckBox = require('./CheckBox'); 存取器  對於屬性,訪問器函數不是必須的  如果定義了存取器函數,應參照 getVal() 和 setVal(‘hello’)格式. // bad dragon.age(); // good dragon.getAge(); // bad dragon.age(25); // good dragon.setAge(25);  如果屬性時 boolean,格式應為 isVal() or hasVal(). // bad if (!dragon.age()) { return false; } // good if (!dragon.hasAge()) { return false; }  創建 get() and set()函數時不錯的想法,但是要保持一致 function Jedi(options) { options || (options = {}); var lightsaber = options.lightsaber || 'blue'; this.set('lightsaber', lightsaber); } Jedi.prototype.set = function(key, val) { this[key] = val; }; Jedi.prototype.get = function(key) { return this[key]; }; 構造函數  在原型物件上定義方法,而不是用新物件重寫它。重寫使繼承變為不可能:重置原 型將重寫整個基類 function Jedi() { console.log('new jedi'); } // bad Jedi.prototype = { fight: function fight() { console.log('fighting'); }, block: function block() { console.log('blocking'); } }; // good Jedi.prototype.fight = function fight() { console.log('fighting'); }; Jedi.prototype.block = function block() { console.log('blocking'); };  方法應該返回 this,有利於構成方法鏈 // bad Jedi.prototype.jump = function() { this.jumping = true; return true; }; Jedi.prototype.setHeight = function(height) { this.height = height; }; var luke = new Jedi(); luke.jump(); // => true luke.setHeight(20); // => undefined // good Jedi.prototype.jump = function() { this.jumping = true; return this; }; Jedi.prototype.setHeight = function(height) { this.height = height; return this; }; var luke = new Jedi(); luke.jump() .setHeight(20);  寫一個自訂的 toString()方法是可以的,只要確保它能正常運行並且不會產生副作 用 function Jedi(options) { options || (options = {}); this.name = options.name || 'no name'; } Jedi.prototype.getName = function getName() { return this.name; }; Jedi.prototype.toString = function toString() { return 'Jedi - ' + this.getName(); }; 事件  當在事件物件上附加資料時(無論是 DOM 事件還是如 Backbone 一樣擁有的私有 事件),應傳遞散列物件而不是原始值,這可以讓隨後的貢獻者給事件物件添加更 多的資料,而不必去查找或者更新每一個事件處理常式。舉個粟子,不要用下面的 方式: // bad $(this).trigger('listingUpdated', listing.id); $(this).on('listingUpdated', function(e, listingId) { // do something with listingId });  應該按如下方式: // good $(this).trigger('listingUpdated', { listingId : listing.id }); $(this).on('listingUpdated', function(e, data) { // do something with data.listingId }); 模組  模組應該以 ! 開始,這能確保當腳本連接時,如果畸形模組忘記導入,包括最後 一個分號,不會產生錯誤。Explanation  檔應該以駝峰式命名,放在同名的資料夾中,和單出口的名稱相匹配  定義一個 noConflict()方法來設置匯出模組之前的版本,並返回當前版本。  在模組的頂部申明’use strict’; // fancyInput/fancyInput.js !function(global) { 'use strict'; var previousFancyInput = global.FancyInput; function FancyInput(options) { this.options = options || {}; } FancyInput.noConflict = function noConflict() { global.FancyInput = previousFancyInput; return FancyInput; }; global.FancyInput = FancyInput; }(this); jQuery  jQuery 物件變數使用首碼$ // bad var sidebar = $('.sidebar'); // good var $sidebar = $('.sidebar');  緩存 jQuery 查詢 // bad function setSidebar() { $('.sidebar').hide(); // ...stuff... $('.sidebar').css({ 'background-color': 'pink' }); } // good function setSidebar() { var $sidebar = $('.sidebar'); $sidebar.hide(); // ...stuff... $sidebar.css({ 'background-color': 'pink' }); }  使用級聯('.sidebarul′)或父子(‘.sidebar > ul’)選擇器進行 DOM 查詢。jsPerf  在範圍內使用 find 進行 jQuery 物件查詢 // bad $('ul', '.sidebar').hide(); // bad $('.sidebar').find('ul').hide(); // good $('.sidebar ul').hide(); // good $('.sidebar > ul').hide(); // good $sidebar.find('ul').hide();
    还剩31页未读

    继续阅读

    下载pdf到电脑,查找使用更方便

    pdf的实际排版效果,会与网站的显示效果略有不同!!

    需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

    下载pdf

    pdf贡献者

    bravelkp

    贡献于2017-05-03

    下载需要 10 金币 [金币充值 ]
    亲,您也可以通过 分享原创pdf 来获得金币奖励!
    下载pdf