个人总结的前端开发规范

[liusaint]

JavaScript篇

• 不主动及或误生产全局变量。类似var a = b = 1，会生成全局变量b。
• 嵌套对象或计算而得的变量如果多次使用，则存一个副本。类似这样：

var innerA = document.getElementsByTagName('iframe')[0].contentWindow.a;
var inndrB = document.getElementsByTagName('iframe')[0].contentWindow.b;
  

修改成

var ifrContent = document.getElementsByTagName('iframe')[0].contentWindow
var innerA = ifrContent.a;
var inndrB = ifrContent.b;
  

• 类似。jQuery对象，如多次使用需要保存到变量中使用，$()有额外的函数开销。
  jQuery对象命名建议以$开头方便区分。

$(this).trigger('click');
$(this).find('.b');
$('.a').trigger('click');
$('.a').find('.b');

修改成

var $this = $(this);
var $a = $('.a');
$this.trigger('click');
$this.find('.b');
$a.trigger('click');
$a.find('.b');

• 减少dom访问和修改次数。比如循环渲染列表，不要拼一条插入一条。而是拼成一整个HTML字符串再统一插入页面节点中，批量修改dom。
• 尽量不要用js直接修改css属性。而是用addClass\removeClass来代替。
• 变量命名
  • 普通变量用小驼峰 applePen
  • 构造函数使用大驼峰 new Person()
  • 私有变量可以以_开头 _getName()
  • 尽量英文
  • 常量。大写字母,_分割。 MAX_TAB_LENGTH
• 注释
  • 难以理解的地方。可能被认为错误的地方。
  • 对函数期望的参数、返回值、作者、日期注释。
• 变量定义。尽量定义 在函数开头。一目了然。

function A(){
	var a='',b='',c='';
	---函数体---
}

• for in循环。必须加Object.hasOwnProperty(prop)过滤属性。
• 增加jQuery实例方法。 注意实例方法中的this指向jQ对象。区别于事件回调函数中的this。

$.fn.extend({
	alertValue:function(){
		alert(this.val());
	}
});
$("input.a").alertValue();//这样调用 this指向$("input.a")

• 增加jQuery工具方法。

$.extend({
	alert1:function(){
		alert(1);
	}
});
$.alert1();//这样调用 

• 事件绑定要有清晰的范围意识。比如不要随便进行 $('a').click(fn);这种太通用的标签来直接绑定事件。要将事件的范围限制在可控的范围内。比如同一个模块的函数可以绑定在同一个class名上。
• 模块基本写法。

$(function() {
	function Person() {

	}
	Person.prototype = {
		constructor: Person,
		bindEvent: function() {
			var self = this;
			$('body').on('click', '.person-btn', function(event) {
				var $this = $(this),
					method = '';
				if ($this.hasClass('disabled')) {
					return;
				}
				method = $this.attr('method');
				typeof self[method] == 'function' && self[method]($this, event);

			});
		},
		sayHello: function($obj, event) {

		},
		sayGoodbye: function($obj, event) {

		}
	};
	(new Person()).bindEvent();
})
html:
<button class="person-btn" method="sayHello">你好</button>
<button class="person-btn" method="sayGoodbye">再见</button>

• console.log控制台输出。生产环境尽量不要出现。或约定不使用原生console.log。自己封装log函数。

function log(){
	if('dev' == window.environment){
		console.log.apply(console,arguments);
	}	
}
log(1,2);//1,2

• 减少if else的层级。
• 函数体不要太长，不要超过一屏。
• 要解绑事件可以考虑在事件绑定的时候就绑定一个命名空间。以免不小心将其他的事件一起解绑了。
• 简单的工具方法可以写成jQuery实例方法或工具方法，复杂的功能组件可考虑以面向对象的方式写。
• 减少try...catch的使用。有错误就让它暴露出来。及时解决。
• 如果函数参数多。可改用option对象的方式来传参。并设置默认值。