资讯专栏INFORMATION COLUMN

javascript code style

objc94 / 1903人阅读

javascript代码风格

来源:https://github.com/airbnb/javascript

Objects 对象
javascript// 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
};


Arrays 数组
javascript// bad
var items = new Array();

// good
var items = [];

//使用push添加数组元素
var someStack = [];
// bad
someStack[someStack.length] = "abracadabra";

// good
someStack.push("abracadabra");

//复制数组的最快方法
var len = items.length;
var itemsCopy = [];
var i;
// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

//转换array-like object(如:{1:"xx",2:"yy",length:2}) 成数组
var args = Array.prototype.slice.call(arguments);
Strings 字符串
javascript//使用单引号
// bad
var name = "Bob Parr";
// good
var name = "Bob Parr";

// bad
var fullName = "Bob " + this.lastName;
// good
var fullName = "Bob " + this.lastName;

// 使用`+`进行换行
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
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("") + "
    "; }
    Functions 函数
    javascript// 使用自执行函数
    // immediately-invoked function expression (IIFE)
    (function() {
      console.log("Welcome to the Internet. Please follow me.");
    })();
    
    //型参别用`arguments`
    // bad
    function nope(name, options, arguments) {
      // ...stuff...
    }
    
    // good
    function yup(name, options, args) {
      // ...stuff...
    }
    
    
    Properties属性
    javascript
    var luke = { jedi: true, age: 28 }; // bad var isJedi = luke["jedi"]; //一般情况使用`.`调用, // good var isJedi = luke.jedi; function getProp(prop) { //属性是变量,使用`[]`调用 return luke[prop]; } var isJedi = getProp("jedi");
    Variables 变量
    javascript
    //使用var声明变量 // bad superPower = new SuperPower(); // good var superPower = new SuperPower(); //不用`,`分割变量 // 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; var items = getItems(); var dragonball; var goSportsTeam = true; var len; // good var items = getItems(); var goSportsTeam = true; var dragonball; var length; var i; //函数内变量声明定义尽量放最前面,除非有函数开始有判断`return false`, // 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; }
    Equality 比较操作
    javascript// bad
    if (name !== "") {
      // ...stuff...
    }
    
    // good
    if (name) {
      // ...stuff...
    }
    
    // bad
    if (collection.length > 0) {
      // ...stuff...
    }
    
    // good
    if (collection.length) {
      // ...stuff...
    }
    
    Blocks 块
    javascript// bad
    if (test)
      return false;
    
    // good
    if (test) return false;
    
    // good
    if (test) {
      return false;
    }
    
    // bad
    function() { return false; }
    
    // good
    function() {
      return false;
    }
    
    Comments 注释
    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;
    }
    
    
    // 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;
    }
    
    Type Casting 格式转换
    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";
    
    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;
    
    Naming Conventions 命名约定
    javascript// bad
    function q() {
      // ...stuff...
    }
    
    //名字要有语意
    // good
    function query() {
      // ..stuff..
    }
    
    // bad
    var OBJEcttsssss = {};
    var this_is_my_object = {};
    
    //驼峰命名
    // good
    var thisIsMyObject = {};
    function thisIsMyFunction() {}
    
    // bad
    function user(options) {
      this.name = options.name;
    }
    
    //构造函数大写
    // good
    function User(options) {
      this.name = options.name;
    }
    
    // bad
    this.__firstName__ = "Panda";
    this.firstName_ = "Panda";
    
    //私有属性用`_`开头
    // good
    this._firstName = "Panda";
    
    // bad
    function() {
      var self = this;
      return function() {
        console.log(self);
      };
    }
    
    // bad
    function() {
      var that = this;
      return function() {
        console.log(that);
      };
    }
    
    //保存调用者`this`为`_this`
    // good
    function() {
      var _this = this;
      return function() {
        console.log(_this);
      };
    }
    
    Constructors 构造函数
    javascriptfunction Jedi() {
      console.log("new jedi");
    }
    
    // bad
    Jedi.prototype = {
      fight: function fight() {
        console.log("fighting");
      }
    };
    
    // good
    Jedi.prototype.fight = function fight() {
      console.log("fighting");
    };
    
    Events 事件
    javascript// bad
    $(this).trigger("listingUpdated", listing.id);
    
    ...
    
    $(this).on("listingUpdated", function(e, listingId) {
      // do something with listingId
    });
    
    //传递id时用对象包裹后再传
    // good
    $(this).trigger("listingUpdated", { listingId : listing.id });
    
    ...
    
    $(this).on("listingUpdated", function(e, data) {
      // do something with data.listingId
    });
    
    Modules 模块

    说明文件路径

    文件名使用驼峰命名

    开头加上一个 `!

    模块中使用"use strict"严格模式

    使用noConflict()无冲突的输出

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

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/85614.html

    相关文章

    • 使用UCloud HPC算力,部署流体力学软件OpenFOAM

      云极(EPC)是UCloud提供的高性能计算产品,为用户提供基于公有云技术的超高性能算力以及涵盖数据传输、数据计算、数据可视化等一站式的使用体验。EPC支持以下功能:-秒级创建计算节点,按需计费,关机不收费-支持开箱即用的应用镜像-赠送1000GB共享存储,支持FTP文件上传和下载功能,带宽最高可达100Mb-可挂载虚拟的Nvidia Tesla T4 GPU, 为图形处理功能加速-支持8- 24...

      sherry.jiang 评论0 收藏0
    • JavaScript Style Guide and Coding Conventions

      摘要:点击查看原文总结一下变量名函数名用驼峰,以小写字母开头逗号和操作符之后要有空格缩进为个空格其实现在有很多是个的语句的结尾有分号复合语句左花括号在首行末尾,且之前有空格右花括号另起一行,之前没有空格结尾没有括号对象左花括号不换行,之前有空格 点击查看原文 总结一下: 变量名函数名用驼峰,以小写字母开头 逗号和操作符之后要有空格 缩进为4个空格(其实现在有很多是2个的 nodejs ...

      ormsf 评论0 收藏0
    • JavaScript DOM——“DOM操作技术”的注意要点

      摘要:在遍历的时候很容易犯这样的错误这是一个无限循环,因为是动态的实时更新的。应该把属性初始化第二个变量应该尽量减少访问的次数因为每次访问都会运行依次基于文档的查询所以应该考虑将从中提取出的值缓存起来。 动态脚本 插入外部脚本文件 以script元素为例: 使用DOM动态的创建出这个元素: function loadScript(url) { var script = docum...

      ckllj 评论0 收藏0
    • js实用方法记录-js动态加载css、js脚本文件

      摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...

      shusen 评论0 收藏0
    • js实用方法记录-js动态加载css、js脚本文件

      摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...

      Dogee 评论0 收藏0
    • js实用方法记录-js动态加载css、js脚本文件

      摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...

      sanyang 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <