[JavaScript] 规范-葵花宝典

转载自:http://blog.csdn.net/chinahuyong/article/details/45021441


目录(?)[+]

【译】JavaScript规范

译自:https://github.com/airbnb/javascript

类型

  • 原始值: 相当于传值

[javascript]  view plain copy
  1. string  
  2. number  
  3. boolean  
  4. null  
  5. undefined  
  6. var foo = 1,  
  7.     bar = foo;  
  8.   
  9. bar = 9;  
  10.   
  11. console.log(foo, bar); // => 1, 9  

复杂类型: 相当于传引用

  • [javascript]  view plain copy
    1. object  
    2. array  
    3. function  
    4. var foo = [1, 2],  
    5.     bar = foo;  
    6.   
    7. bar[0] = 9;  
    8.   
    9. console.log(foo[0], bar[0]); // => 9, 9  

对象

  • 使用字面值创建对象

    [javascript]  view plain copy
    1. // bad  
    2. var item = new Object();  
    3.   
    4. // good  
    5. var item = {};  
  • 不要使用保留字 reserved words 作为键

    [javascript]  view plain copy
    1. // bad  
    2. var superman = {  
    3.   class'superhero',  
    4.   default: { clark: 'kent' },  
    5.   privatetrue  
    6. };  
    7.   
    8. // good  
    9. var superman = {  
    10.   klass: 'superhero',  
    11.   defaults: { clark: 'kent' },  
    12.   hidden: true  
    13. };  

数组

  • 使用字面值创建数组

    [javascript]  view plain copy
    1. // bad  
    2. var items = new Array();  
    3.   
    4. // good  
    5. var items = [];  
  • 如果你不知道数组的长度,使用push

    [javascript]  view plain copy
    1. var someStack = [];  
    2.   
    3.   
    4. // bad  
    5. someStack[someStack.length] = 'abracadabra';  
    6.   
    7. // good  
    8. someStack.push('abracadabra');  
  • 当你需要拷贝数组时使用slice. jsPerf

    [javascript]  view plain copy
    1. var len = items.length,  
    2.     itemsCopy = [],  
    3.     i;  
    4.   
    5. // bad  
    6. for (i = 0; i < len; i++) {  
    7.   itemsCopy[i] = items[i];  
    8. }  
    9.   
    10. // good  
    11. itemsCopy = items.slice();  
  • 使用slice将类数组的对象转成数组.

    [javascript]  view plain copy
    1. function trigger() {  
    2.   var args = Array.prototype.slice.call(arguments);  
    3.   ...  
    4. }  

字符串

  • 对字符串使用单引号 ''

    [javascript]  view plain copy
    1. // bad  
    2. var name = "Bob Parr";  
    3.   
    4. // good  
    5. var name = 'Bob Parr';  
    6.   
    7. // bad  
    8. var fullName = "Bob " + this.lastName;  
    9.   
    10. // good  
    11. var fullName = 'Bob ' + this.lastName;  
  • 超过80个字符的字符串应该使用字符串连接换行

  • 注: 如果过度使用,长字符串连接可能会对性能有影响. jsPerf & Discussion

    [javascript]  view plain copy
    1. // bad  
    2. 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.';  
    3.   
    4. // bad  
    5. var errorMessage = 'This is a super long error that \  
    6. was thrown because of Batman. \  
    7. When you stop to think about \  
    8. how Batman had anything to do \  
    9. with this, you would get nowhere \  
    10. fast.';  
    11.   
    12.   
    13. // good  
    14. var errorMessage = 'This is a super long error that ' +  
    15.   'was thrown because of Batman.' +  
    16.   'When you stop to think about ' +  
    17.   'how Batman had anything to do ' +  
    18.   'with this, you would get nowhere ' +  
    19.   'fast.';  
  • 编程时使用join而不是字符串连接来构建字符串,特别是IE: jsPerf.

    [javascript]  view plain copy
    1. var items,  
    2.     messages,  
    3.     length, i;  
    4.   
    5. messages = [{  
    6.     state: 'success',  
    7.     message: 'This one worked.'  
    8. },{  
    9.     state: 'success',  
    10.     message: 'This one worked as well.'  
    11. },{  
    12.     state: 'error',  
    13.     message: 'This one did not work.'  
    14. }];  
    15.   
    16. length = messages.length;  
    17.   
    18. // bad  
    19. function inbox(messages) {  
    20.   items = '<ul>';  
    21.   
    22.   for (i = 0; i < length; i++) {  
    23.     items += '<li>' + messages[i].message + '</li>';  
    24.   }  
    25.   
    26.   return items + '</ul>';  
    27. }  
    28.   
    29. // good  
    30. function inbox(messages) {  
    31.   items = [];  
    32.   
    33.   for (i = 0; i < length; i++) {  
    34.     items[i] = messages[i].message;  
    35.   }  
    36.   
    37.   return '<ul><li>' + items.join('</li><li>') + '</li></ul>';  
    38. }  

