前端开发规范

注释

合理的注释可以让代码更易阅读、更具美感。

函数/方法注释

函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识；
参数和返回值注释必须包含类型信息和说明；

/**
 * 函数描述
 *
 * @param {string} p1 参数1的说明
 * @param {string} p2 参数2的说明
 * @param {number} p3 参数3的说明（可选）
 * @return {Object} 返回值描述
 */
function foo(p1, p2, p3) { var p3 = p3 || 10; return { p1: p1, p2: p2, p3: p3 }; }

文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:

/**
 * @des: 描述信息
 * @author 作者
 * @date 日期
 */

命名

变量, 使用 Camel 命名法

var userName = {};

私有属性、变量和方法以下划线 _ 开头

var _userName = {};

常量, 使用全部字母大写，单词间下划线分隔的命名方式

var API_PATH = {};

函数,使用 Camel 命名法, 函数的参数, 使用 Camel 命名法

function getUserName(userId) { }

类,使用 Pascal 命名法, 类的方法/属性,使用 Camel 命名法

function PersonMan(userName) { this.userName = userName; this.getUserName = function(){ return this.userName; } } PersonMan.prototype.setUserName= function (userName) { this.userName = userName; };

命名语法

类名，使用名词

function Person(personName) { }

函数名，使用动宾短语

function getStyle(element) { }

boolean 类型的变量使用 is 或 has 开头

var isLoading = false; var hasName = false;

True 和 False 布尔表达式

类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。

下面的布尔表达式都返回 false:
null undefined '' 空字符串 0 数字0 但下面的, 都返回 true: '0' 字符串0 [] 空数组 {} 空对象

jQuery 变量

存放 jQuery 对象的变量以 $ 开头；
将 jQuery 选择器返回的对象缓存到本地变量中复用；
使用驼峰命名变量；

var $myDiv = $("#myDiv"); $myDiv.click(function(){...});

避免不必要的 DOM 操作

当要操作 DOM 元素的时候，尽量将其分离节点，操作结束后，再插入节点；

var $myList = $("#list-container > ul").detach(); $myList.appendTo("#list-container");

使用字符串连接或 array.join 要比 .append()性能更好；

// 不推荐
var $myList = $("#list"); for(var i = 0; i < 10000; i++){ $myList.append("<li>"+i+"</li>"); } // 推荐 var $myList = $("#list"); var list = ""; for(var i = 0; i < 10000; i++){ list += "<li>"+i+"</li>"; } $myList.html(list); // 强烈推荐 var array = []; for(var i = 0; i < 10000; i++){ array[i] = "<li>"+i+"</li>"; } $myList.html(array.join(''));

异步加载第三方内容

当你无法保证嵌入第三方内容(比如嵌入谷歌统计)可以正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。

(function() { var script, scripts = document.getElementsByTagName('script')[0]; function load(url) { script = document.createElement('script'); script.async = true; script.src = url; scripts.parentNode.insertBefore(script, scripts); } load(url); }());

转载于:https://www.cnblogs.com/gzx618/p/5709868.html