我的规范 - JS规范

  1. 基本
  2. 命名
  3. 使用原则

基本

  • 所有函数声明都要在前面加var关键字,在内部作用域创建全局变量不能不添加var关键字,起码要window.xxx=xxx这样

  • 每一句代码结束都要有分号

命名

  • 变量与函数都用小写驼峰命名

  • jQuery选择器返回的fn对象变量要在前面加$

    wrap = $('#wrap'); //错误的

$wrap = $('#wrap'); //正确的

  • 用于ajax传参的Object的属性名称用小写陀峰命名

    $.ajax({
	url : 'xx.php',
	type : 'post',
	data : {
		isSave : 0,
		lastId : 9
	}
});

  • 插件和对象要用大写开头的陀峰

    function Editor(){
	this.method1 = function(){}
	this.method2 = function(){}
}
Editor.prototype.xxx = function(){};

$.fn.AjaxUpload = function(){}

window.Editor = {
	attr1 : 3,
	method1 : function(){},
	method2 : function(){}
}

  • 对象的方法要用小写陀峰

  • 闭包内的变量要用下划线开头,但闭包里的函数里的变量就不用

  • 由于闭包内的函数只能在闭包里面使用,相当于私有方法,所以要用下划线开头再小写陀峰

    (function(){
	//这个函数相当于私有方法,所以下划线开头
	function _showUserIcon(){
		var user = getUser(); //这个user变量在闭包的函数里,不需要下划线开头
		if(_config.xxx){}
	}
		
		
	var _config = {}; //这个变量在闭包里面算是类算是私有属性,加下划线开头
})();

使用原则

  • 用于保存数组内容的变量初始化时要用 [ ]

  • 用于保存其它类型的变量初始化时要用 null,未知变量类型的也用 null

  • 表示是否的变量要用逻辑值true/false

    //错误的:
var isBoy = 1;
if(sex == 2){
	isBoy = 0;
}

//正确的
var isBoy = true;
if(sex == 2){
	isBoy = false;
}

  • ajax向后端传递 是/否 的意思时要用 0/1

  • 闭包插件在内部调用自己时不能写自己的名字,要先用self变量存起自身然后使用self.xxx来调用属性或方法

    (function(container){
	container.Plugin1 = {
		attr1 : 1,
		method1 : function(){}
	};
		
	var self = container.Plugin1;
})(window);

  • 函数对象也是如此

  • 在jQuery的回调里,比如click,hover或each传入的function回调参数中,this代指所选择的原生DOM对象,可以用$this = $(this)来存起当前对象

    $this表示当前回调里的DOM对象,如果同一区域内对有3次或以上使用相同选择器或将原生dom对象转成fn对象的时候,一定要先用变量存起来,因为多次jQuery转换对象消耗大

  • 闭包插件在某个DOM(比如DIV)区域内构造UI后,代码里查找自己的DOM的时候非必须的话禁止直接$('.J-xxx')这样对整个页面文档进行全局查找,要基于该闭包所定义的容器DOM开始查找,就是先用变量或属性存起插件的外框,然后通过这个$外框变量.find 来查找以尽量避免找到其它模块的相同选择器DOM

  • 除了全局变量声明，所有代码都要在window.onload事件触发后才能运行,并且这些代码都要放到js代码的底部运行,只一个模板里存在多个script标签时就放在最后一个script标签中,如果是独立的JS文件就放在文件内容最后

  • 参数表逗号后面要有空格

    //错误的:
function xxx(param1,param2,param3){}
xxx(1,2,3);

//正确的:
function xxx(param1, param2, param3){}
xxx(1, 2, 3)

  • 给Object初始内容时最后一个元素后面不需要加,号

    //错误的:
var config = {
	option1 : 1,
	option2 : 2,	//这里作为最后一个元素不要追加逗号结尾!!!
};

//正确的:
var config = {
	option1 : 1,
	option2 : 2
};

  • 基于jQuery开发的插件文件用 jquery.插件名称.js 来命名,比如 jqeury.data_builder.js

  • 用jQuery获取DOM对象的时候要用 #id 或者.J-xxx命名的class选择器

  • 插件生成的HTML标签不能带ID