<函数

  • 函数表达式:

    [javascript]  view plain copy
    1. // 匿名函数表达式  
    2. var anonymous = function() {  
    3.   return true;  
    4. };  
    5.   
    6. // 有名函数表达式  
    7. var named = function named() {  
    8.   return true;  
    9. };  
    10.   
    11. // 立即调用函数表达式  
    12. (function() {  
    13.   console.log('Welcome to the Internet. Please follow me.');  
    14. })();  
  • 绝对不要在一个非函数块里声明一个函数,把那个函数赋给一个变量。浏览器允许你这么做,但是它们解析不同。

  • 注: ECMA-262定义把定义为一组语句,函数声明不是一个语句。阅读ECMA-262对这个问题的说明.

    [javascript]  view plain copy
    1. // bad  
    2. if (currentUser) {  
    3.   function test() {  
    4.     console.log('Nope.');  
    5.   }  
    6. }  
    7.   
    8. // good  
    9. if (currentUser) {  
    10.   var test = function test() {  
    11.     console.log('Yup.');  
    12.   };  
    13. }  
  • 绝对不要把参数命名为 arguments, 这将会逾越函数作用域内传过来的 arguments 对象.

    [javascript]  view plain copy
    1. // bad  
    2. function nope(name, options, arguments) {  
    3.   // ...stuff...  
    4. }  
    5.   
    6. // good  
    7. function yup(name, options, args) {  
    8.   // ...stuff...  
    9. }  

属性

  • 当使用变量访问属性时使用中括号.

    [javascript]  view plain copy
    1. var luke = {  
    2.   jedi: true,  
    3.   age: 28  
    4. };  
    5.   
    6. function getProp(prop) {  
    7.   return luke[prop];  
    8. }  
    9.   
    10. var isJedi = getProp('jedi');  

