不遗余力接收ES5格局

JavaScript规范

目录

  1. 类型
  2. 对象
  3. 数组
  4. 字符串
  5. 函数
  6. 属性
  7. 变量
  8. 规范化表明式和等号
  9. 注释
  10. 空白
  11. 逗号
  12. 分号
  13. 类型调换
  14. 命名约定
  15. 存取器
  16. 构造器
  17. 事件
  18. 模块
  19. jQuery
  20. ES5 兼容性
  21. HTML、CSS、JavaScript分离
  22. 使用jsHint
  23. 前面一个工具

类型

  • 原始值:
    也正是传值(JavaScript对象都提供了字面量卡塔尔,使用字面量创设对象。

    • string
    • number
    • boolean
    • null
    • undefined

var foo = 1,
    bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

复杂类型: 相当于传援用

  • object
  • array
  • function

var foo = [1, 2],
    bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

对象

  • 动用字面值成立对象

    // bad
    var item = new Object();
    
    // good
    var item = {};
    
  • 实际不是选用保留字 reserved
    words 作为键

    // bad
    var superman = {
      class: 'superhero',
      default: { clark: 'kent' },
      private: true
    };
    
    // good
    var superman = {
      klass: 'superhero',
      defaults: { clark: 'kent' },
      hidden: true
    };
    

数组

  • 运用字面值成立数组

    // 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,
        itemsCopy = [],
        i;
    
    // bad
    for (i = 0; i < len; i++) {
      itemsCopy[i] = items[i];
    }
    
    // good
    itemsCopy = items.slice();
    
  • 应用slice将类数组的对象转成数组.

    function trigger() {
      var args = [].slice.apply(arguments);
      ...
    }
    

字符串

  • 对字符串使用单引号 ''(因为大概时候我们的字符串。极其html会产出")

    // bad
    var name = "Bob Parr";
    
    // good
    var name = 'Bob Parr';
    
    // bad
    var fullName = "Bob " + this.lastName;
    
    // good
    var fullName = 'Bob ' + this.lastName;
    
  • 超出80(也许有明确140的,项目具体可制定卡塔尔(قطر‎个字符的字符串应该利用字符串连接换行

  • 注:
    假诺过度使用,长字符串连接大概会对质量有影响. 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.';
    
  • 编制程序时使用join并不是字符串连接来营造字符串,非常是IE: jsPerf.

    var items,
        messages,
        length, 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++) {
        items[i] = messages[i].message;
      }
    
      return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
    }
    

函数

  • 函数表明式:

    // 匿名函数表达式
    var anonymous = function() {
      return true;
    };
    
    // 有名函数表达式
    var named = function named() {
      return true;
    };
    
    // 立即调用函数表达式
    (function() {
      console.log('Welcome to the Internet. Please follow me.');
    })();
    
  • 纯属不用在叁个非函数块里声称二个函数,把那些函数赋给三个变量。浏览器允许你这么做,但是它们解析不相同。

  • 注: ECMA-262定义把概念为意气风发组语句,函数证明不是一个言辞。翻阅ECMA-262对那几个主题素材的表达.

    // bad
    if (currentUser) {
      function test() {
        console.log('Nope.');
      }
    }
    
    // good
    if (currentUser) {
      var 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
    };
    
    function getProp(prop) {
      return luke[prop];
    }
    
    var isJedi = getProp('jedi');
    

变量

  • 连接利用 var 来表明变量,如若不这么做将变成发生全局变量,大家要幸免污染全局命名空间。

    // bad
    superPower = new SuperPower();
    
    // good
    var superPower = new SuperPower();
    
  • 应用三个 var 以致新行申明五个变量,缩进4个空格。

    // bad
    var items = getItems();
    var goSportsTeam = true;
    var dragonball = 'z';
    
    // good
    var items = getItems(),
        goSportsTeam = true,
        dragonball = 'z';
    
  • 末尾再声称未赋值的变量,当您想援引此前已赋值变量的时候很有用。

    // bad
    var i, len, dragonball,
        items = getItems(),
        goSportsTeam = true;
    
    // bad
    var i, items = getItems(),
        dragonball,
        goSportsTeam = true,
        len;
    
    // good
    var items = getItems(),
        goSportsTeam = true,
        dragonball,
        length,
        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;
    }
    

原则表明式和等号

  • 客观施用 === 和 !== 以及 == 和 !=.
  • 合理使用表明式逻辑操作运算.
  • 规范表明式的免强类型调换服从以下准则:

    • 对象 被总结为 true
    • Undefined 被总结为 false
    • Null 被总计为 false
    • 布尔值 被计算为 布尔的值
    • 数字 如果是 +0, -0, or NaN 被总结为 false ,
      否则为 true
    • 字符串 假诺是空字符串 '' 则被总括为 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...
    }
    
  • 阅读 Truth Equality and
    JavaScript 精晓更加的多

  • 给全部多行的块使用大括号

    // bad
    if (test)
      return false;
    
    // good
    if (test) return false;
    
    // good
    if (test) {
      return false;
    }
    
    // bad
    function() { return false; }
    
    // good
    function() {
      return false;
    }
    

