用更合理的方式写 JavaScript
kart
9年前
<h2>类型</h2> <p><strong>原始值</strong>: 存取直接作用于它自身。</p> <pre> <code class="language-javascript">var foo = 1; var bar = foo; bar = 9; console.log(foo, bar); // => 1, 9</code></pre> <ul> <li><code>string</code></li> <li><code>number</code></li> <li><code>boolean</code></li> <li><code>null</code></li> <li><code>undefined</code></li> </ul> <p><strong>复杂类型</strong>: 存取时作用于它自身值的引用。</p> <pre> <code class="language-javascript">var foo = [1, 2]; var bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9</code></pre> <ul> <li><code>object</code></li> <li><code>array</code></li> <li><code>function</code></li> </ul> <h2>对象</h2> <p>使用直接量创建对象。</p> <pre> <code class="language-javascript">// bad var item = new Object(); // good var item = {};</code></pre> <p>不要使用<a href="/misc/goto?guid=4959670115886774139">保留字</a>作为键名，它们在 IE8 下不工作。<a href="/misc/goto?guid=4959670115976385304">更多信息</a>。</p> <pre> <code class="language-javascript">// bad var superman = { default: { clark: 'kent' }, private: true }; // good var superman = { defaults: { clark: 'kent' }, hidden: true };</code></pre> <p>使用同义词替换需要使用的保留字。</p> <pre> <code class="language-javascript">// bad var superman = { class: 'alien' }; // bad var superman = { klass: 'alien' }; // good var superman = { type: 'alien' };</code></pre> <h2>数组</h2> <p>使用直接量创建数组。</p> <pre> <code class="language-javascript">// bad var items = new Array(); // good var items = [];</code></pre> <p>向数组增加元素时使用 Array#push 来替代直接赋值。</p> <pre> <code class="language-javascript">var someStack = []; // bad someStack[someStack.length] = 'abracadabra'; // good someStack.push('abracadabra');</code></pre> <p>当你需要拷贝数组时，使用 Array#slice。<a href="/misc/goto?guid=4959645689073816137">jsPerf</a></p> <pre> <code class="language-javascript">var len = items.length; var itemsCopy = []; var i; // bad for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good itemsCopy = items.slice();</code></pre> <p>使用 Array#slice 将类数组对象转换成数组。</p> <pre> <code class="language-javascript">function trigger() { var args = Array.prototype.slice.call(arguments); ... } </code></pre> <h2>字符串</h2> <p>使用单引号 <code>''</code> 包裹字符串。</p> <pre> <code class="language-javascript">// bad var name = "Bob Parr"; // good var name = 'Bob Parr'; // bad var fullName = "Bob " + this.lastName; // good var fullName = 'Bob ' + this.lastName;</code></pre> <p>超过 100 个字符的字符串应该使用连接符写成多行。</p> <p>注：若过度使用，通过连接符连接的长字符串可能会影响性能。<a href="/misc/goto?guid=4959645689167330371">jsPerf</a> & <a href="/misc/goto?guid=4959645689251598662">讨论</a>.</p> <pre> <code class="language-javascript">// 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.';</code></pre> <p>程序化生成的字符串使用 Array#join 连接而不是使用连接符。尤其是 IE 下：<a href="/misc/goto?guid=4959670116169870721">jsPerf</a>.</p> <pre> <code class="language-javascript">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 = '<ul>'; for (i = 0; i < length; i++) { items += '<li>' + messages[i].message + '</li>'; } return items + '</ul>'; } // good function inbox(messages) { items = []; for (i = 0; i < length; i++) { // use direct assignment in this case because we're micro-optimizing. items[i] = '<li>' + messages[i].message + '</li>'; } return '<ul>' + items.join('') + '</ul>'; }</code></pre> <h2>函数</h2> <p>函数表达式：</p> <pre> <code class="language-javascript">// 匿名函数表达式 var anonymous = function() { return true; }; // 命名函数表达式 var named = function named() { return true; }; // 立即调用的函数表达式（IIFE） (function() { console.log('Welcome to the Internet. Please follow me.'); })();</code></pre> <p>永远不要在一个非函数代码块（if、while 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。</p> <p><strong>注：</strong> ECMA-262 把 <code>块</code> 定义为一组语句。函数声明不是语句。<a href="/misc/goto?guid=4959670116251216261">阅读对 ECMA-262 这个问题的说明</a>。</p> <pre> <code class="language-javascript">// bad if (currentUser) { function test() { console.log('Nope.'); } } // good var test; if (currentUser) { test = function test() { console.log('Yup.'); }; }</code></pre> <p>永远不要把参数命名为 <code>arguments</code>。这将取代函数作用域内的 <code>arguments</code> 对象。</p> <pre> <code class="language-javascript">// bad function nope(name, options, arguments) { // ...stuff... } // good function yup(name, options, args) { // ...stuff... }</code></pre> <h2>属性</h2> <p>使用 <code>.</code> 来访问对象的属性。</p> <pre> <code class="language-javascript">var luke = { jedi: true, age: 28 }; // bad var isJedi = luke['jedi']; // good var isJedi = luke.jedi;</code></pre> <p>当通过变量访问属性时使用中括号 <code>[]</code>。</p> <pre> <code class="language-javascript">var luke = { jedi: true, age: 28 }; function getProp(prop) { return luke[prop]; } var isJedi = getProp('jedi');</code></pre> <h2>变量</h2> <p>总是使用 <code>var</code> 来声明变量。不这么做将导致产生全局变量。我们要避免污染全局命名空间。</p> <pre> <code class="language-javascript">// bad superPower = new SuperPower(); // good var superPower = new SuperPower();</code></pre> <p>使用 <code>var</code> 声明每一个变量。 这样做的好处是增加新变量将变的更加容易，而且你永远不用再担心调换错 <code>;</code> 跟 <code>,</code>。</p> <pre> <code class="language-javascript">// bad var items = getItems(), goSportsTeam = true, dragonball = 'z'; // bad // （跟上面的代码比较一下，看看哪里错了） var items = getItems(), goSportsTeam = true; dragonball = 'z'; // good var items = getItems(); var goSportsTeam = true; var dragonball = 'z';</code></pre> <p>最后再声明未赋值的变量。当你需要引用前面的变量赋值时这将变的很有用。</p> <pre> <code class="language-javascript">// 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;</code></pre> <p>在作用域顶部声明变量。这将帮你避免变量声明提升相关的问题。</p> <pre> <code class="language-javascript">// 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; } this.setFirstName(name); return true; } // good function() { var name; if (!arguments.length) { return false; } name = getName(); this.setFirstName(name); return true; }</code></pre> <h2>提升</h2> <p>变量声明会提升至作用域顶部，但赋值不会。</p> <pre> <code class="language-javascript">// 我们知道这样不能正常工作（假设这里没有名为 notDefined 的全局变量） function example() { console.log(notDefined); // => throws a ReferenceError } // 但由于变量声明提升的原因，在一个变量引用后再创建它的变量声明将可以正常工作。 // 注：变量赋值为 `true` 不会提升。 function example() { console.log(declaredButNotAssigned); // => undefined var declaredButNotAssigned = true; } // 解释器会把变量声明提升到作用域顶部，意味着我们的例子将被重写成： function example() { var declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned = true; }</code></pre> <p>匿名函数表达式会提升它们的变量名，但不会提升函数的赋值。</p> <pre> <code class="language-javascript">function example() { console.log(anonymous); // => undefined anonymous(); // => TypeError anonymous is not a function var anonymous = function() { console.log('anonymous function expression'); }; }</code></pre> <p>命名函数表达式会提升变量名，但不会提升函数名或函数体。</p> <pre> <code class="language-javascript">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'); }; } // 当函数名跟变量名一样时，表现也是如此。 function example() { console.log(named); // => undefined named(); // => TypeError named is not a function var named = function named() { console.log('named'); } }</code></pre> <p>函数声明提升它们的名字和函数体。</p> <pre> <code class="language-javascript">function example() { superPower(); // => Flying function superPower() { console.log('Flying'); } }</code></pre> <p>了解更多信息在 <a href="/misc/goto?guid=4959645689398661505">JavaScript Scoping & Hoisting</a> by <a href="/misc/goto?guid=4958535186876491748">Ben Cherry</a>.</p> <h2>比较运算符 & 等号</h2> <p>优先使用 <code>===</code> 和 <code>!==</code> 而不是 <code>==</code> 和 <code>!=</code>.</p> <p>条件表达式例如 <code>if</code> 语句通过抽象方法 <code>ToBoolean</code> 强制计算它们的表达式并且总是遵守下面的规则：</p> <pre> <code class="language-javascript">if ([0]) { // true // 一个数组就是一个对象，对象被计算为 true }</code></pre> <ul> <li><strong>对象</strong> 被计算为 <strong>true</strong></li> <li><strong>Undefined</strong> 被计算为 <strong>false</strong></li> <li><strong>Null</strong> 被计算为 <strong>false</strong></li> <li><strong>布尔值</strong> 被计算为 <strong>布尔的值</strong></li> <li><strong>数字</strong> 如果是 <strong>+0、-0 或 NaN</strong> 被计算为 <strong>false</strong>，否则为 <strong>true</strong></li> <li><strong>字符串</strong> 如果是空字符串 <code>''</code> 被计算为 <strong>false</strong>，否则为 <strong>true</strong></li> </ul> <p>使用快捷方式。</p> <pre> <code class="language-javascript">// bad if (name !== '') { // ...stuff... } // good if (name) { // ...stuff... } // bad if (collection.length > 0) { // ...stuff... } // good if (collection.length) { // ...stuff... }</code></pre> <p>了解更多信息在 <a href="/misc/goto?guid=4959645689511754568">Truth Equality and JavaScript</a> by Angus Croll.</p> <h2>块</h2> <p>使用大括号包裹所有的多行代码块。</p> <pre> <code class="language-javascript">// bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function() { return false; } // good function() { return false; }</code></pre> <p>如果通过 <code>if</code> 和 <code>else</code> 使用多行代码块，把 <code>else</code> 放在 <code>if</code> 代码块关闭括号的同一行。</p> <pre> <code class="language-javascript">// bad if (test) { thing1(); thing2(); } else { thing3(); } // good if (test) { thing1(); thing2(); } else { thing3(); } </code></pre> <h2>注释</h2> <p>使用 <code>/** ... */</code> 作为多行注释。包含描述、指定所有参数和返回值的类型和值。</p> <pre> <code class="language-javascript">// 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; }</code></pre> <p>使用 <code>//</code> 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。</p> <pre> <code class="language-javascript">// 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; }</code></pre> <p>给注释增加 <code>FIXME</code> 或 <code>TODO</code> 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式。这将有别于常见的注释，因为它们是可操作的。使用 <code>FIXME -- need to figure this out</code> 或者 <code>TODO -- need to implement</code>。</p> <p>使用 <code>// FIXME:</code> 标注问题。</p> <pre> <code class="language-javascript">function Calculator() { // FIXME: shouldn't use a global here total = 0; return this; }</code></pre> <p>使用 <code>// TODO:</code> 标注问题的解决方式。</p> <pre> <code class="language-javascript">function Calculator() { // TODO: total should be configurable by an options param this.total = 0; return this; }</code></pre> <h2>空白</h2> <p>使用 2 个空格作为缩进。</p> <pre> <code class="language-javascript">// bad function() { ∙∙∙∙var name; } // bad function() { ∙var name; } // good function() { ∙∙var name; }</code></pre> <p>在大括号前放一个空格。</p> <pre> <code class="language-javascript">// 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' });</code></pre> <p>在控制语句（<code>if</code>、<code>while</code> 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。</p> <pre> <code class="language-javascript">// bad if(isJedi) { fight (); } // good if (isJedi) { fight(); } // bad function fight () { console.log ('Swooosh!'); } // good function fight() { console.log('Swooosh!'); }</code></pre> <p>使用空格把运算符隔开。</p> <pre> <code class="language-javascript">// bad var x=y+5; // good var x = y + 5;</code></pre> <p>在文件末尾插入一个空行。</p> <pre> <code class="language-javascript">// bad (function(global) { // ...stuff... })(this);</code></pre> <pre> <code class="language-javascript">// bad (function(global) { // ...stuff... })(this);↵ ↵</code></pre> <pre> <code class="language-javascript">// good (function(global) { // ...stuff... })(this);↵</code></pre> <p>在使用长方法链时进行缩进。使用前面的点 <code>.</code> 强调这是方法调用而不是新语句。</p> <pre> <code class="language-javascript">// 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').classed('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);</code></pre> <p>在块末和新语句前插入空行。</p> <pre> <code class="language-javascript">// 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;</code></pre> <h2>逗号</h2> <p>行首逗号: <strong>不需要</strong>。</p> <pre> <code class="language-javascript">// 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' };</code></pre> <p>额外的行末逗号：<strong>不需要</strong>。这样做会在 IE6/7 和 IE9 怪异模式下引起问题。同样，多余的逗号在某些 ES3 的实现里会增加数组的长度。在 ES5 中已经澄清了 (<a href="/misc/goto?guid=4959645689631666194">source</a>)：</p> <blockquote> <p>Edition 5 clarifies the fact that a trailing comma at the end of an ArrayInitialiser does not add to the length of the array. This is not a semantic change from Edition 3 but some implementations may have previously misinterpreted this.</p> </blockquote> <pre> <code class="language-javascript"> // bad var hero = { firstName: 'Kevin', lastName: 'Flynn', }; var heroes = [ 'Batman', 'Superman', ]; // good var hero = { firstName: 'Kevin', lastName: 'Flynn' }; var heroes = [ 'Batman', 'Superman' ];</code></pre> <h2>分号</h2> <p><strong>使用分号。</strong></p> <pre> <code class="language-javascript">// bad (function() { var name = 'Skywalker' return name })() // good (function() { var name = 'Skywalker'; return name; })(); // good (防止函数在两个 IIFE 合并时被当成一个参数 ;(function() { var name = 'Skywalker'; return name; })();</code></pre> <p><a href="/misc/goto?guid=4959670116454043979">了解更多</a>.</p> <h2>类型转换</h2> <p>在语句开始时执行类型转换。</p> <p>字符串：</p> <pre> <code class="language-javascript">// => 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';</code></pre> <p>使用 <code>parseInt</code> 转换数字时总是带上类型转换的基数。</p> <pre> <code class="language-javascript">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);</code></pre> <p>如果因为某些原因 <code>parseInt</code> 成为你所做的事的瓶颈而需要使用位操作解决<a href="/misc/goto?guid=4959645689728396331">性能问题</a>时，留个注释说清楚原因和你的目的。</p> <pre> <code class="language-javascript">// 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;</code></pre> <blockquote> <p><strong>注：</strong> 小心使用位操作运算符。数字会被当成 <a href="/misc/goto?guid=4959645689822196207">64 位值</a>，但是位操作运算符总是返回 32 位的整数（<a href="/misc/goto?guid=4959645689910417520">source</a>）。位操作处理大于 32 位的整数值时还会导致意料之外的行为。<a href="/misc/goto?guid=4959645689985214752">讨论</a>。最大的 32 位整数是 2,147,483,647：</p> </blockquote> <pre> <code class="language-javascript">2147483647 >> 0 //=> 2147483647 2147483648 >> 0 //=> -2147483648 2147483649 >> 0 //=> -2147483647</code></pre> <p>布尔:</p> <pre> <code class="language-javascript">var age = 0; // bad var hasAge = new Boolean(age); // good var hasAge = Boolean(age); // good var hasAge = !!age;</code></pre> <h2>命名规则</h2> <p>避免单字母命名。命名应具备描述性。</p> <pre> <code class="language-javascript">// bad function q() { // ...stuff... } // good function query() { // ..stuff.. }</code></pre> <p>使用驼峰式命名对象、函数和实例。</p> <pre> <code class="language-javascript">// bad var OBJEcttsssss = {}; var this_is_my_object = {}; var o = {}; function c() {} // good var thisIsMyObject = {}; function thisIsMyFunction() {}</code></pre> <p>使用帕斯卡式命名构造函数或类。</p> <pre> <code class="language-javascript">// 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' });</code></pre> <p>使用下划线 <code>_</code> 开头命名私有属性。</p> <pre> <code class="language-javascript">// bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; // good this._firstName = 'Panda';</code></pre> <p>使用 <code>_this</code> 保存 <code>this</code> 的引用。</p> <pre> <code class="language-javascript">// 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); }; }</code></pre> <p>给函数命名。这在做堆栈轨迹时很有帮助。</p> <pre> <code class="language-javascript">// bad var log = function(msg) { console.log(msg); }; // good var log = function log(msg) { console.log(msg); };</code></pre> <p><strong>注：</strong> IE8 及以下版本对命名函数表达式的处理有些怪异。了解更多信息到 <a href="/misc/goto?guid=4958833746252848138">http://kangax.github.io/nfe/</a>。</p> <p>如果你的文件导出一个类，你的文件名应该与类名完全相同。</p> <pre> <code class="language-javascript">// 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');</code></pre> <h2>存取器</h2> <p>属性的存取函数不是必须的。</p> <p>如果你需要存取函数时使用 <code>getVal()</code> 和 <code>setVal('hello')</code>。</p> <pre> <code class="language-javascript">// bad dragon.age(); // good dragon.getAge(); // bad dragon.age(25); // good dragon.setAge(25);</code></pre> <p>如果属性是布尔值，使用 <code>isVal()</code> 或 <code>hasVal()</code>。</p> <pre> <code class="language-javascript">// bad if (!dragon.age()) { return false; } // good if (!dragon.hasAge()) { return false; }</code></pre> <p>创建 get() 和 set() 函数是可以的，但要保持一致。</p> <pre> <code class="language-javascript">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]; };</code></pre> <h2>构造函数</h2> <p>给对象原型分配方法，而不是使用一个新对象覆盖原型。覆盖原型将导致继承出现问题：重设原型将覆盖原有原型！</p> <pre> <code class="language-javascript">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'); };</code></pre> <p>方法可以返回 <code>this</code> 来实现方法链式使用。</p> <pre> <code class="language-javascript">// 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);</code></pre> <p>写一个自定义的 <code>toString()</code> 方法是可以的，但是确保它可以正常工作且不会产生副作用。</p> <pre> <code class="language-javascript">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(); };</code></pre> <h2>事件</h2> <p>当给事件附加数据时（无论是 DOM 事件还是私有事件），传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器。例如，不好的写法：</p> <pre> <code class="language-javascript">// bad $(this).trigger('listingUpdated', listing.id); ... $(this).on('listingUpdated', function(e, listingId) { // do something with listingId });</code></pre> <p>更好的写法：</p> <pre> <code class="language-javascript">// good $(this).trigger('listingUpdated', { listingId : listing.id }); ... $(this).on('listingUpdated', function(e, data) { // do something with data.listingId });</code></pre> <h2>模块</h2> <p>模块应该以 <code>!</code> 开始。这样确保了当一个不好的模块忘记包含最后的分号时，在合并代码到生产环境后不会产生错误。<a href="/misc/goto?guid=4959670116680366168">详细说明</a></p> <p>文件应该以驼峰式命名，并放在同名的文件夹里，且与导出的名字一致。</p> <p>增加一个名为 <code>noConflict()</code> 的方法来设置导出的模块为前一个版本并返回它。</p> <p>永远在模块顶部声明 <code>'use strict';</code>。</p> <pre> <code class="language-javascript">// 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);</code></pre> <h2>jQuery</h2> <p>使用 <code>$</code> 作为存储 jQuery 对象的变量名前缀。</p> <pre> <code class="language-javascript">// bad var sidebar = $('.sidebar'); // good var $sidebar = $('.sidebar');</code></pre> <p>缓存 jQuery 查询。</p> <pre> <code class="language-javascript">// 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' }); }</code></pre> <p>对 DOM 查询使用层叠 <code>$('.sidebar ul')</code> 或 父元素 > 子元素 <code>$('.sidebar > ul')</code>。 <a href="/misc/goto?guid=4959670116764411379">jsPerf</a></p> <p>对有作用域的 jQuery 对象查询使用 <code>find</code>。</p> <pre> <code class="language-javascript">// bad $('ul', '.sidebar').hide(); // bad $('.sidebar').find('ul').hide(); // good $('.sidebar ul').hide(); // good $('.sidebar > ul').hide(); // good $sidebar.find('ul').hide();</code></pre> <h2>ECMAScript 5 兼容性</h2> <p>参考 <a href="/misc/goto?guid=4959670116842294972">Kangax</a> 的 ES5 <a href="/misc/goto?guid=4958336441557726449">兼容表</a>.</p> <h2>测试</h2> <p><strong>Yup.</strong></p> <pre> <code class="language-javascript">function() { return true; }</code></pre> <p>来自：https://github.com/sivan/javascript-style-guide/blob/master/es5/README.md</p>