变量

  • 总是使用 var 来声明变量,如果不这么做将导致产生全局变量,我们要避免污染全局命名空间。

    [javascript]  view plain copy
    1. // bad  
    2. superPower = new SuperPower();  
    3.   
    4. // good  
    5. var superPower = new SuperPower();  
  • 使用一个 var 以及新行声明多个变量,缩进4个空格。

    [javascript]  view plain copy
    1. // bad  
    2. var items = getItems();  
    3. var goSportsTeam = true;  
    4. var dragonball = 'z';  
    5.   
    6. // good  
    7. var items = getItems(),  
    8.     goSportsTeam = true,  
    9.     dragonball = 'z';  
  • 最后再声明未赋值的变量,当你想引用之前已赋值变量的时候很有用。

    [javascript]  view plain copy
    1. // bad  
    2. var i, len, dragonball,  
    3.     items = getItems(),  
    4.     goSportsTeam = true;  
    5.   
    6. // bad  
    7. var i, items = getItems(),  
    8.     dragonball,  
    9.     goSportsTeam = true,  
    10.     len;  
    11.   
    12. // good  
    13. var items = getItems(),  
    14.     goSportsTeam = true,  
    15.     dragonball,  
    16.     length,  
    17.     i;  
  • 在作用域顶部声明变量,避免变量声明和赋值引起的相关问题。

    [javascript]  view plain copy
    1. // bad  
    2. function() {  
    3.   test();  
    4.   console.log('doing stuff..');  
    5.   
    6.   //..other stuff..  
    7.   
    8.   var name = getName();  
    9.   
    10.   if (name === 'test') {  
    11.     return false;  
    12.   }  
    13.   
    14.   return name;  
    15. }  
    16.   
    17. // good  
    18. function() {  
    19.   var name = getName();  
    20.   
    21.   test();  
    22.   console.log('doing stuff..');  
    23.   
    24.   //..other stuff..  
    25.   
    26.   if (name === 'test') {  
    27.     return false;  
    28.   }  
    29.   
    30.   return name;  
    31. }  
    32.   
    33. // bad  
    34. function() {  
    35.   var name = getName();  
    36.   
    37.   if (!arguments.length) {  
    38.     return false;  
    39.   }  
    40.   
    41.   return true;  
    42. }  
    43.   
    44. // good  
    45. function() {  
    46.   if (!arguments.length) {  
    47.     return false;  
    48.   }  
    49.   
    50.   var name = getName();  
    51.   
    52.   return true;  
    53. }  

条件表达式和等号

  • 适当使用 === 和 !== 以及 == 和 !=.
  • 条件表达式的强制类型转换遵循以下规则:

    • 对象 被计算为 true
    • Undefined 被计算为 false
    • Null 被计算为 false
    • 布尔值 被计算为 布尔的值
    • 数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true
    • 字符串 如果是空字符串 '' 则被计算为 false, 否则为 true
    [javascript]  view plain copy
    1. if ([0]) {  
    2.   // true  
    3.   // An array is an object, objects evaluate to true  
    4. }  
  • 使用快捷方式.

    [javascript]  view plain copy
    1. // bad  
    2. if (name !== '') {  
    3.   // ...stuff...  
    4. }  
    5.   
    6. // good  
    7. if (name) {  
    8.   // ...stuff...  
    9. }  
    10.   
    11. // bad  
    12. if (collection.length > 0) {  
    13.   // ...stuff...  
    14. }  
    15.   
    16. // good  
    17. if (collection.length) {  
    18.   // ...stuff...  
    19. }  
  • 阅读 Truth Equality and JavaScript 了解更多

  • 给所有多行的块使用大括号

    [javascript]  view plain copy
    1. // bad  
    2. if (test)  
    3.   return false;  
    4.   
    5. // good  
    6. if (test) return false;  
    7.   
    8. // good  
    9. if (test) {  
    10.   return false;  
    11. }  
    12.   
    13. // bad  
    14. function() { return false; }  
    15.   
    16. // good  
    17. function() {  
    18.   return false;  
    19. }  