注释

  • 使用 /** ... */ 实行多行注释,富含描述,钦赐项目以至参数值和再次回到值

    // 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 或 TODO 扶植其余人飞快掌握

    function Calculator() {
    
      // FIXME: shouldn't use a global here
      total = 0;
    
      return this;
    }
    
    function Calculator() {
    
      // TODO: total should be configurable by an options param
      this.total = 0;
    
      return this;
    }
    
  • 满意规范的文书档案,在急需文书档案的时候,能够品尝jsdoc.

空白

  • 缩进、格式化能扶植组织越来越快得一定修复代码BUG.
  • 将tab设为4个空格

    // 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'
    });
    
  • 在做长方法链时使用缩进.

    // 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').class('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')
        .class('led', true)
        .attr('width',  (radius + margin) * 2)
      .append('svg:g')
        .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
        .call(tron.led);
    

逗号

  • 决不将逗号放前边

    // bad
    var once
      , upon
      , aTime;
    
    // good
    var 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'
    };
    
  • 不要扩展余的逗号,那说倒霉会在IE下引起错误,同一时间假诺多一个逗号有个别ES3的贯彻会计算大多组的长短。

    // 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
    ;(function() {
      var name = 'Skywalker';
      return name;
    })();
    

类型转变

  • 在讲话的启幕推行项目调换.
  • 字符串:

    //  => 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 而且总是带上类型调换的基数.,如parseInt(value, 10)

  • 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);
    
    // 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;
    
  • 布尔值:

    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 = {};
    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 的引用时利用 self(python 风格),避免this issue.Angular建议使用vm(MVVM模式中view-model):

    // good
    function() {
      var self = this;
      return function() {
        console.log(self);
      };
    }
    

