前端杂七杂八

2018年5月26日

JavaScript开发规范(转)

作者 admin

作为一个小白前端看了自己的代码有些惭愧，上网找到了一个大神写的规范，以后离不开这个规范了，下次写码时候就把这个规范开个窗口勉励自己。

原文地址：https://github.com/kangkk/web_develop_standard

javaScript书写规范：

命名规范。

	常量名
		全部大写并单词间用下划线分隔
		如：CSS_BTN_CLOSE、TXT_LOADING

	对象的属性或方法名
		小驼峰式（little camel-case）
		如：init、bindEvent、updatePosition
		示例：Dialog.prototype = {
				init: function () {},
				bindEvent: function () {},
				updatePosition: function () {}
				 …
			};
	类名（构造器）
		-->小驼峰式但首字母大写
		-->如：Current、DefaultConfig
	函数名
		-->小驼峰式
		-->如：current()、defaultConfig()
	变量名
		-->小驼峰式
		-->如：current、defaultConfig
	私有变量名
		-->小驼峰式但需要用_开头
		-->如：_current、_defaultConfig
	变量名的前缀
		-->续

代码格式。

	"()"前后需要跟空格
	"="前后需要跟空格
	","后面需要跟空格
	JSON对象需格式化对象参数
	if、while、for、do语句的执行体用"{}"括起来

"{}"格式如下。

	if (a==1) {
		//代码
	};

避免额外的逗号。

	var arr = [1,2,3,];

`for-in`循环体中必须用`hasOwnProperty`方法检查成员是否为自身成员，避免来自原型链上的污染。

长语句可考虑断行。

	TEMPL_SONGLIST.replace('{TABLE}', da['results'])
		.replace('{PREV_NUM}', prev)
		.replace('{NEXT_NUM}', next)
		.replace('{CURRENT_NUM}', current)
		.replace('{TOTAL_NUM}', da.page_total);

为了避免和`JSLint`的检验机制冲突，“.”或“+”这类操作符放在行尾。

	TEMPL_SONGLIST.replace('{TABLE}', da['results']).
		replace('{PREV_NUM}', prev).
		replace('{NEXT_NUM}', next).
		replace('{CURRENT_NUM}', current).
		replace('{TOTAL_NUM}', da.page_total);

如果模块代码中，使用其它全局变量想跳过JSLint的检查，可以在该文件中加入`/*global*/`声明。

	/*global alert: true, console: true, top: true, setTimeout: true */

使用严格的条件判断符。用===代替==，用!==代替!=，避免掉入==造成的陷阱在条件判断时，这样的一些值表示false。

	null
	undefined与null相等
	字符串''
	数字0
	NaN

在==时，则会有一些让人难以理解的陷阱。

	(function () {
		var undefined;
		undefined == null; // true
		1 == true; //true
		2 == true; // false
		0 == false; // true
		0 == ''; // true
		NaN == NaN;// false
		[] == false; // true
		[] == ![]; // true
	})();

对于不同类型的 == 判断，有这样一些规则，顺序自上而下：

	undefined与null相等
	一个是number一个是string时，会尝试将string转换为number
	尝试将boolean转换为number
	0或1
	尝试将Object转换成number或string

而这些取决于另外一个对比量，即值的类型，所以对于0、空字符串的判断，建议使用`===`
。`===`会先判断两边的值类型，类型不匹配时为`false`。

下面类型的对象不建议用new构造。

	new Number
	new String
	new Boolean
	new Object //用{}代替
	new Array //用[]代替

引用对象成员用`obj.prop`代替`obj["prop"]`，除非属性名是变量。

从number到string的转换。

	/** 推荐写法*/
	var a = 1;
	typeof(a); //"number"
	console.log(a); //1
	var aa=a+'';
	typeof(aa); //"string"
	console.log(aa); //'1'
	/** 不推荐写法*/
	new String(a)或a.toString()

从string到number的转换，使用parseInt，必须显式指定第二个参数的进制。

	/** 推荐写法*/
	var a = '1';
	var aa = parseInt(a,10);
	typeof(a); //"string"
	console.log(a); //'1'
	typeof(aa); //"number"
	console.log(aa); //1

从float到integer的转换。

	/** 推荐写法*/
	Math.floor/Math.round/Math.ceil
	/** 不推荐写法*/
	parseInt

字符串拼接应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。

	/**推荐的拼接方式array的push、join*/
	var str=[],
		list=['测试A','测试B'];
	for (var i=0 , len=list.length; i < len; i++) {
		str.push( '<div>'+ list[i] + '</div>');
	};
	console.log(str.join('')); //<div>测试A</div><div>测试B</div>
	/** 不推荐的拼接方式+=*/
	var str = '',
		list=['测试A','测试B'];
	for (var i = 0, len = list.length; i< len; i++) {
		str+='<div>' + list[i] + '</div>';
	};
	console.log(str); //<div>测试A</div><div>测试B</div>

尽量避免使用存在兼容性及消耗资源的方法或属性。

	不要使用with，void，evil，eval_r，innerText

注重HTML分离, 减小reflow, 注重性能。

标签javascript