注释

  • 使用 /** ... */ 进行多行注释,包括描述,指定类型以及参数值和返回值

    [javascript]  view plain copy
    1. // bad  
    2. // make() returns a new element  
    3. // based on the passed in tag name  
    4. //  
    5. // @param <String> tag  
    6. // @return <Element> element  
    7. function make(tag) {  
    8.   
    9.   // ...stuff...  
    10.   
    11.   return element;  
    12. }  
    13.   
    14. // good  
    15. /** 
    16.  * make() returns a new element 
    17.  * based on the passed in tag name 
    18.  * 
    19.  * @param <String> tag 
    20.  * @return <Element> element 
    21.  */  
    22. function make(tag) {  
    23.   
    24.   // ...stuff...  
    25.   
    26.   return element;  
    27. }  
  • 使用 // 进行单行注释,在评论对象的上面进行单行注释,注释前放一个空行.

    [javascript]  view plain copy
    1. // bad  
    2. var active = true;  // is current tab  
    3.   
    4. // good  
    5. // is current tab  
    6. var active = true;  
    7.   
    8. // bad  
    9. function getType() {  
    10.   console.log('fetching type...');  
    11.   // set the default type to 'no type'  
    12.   var type = this._type || 'no type';  
    13.   
    14.   return type;  
    15. }  
    16.   
    17. // good  
    18. function getType() {  
    19.   console.log('fetching type...');  
    20.   
    21.   // set the default type to 'no type'  
    22.   var type = this._type || 'no type';  
    23.   
    24.   return type;  
    25. }  
  • 如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上 FIXME 或 TODO 帮助其他人迅速理解

    [javascript]  view plain copy
    1. function Calculator() {  
    2.   
    3.   // FIXME: shouldn't use a global here  
    4.   total = 0;  
    5.   
    6.   return this;  
    7. }  
    8. function Calculator() {  
    9.   
    10.   // TODO: total should be configurable by an options param  
    11.   this.total = 0;  
    12.   
    13.   return this;  
    14. }  

空白

  • 将tab设为4个空格

    [javascript]  view plain copy
    1. // bad  
    2. function() {  
    3. ∙∙var name;  
    4. }  
    5.   
    6. // bad  
    7. function() {  
    8. var name;  
    9. }  
    10.   
    11. // good  
    12. function() {  
    13. ∙∙∙∙var name;  
    14. }  
  • 大括号前放一个空格

    [javascript]  view plain copy
    1. // bad  
    2. function test(){  
    3.   console.log('test');  
    4. }  
    5.   
    6. // good  
    7. function test() {  
    8.   console.log('test');  
    9. }  
    10.   
    11. // bad  
    12. dog.set('attr',{  
    13.   age: '1 year',  
    14.   breed: 'Bernese Mountain Dog'  
    15. });  
    16.   
    17. // good  
    18. dog.set('attr', {  
    19.   age: '1 year',  
    20.   breed: 'Bernese Mountain Dog'  
    21. });  
  • 在做长方法链时使用缩进.

    [javascript]  view plain copy
    1. // bad  
    2. $('#items').find('.selected').highlight().end().find('.open').updateCount();  
    3.   
    4. // good  
    5. $('#items')  
    6.   .find('.selected')  
    7.     .highlight()  
    8.     .end()  
    9.   .find('.open')  
    10.     .updateCount();  
    11.   
    12. // bad  
    13. var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led'true)  
    14.     .attr('width',  (radius + margin) * 2).append('svg:g')  
    15.     .attr('transform''translate(' + (radius + margin) + ',' + (radius + margin) + ')')  
    16.     .call(tron.led);  
    17.   
    18. // good  
    19. var leds = stage.selectAll('.led')  
    20.     .data(data)  
    21.   .enter().append('svg:svg')  
    22.     .class('led'true)  
    23.     .attr('width',  (radius + margin) * 2)  
    24.   .append('svg:g')  
    25.     .attr('transform''translate(' + (radius + margin) + ',' + (radius + margin) + ')')  
    26.     .call(tron.led);  

逗号

  • 不要将逗号放前面

    [javascript]  view plain copy
    1. // bad  
    2. var once  
    3.   , upon  
    4.   , aTime;  
    5.   
    6. // good  
    7. var once,  
    8.     upon,  
    9.     aTime;  
    10.   
    11. // bad  
    12. var hero = {  
    13.     firstName: 'Bob'  
    14.   , lastName: 'Parr'  
    15.   , heroName: 'Mr. Incredible'  
    16.   , superPower: 'strength'  
    17. };  
    18.   
    19. // good  
    20. var hero = {  
    21.   firstName: 'Bob',  
    22.   lastName: 'Parr',  
    23.   heroName: 'Mr. Incredible',  
    24.   superPower: 'strength'  
    25. };  
  • 不要加多余的逗号,这可能会在IE下引起错误,同时如果多一个逗号某些ES3的实现会计算多数组的长度。

    [javascript]  view plain copy
    1. // bad  
    2. var hero = {  
    3.   firstName: 'Kevin',  
    4.   lastName: 'Flynn',  
    5. };  
    6.   
    7. var heroes = [  
    8.   'Batman',  
    9.   'Superman',  
    10. ];  
    11.   
    12. // good  
    13. var hero = {  
    14.   firstName: 'Kevin',  
    15.   lastName: 'Flynn'  
    16. };  
    17.   
    18. var heroes = [  
    19.   'Batman',  
    20.   'Superman'  
    21. ];  

分号

  • 语句结束一定要加分号

    [javascript]  view plain copy
    1. // bad  
    2. (function() {  
    3.   var name = 'Skywalker'  
    4.   return name  
    5. })()  
    6.   
    7. // good  
    8. (function() {  
    9.   var name = 'Skywalker';  
    10.   return name;  
    11. })();  
    12.   
    13. // good  
    14. ;(function() {  
    15.   var name = 'Skywalker';  
    16.   return name;  
    17. })();  

类型转换

  • 在语句的开始执行类型转换.
  • 字符串:

    [javascript]  view plain copy
    1. //  => this.reviewScore = 9;  
    2.   
    3. // bad  
    4. var totalScore = this.reviewScore + '';  
    5.   
    6. // good  
    7. var totalScore = '' + this.reviewScore;  
    8.   
    9. // bad  
    10. var totalScore = '' + this.reviewScore + ' total score';  
    11.   
    12. // good  
    13. var totalScore = this.reviewScore + ' total score';  
  • 对数字使用 parseInt 并且总是带上类型转换的基数.

    [javascript]  view plain copy
    1. var inputValue = '4';  
    2.   
    3. // bad  
    4. var val = new Number(inputValue);  
    5.   
    6. // bad  
    7. var val = +inputValue;  
    8.   
    9. // bad  
    10. var val = inputValue >> 0;  
    11.   
    12. // bad  
    13. var val = parseInt(inputValue);  
    14.   
    15. // good  
    16. var val = Number(inputValue);  
    17.   
    18. // good  
    19. var val = parseInt(inputValue, 10);  
    20.   
    21. // good  
    22. /** 
    23.  * parseInt was the reason my code was slow. 
    24.  * Bitshifting the String to coerce it to a 
    25.  * Number made it a lot faster. 
    26.  */  
    27. var val = inputValue >> 0;  
  • 布尔值:

    [javascript]  view plain copy
    1. var age = 0;  
    2.   
    3. // bad  
    4. var hasAge = new Boolean(age);  
    5.   
    6. // good  
    7. var hasAge = Boolean(age);  
    8.   
    9. // good  
    10. var hasAge = !!age;  