存取器

  • 品质的存取器函数不是须求的
  • 假定您确实有存取器函数的话使用getVal(卡塔尔国 和
    setVal(‘hello’卡塔尔(قطر‎,java getter、setter风格或者jQuery风格
  • 生机勃勃旦属性是布尔值,使用isVal(卡塔尔国 或 hasVal(卡塔尔国

    // bad
    if (!dragon.age()) {
      return false;
    }
    
    // good
    if (!dragon.hasAge()) {
      return false;
    }
    
  • 能够创立get(State of Qatar和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();
    };
    

事件

  • 当给事件附加数据时,传入叁个哈希实际不是原始值,那足以让后边的贡献者插手越多多少到事件数量里而不用搜索并更新特别事件的平地风波微电脑

    // 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
    });
    

模块

  • 其一文件应当以驼峰命名,并在同名文件夹下,同一时间导出的时候名字如出风度翩翩辙
  • 对此公开API库能够思索投入一个名称叫noConflict(卡塔尔(قطر‎的格局来设置导出的模块为事情发生前的版本并回到它
  • 一而再在模块顶端评释 'use strict';,引入[JSHint规范](http://jshint.com/):

    // 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对象以$开端,以和原生DOM节点区分。

    // bad
    var menu = $(".menu");
    
    // good
    var $menu = $(".menu");
    
  • 缓存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'
      });
    }
    
  • 对DOM查询利用级联的 $('.sidebar ul') 或 $('.sidebar ul'),jsPerf

  • 对有效能域的jQuery对象查询利用 find:

    // bad
    $('.sidebar', 'ul').hide();
    
    // bad
    $('.sidebar').find('ul').hide();
    
    // good
    $('.sidebar ul').hide();
    
    // good
    $('.sidebar > ul').hide();
    
    // good (slower)
    $sidebar.find('ul');
    
    // good (faster)
    $($sidebar[0]).find('ul');
    
  • 各样页面只行使三回document的ready事件,那样方便调节和测量试验与作为流追踪。

    $(function(){
       //do your page init.  
    });
    
  • 事件采用jQuery.on从页面分离到JavaScript文件。

    // bad
    <a id="myLink" href="#" onclick="myEventHandler();"></a>
    
    // good
    <a id="myLink" href="#"></a>
    
    $("#myLink").on("click", myEventHandler);
    
  • 对于Ajax使用promise方式。

     // bad
        $.ajax({
            ...
            success : function(){
            },
            error : function(){
            } 
        })
    
        // good
        $.ajax({.
            ..
        }).then( function( ){
            // success
        }, function( ){
            // error
        })
    
  • 行使promise的deferred对象解决延迟注册难点。

    var dtd = $.Deferred(); // 新建一个deferred对象
      var wait = function(dtd){
        var tasks = function(){
          alert("执行完毕!");
          dtd.resolve(); // 改变deferred对象的执行状态
        };
        setTimeout(tasks,5000);
        return dtd;
      };
    
  • HTML中Style、以至JavaScript中style移到CSS中class,在HTML、JavaScript中引进class,实际不是一直style。

ECMAScript 5兼容性

尽量采纳ES5办法,特别数组map、filter、forEach方法简化日常支出。在老式IE浏览器中引进ES5-shim。恐怕也足以虚构引进underscore、lodash 常用辅助库.

  • 参考Kangax的 ES5 compatibility
    table

HTML、CSS、JavaScript分离

  • 页面DOM布局采用HTML,样式则利用CSS,动态DOM操作JavaScript。不要混用在HTML中
  • 分开在差异连串文件,文件link。
  • HTML、CSS、JavaScript变量名都须求有业务价值。CSS以中写道分割的全小写命名,JavaScript则首字母小写的驼峰命名。
  • CSS可引入Bootstrap、Foundation等著称响应式设计框架。以至SASS、LESS工具书写CSS。
  • 对此CSS、JavaScript提出统黄金时代为单文件,收缩Ajax的连接数。也得以引进英特尔(Require.js卡塔尔加载格局。
  • 对于里边大部分商厦管理种类,能够品尝选拔前端 MVC框架公司代码。如Angular、React +
    Flux架构、Knockout等。
  • 对于宽容性可用Modernizr标准库协助。

使用jsHint

  • 前面一个项目中引入引进jshint插件来标准项目编码标准。以至风流浪漫套康健的IDE配置。
  • 精心:jshint必要引进nodejs 工具grunt或gulp插件,提出公司级nodejs
    npm私服。

前面三个工具

  • 前端第三方JavaScript包管理工科具bower(bower install jQuery卡塔尔国,bower能够兑现第三方库的借助拆解深入分析、下载、晋级管理等。建议创造公司级bower私服。
  • 前端构建筑工程具,能够采纳grunt恐怕gulp工具,能够达成html、css、js压缩、验证、测量检验,文件合并、watch和liveload等富有前端职分。建议公司级nodejs
    npm私服。
  • 前端开荒IDE: WebStorm( Idea 卡塔尔国、Sublime为最佳。项目组统黄金时代IDE。IDE统大器晚成都部队署很主要。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website