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 = "Functions 函数"; for (i = 0; i < length; i++) { items += "
"; } // good function inbox(messages) { items = []; for (i = 0; i < length; i++) { items[i] = "- " + messages[i].message + "
"; } return items + "" + messages[i].message + " "; } return "" + items.join("") + "
"; }
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属性
javascriptVariables 变量
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");
javascriptEquality 比较操作
//使用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; }
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
云极(EPC)是UCloud提供的高性能计算产品,为用户提供基于公有云技术的超高性能算力以及涵盖数据传输、数据计算、数据可视化等一站式的使用体验。EPC支持以下功能:-秒级创建计算节点,按需计费,关机不收费-支持开箱即用的应用镜像-赠送1000GB共享存储,支持FTP文件上传和下载功能,带宽最高可达100Mb-可挂载虚拟的Nvidia Tesla T4 GPU, 为图形处理功能加速-支持8- 24...
摘要:点击查看原文总结一下变量名函数名用驼峰,以小写字母开头逗号和操作符之后要有空格缩进为个空格其实现在有很多是个的语句的结尾有分号复合语句左花括号在首行末尾,且之前有空格右花括号另起一行,之前没有空格结尾没有括号对象左花括号不换行,之前有空格 点击查看原文 总结一下: 变量名函数名用驼峰,以小写字母开头 逗号和操作符之后要有空格 缩进为4个空格(其实现在有很多是2个的 nodejs ...
摘要:在遍历的时候很容易犯这样的错误这是一个无限循环,因为是动态的实时更新的。应该把属性初始化第二个变量应该尽量减少访问的次数因为每次访问都会运行依次基于文档的查询所以应该考虑将从中提取出的值缓存起来。 动态脚本 插入外部脚本文件 以script元素为例: 使用DOM动态的创建出这个元素: function loadScript(url) { var script = docum...
摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...
摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...
摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...
阅读 2549·2021-11-23 09:51
阅读 2468·2021-09-30 09:48
阅读 1060·2021-09-10 10:51
阅读 2172·2021-08-12 13:22
阅读 3531·2021-08-11 10:24
阅读 2129·2019-08-30 15:55
阅读 596·2019-08-30 14:05
阅读 3190·2019-08-30 13:03