命名约定

  • 避免单个字符名,让你的变量名有描述意义。

    [javascript]  view plain copy
    1. // bad  
    2. function q() {  
    3.   // ...stuff...  
    4. }  
    5.   
    6. // good  
    7. function query() {  
    8.   // ..stuff..  
    9. }  
  • 当命名对象、函数和实例时使用驼峰命名规则

    [javascript]  view plain copy
    1. // bad  
    2. var OBJEcttsssss = {};  
    3. var this_is_my_object = {};  
    4. var this-is-my-object = {};  
    5. function c() {};  
    6. var u = new user({  
    7.   name: 'Bob Parr'  
    8. });  
    9.   
    10. // good  
    11. var thisIsMyObject = {};  
    12. function thisIsMyFunction() {};  
    13. var user = new User({  
    14.   name: 'Bob Parr'  
    15. });  
  • 当命名构造函数或类时使用驼峰式大写

    [javascript]  view plain copy
    1. // bad  
    2. function user(options) {  
    3.   this.name = options.name;  
    4. }  
    5.   
    6. var bad = new user({  
    7.   name: 'nope'  
    8. });  
    9.   
    10. // good  
    11. function User(options) {  
    12.   this.name = options.name;  
    13. }  
    14.   
    15. var good = new User({  
    16.   name: 'yup'  
    17. });  
  • 命名私有属性时前面加个下划线 _

    [javascript]  view plain copy
    1. // bad  
    2. this.__firstName__ = 'Panda';  
    3. this.firstName_ = 'Panda';  
    4.   
    5. // good  
    6. this._firstName = 'Panda';  
  • 当保存对 this 的引用时使用 _this.

    [javascript]  view plain copy
    1. // bad  
    2. function() {  
    3.   var self = this;  
    4.   return function() {  
    5.     console.log(self);  
    6.   };  
    7. }  
    8.   
    9. // bad  
    10. function() {  
    11.   var that = this;  
    12.   return function() {  
    13.     console.log(that);  
    14.   };  
    15. }  
    16.   
    17. // good  
    18. function() {  
    19.   var _this = this;  
    20.   return function() {  
    21.     console.log(_this);  
    22.   };  
    23. }  

存取器

  • 属性的存取器函数不是必需的
  • 如果你确实有存取器函数的话使用getVal() 和 setVal('hello')

    [javascript]  view plain copy
    1. // bad  
    2. dragon.age();  
    3.   
    4. // good  
    5. dragon.getAge();  
    6.   
    7. // bad  
    8. dragon.age(25);  
    9.   
    10. // good  
    11. dragon.setAge(25);  
  • 如果属性是布尔值,使用isVal() 或 hasVal()

    [javascript]  view plain copy
    1. // bad  
    2. if (!dragon.age()) {  
    3.   return false;  
    4. }  
    5.   
    6. // good  
    7. if (!dragon.hasAge()) {  
    8.   return false;  
    9. }  
  • 可以创建get()和set()函数,但是要保持一致

    [javascript]  view plain copy
    1. function Jedi(options) {  
    2.   options || (options = {});  
    3.   var lightsaber = options.lightsaber || 'blue';  
    4.   this.set('lightsaber', lightsaber);  
    5. }  
    6.   
    7. Jedi.prototype.set = function(key, val) {  
    8.   this[key] = val;  
    9. };  
    10.   
    11. Jedi.prototype.get = function(key) {  
    12.   return this[key];  
    13. };  

构造器

  • 给对象原型分配方法,而不是用一个新的对象覆盖原型,覆盖原型会使继承出现问题。

    [javascript]  view plain copy
    1. function Jedi() {  
    2.   console.log('new jedi');  
    3. }  
    4.   
    5. // bad  
    6. Jedi.prototype = {  
    7.   fight: function fight() {  
    8.     console.log('fighting');  
    9.   },  
    10.   
    11.   block: function block() {  
    12.     console.log('blocking');  
    13.   }  
    14. };  
    15.   
    16. // good  
    17. Jedi.prototype.fight = function fight() {  
    18.   console.log('fighting');  
    19. };  
    20.   
    21. Jedi.prototype.block = function block() {  
    22.   console.log('blocking');  
    23. };  
  • 方法可以返回 this 帮助方法可链。

    [javascript]  view plain copy
    1. // bad  
    2. Jedi.prototype.jump = function() {  
    3.   this.jumping = true;  
    4.   return true;  
    5. };  
    6.   
    7. Jedi.prototype.setHeight = function(height) {  
    8.   this.height = height;  
    9. };  
    10.   
    11. var luke = new Jedi();  
    12. luke.jump(); // => true  
    13. luke.setHeight(20) // => undefined  
    14.   
    15. // good  
    16. Jedi.prototype.jump = function() {  
    17.   this.jumping = true;  
    18.   return this;  
    19. };  
    20.   
    21. Jedi.prototype.setHeight = function(height) {  
    22.   this.height = height;  
    23.   return this;  
    24. };  
    25.   
    26. var luke = new Jedi();  
    27.   
    28. luke.jump()  
    29.   .setHeight(20);  
  • 可以写一个自定义的toString()方法,但是确保它工作正常并且不会有副作用。

    [javascript]  view plain copy
    1. function Jedi(options) {  
    2.   options || (options = {});  
    3.   this.name = options.name || 'no name';  
    4. }  
    5.   
    6. Jedi.prototype.getName = function getName() {  
    7.   return this.name;  
    8. };  
    9.   
    10. Jedi.prototype.toString = function toString() {  
    11.   return 'Jedi - ' + this.getName();  
    12. };  

