编码规范

发表于

前端编码规范

最近写的项目越来越大，代码堆积的太多，自己看着都头疼下决心整理了下，  
着实一个浩大的工程hh，花了我三个晚上，效果还是有那么点的，
顺便把遇到的整理下，写博客在于记忆，以后回来看看好知道我曾经这么菜。

JS篇

  • 三元条件判断
    用三元操作符分配或返回语句替换简单的if语句

不推荐

if(x === 0) {    
    return '00';   
    } else {    
     return x; 
}

推荐 

return x === 4 ? '00' : x;
  • for循环
    数组的长度，使用一个变量来接收

不推荐

for(var i=0;i<arr.length,i++){
}

推荐 

for(var i=0,len=arr.length;i<len,i++){
}
  • DOM操作
    对于重复的dom操作，使用一个变量来进行接收

不推荐

$('.onSelect').text('1');
$('.onSelect').text('2');
$('.onSelect').text('3');
$('.onSelect').text('4');

推荐 

var sel=$('.onSelect');
sel.text('1');
sel.text('2');
sel.text('3');
sel.text('4');
  • 立即执行函数
    推荐在立即执行函数开始跟结尾都添加上分号，避免在合并时因为别人的代码不规范而影响到我们自己的代码,如果有用到全局变量应该通过变量传递的方式，让立即执行函数的函数体在调用时，能以局部变量的形式调用，在一定程度上提升程序性能。

不推荐

(function(){
'use strict';
var x = 10,
    y = 100,
    c,
    elem=$('body');
console.log(window.x + ' ' + window.y);
$(document).on('click',function(){
});
if(typeof c==='undefined'){
    //你的代码
}
}());

推荐

;(function($,window,document,undefined){
'use strict';
var x = 10,
    y = 100,
    c,
    elem=$('body');
console.log(window.x + ' ' + window.y);
$(document).on('click',function(){});
if(typeof c==='undefined'){
    //你的代码
}
}(jQuery,window,document));
  • 类型转换

number to string的转换，建议使用 1 + ‘’或String(1)，不使用new String(1)或1.toString()的方式。
string to number的转换，建议使用parseInt，必须显式指定第二个参数的进制。下面的例子展示了不指定进制的风险： 

parseInt('08'); // 0 
parseInt('08', 10); //8

float to integer的转换，建议使用Math.floor/Math.round/Math.ceil方法，不使用parseInt。

  • 使用命名空间

使用多个命名空间，其中的内容互不干扰

//全局对象
var Wrox = {};
//一个命名空间
Wrox.ProAjax = {};
Wrox.ProAjax.EventUtil = {};
Wrox.ProAjax.CookieUtil = {};
//另一个命名空间
Wrox.ProJS = {};
Wrox.ProJS.EventUtil = {};
Wrox.ProJS.CookieUtil = {};
  • 字符串拼接
    字符串拼接，应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。如:

不推荐

var str = ''; 
for (var i = 0, len = list.length; i < len; i++) { 
  str+= '<div>' + list[i] + '</div>'; 
} 
dom.innerHTML = str;

推荐

var str = []; 
for (var i = 0, len = list.length; i < len; i++) { 
  str.push('<div>'+ list[i] + '</div>'); 
} 
dom.innerHTML = str.join('');
  • 尽量避免全局变量和函数

不推荐

var name = "";
function setName(value) {
    name = value;
}
function sayName() {
    console.log(name);
}

推荐

var setPersonName = {
    name: "",
    setName: function (value) {
        this.name = value;
    },
    sayName: function () {
        console.log(this.name);
    }
};
setPersonName.setName("Oli");
setPersonName.sayName();