事件

  • 当给事件附加数据时,传入一个哈希而不是原始值,这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器

    [javascript]  view plain copy
    1. // bad  
    2. $(this).trigger('listingUpdated', listing.id);  
    3.   
    4. ...  
    5.   
    6. $(this).on('listingUpdated'function(e, listingId) {  
    7.   // do something with listingId  
    8. });  

    更好:

    [javascript]  view plain copy
    1. // good  
    2. $(this).trigger('listingUpdated', { listingId : listing.id });  
    3.   
    4. ...  
    5.   
    6. $(this).on('listingUpdated'function(e, data) {  
    7.   // do something with data.listingId  
    8. });  

模块

  • 模块应该以 ! 开始,这保证了如果一个有问题的模块忘记包含最后的分号在合并后不会出现错误
  • 这个文件应该以驼峰命名,并在同名文件夹下,同时导出的时候名字一致
  • 加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它
  • 总是在模块顶部声明 'use strict';

    [javascript]  view plain copy
    1. // fancyInput/fancyInput.js  
    2.   
    3. !function(global) {  
    4.   'use strict';  
    5.   
    6.   var previousFancyInput = global.FancyInput;  
    7.   
    8.   function FancyInput(options) {  
    9.     this.options = options || {};  
    10.   }  
    11.   
    12.   FancyInput.noConflict = function noConflict() {  
    13.     global.FancyInput = previousFancyInput;  
    14.     return FancyInput;  
    15.   };  
    16.   
    17.   global.FancyInput = FancyInput;  
    18. }(this);  

jQuery

  • 缓存jQuery查询

    [javascript]  view plain copy
    1. // bad  
    2. function setSidebar() {  
    3.   $('.sidebar').hide();  
    4.   
    5.   // ...stuff...  
    6.   
    7.   $('.sidebar').css({  
    8.     'background-color''pink'  
    9.   });  
    10. }  
    11.   
    12. // good  
    13. function setSidebar() {  
    14.   var $sidebar = $('.sidebar');  
    15.   $sidebar.hide();  
    16.   
    17.   // ...stuff...  
    18.   
    19.   $sidebar.css({  
    20.     'background-color''pink'  
    21.   });  
    22. }  
  • 对DOM查询使用级联的 $('.sidebar ul') 或 $('.sidebar ul')jsPerf

  • 对有作用域的jQuery对象查询使用 find

    [javascript]  view plain copy
    1. // bad  
    2. $('.sidebar''ul').hide();  
    3.   
    4. // bad  
    5. $('.sidebar').find('ul').hide();  
    6.   
    7. // good  
    8. $('.sidebar ul').hide();  
    9.   
    10. // good  
    11. $('.sidebar > ul').hide();  
    12.   
    13. // good (slower)  
    14. $sidebar.find('ul');  
    15.   
    16. // good (faster)  
    17. $($sidebar[0]).find('ul');  

ECMAScript 5兼容性

性能

资源

Read This

其它规范

其它风格

阅读更多

书籍

相关文章
相关标签/搜索