前端js规范
前端js规范
京都玩家 发表于1年前
前端js规范
  • 发表于 1年前
  • 阅读 10
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 前端js规范,提高团队合作效率,养成良好书写习惯!

引导:为方便自已以及其它同事,请大家遵守前端js规范,挺高工作效率!---持续更新中.....

注:后端只需遵守js规范,后面的js优化部分了解即可;

1,统一采用闭包的立即执行的方式,不要污染全局变量;

(funcction(){        
//  to do ...    
    
})(window)

2,不要污染全局变量,尽量采用局部变量的;

;(function(){    
    不规范的书写方式:        
    var name = 'andy';        
    var age = 'lcuy';        
    ....        
    
    function createNums(params) {           
        var sex = 'boy';           
        
        var city = 'BeiJing';            
        ...        
        
    }    


规范的书写方式:        
统一的类型可以new 一个公共函数        
    function createPeople(){            
        var name = 'andy',                
        age = 'lcuy',                
        sex = 'boy',                
        city = 'BeiJing';        
        
    }    
        
    })(window);

3,为了区分全局变量和局部变量,书写方式如下:

全局变量采用 $ 符

如  var  $name = 'andy';

局部变量采用 _ 符

如  var  _age = '30';

4,不要想当然的创建过多的函数,统一放到一个位置,或在原型里添加: 若是构造函数,首字母要大写

var Union_config = function(){
create:function(){
var Union_config = function(){

        init:function(){   
        //  初始化函数                    
        ....                
            
        },                
        sumbit:function(){  
        //  提交表单信息                    
        ...                
            
        },                
        ...                
        ...            
        
    };            

return Union_config;        
    
}    

};

var myUnion = Union_config.create();

// 调用函数 以下可以按需调用函数方法;

myUnion.sumbit(); ...





## 5,注释!!!---为了方便其它同事,自己写代码的时候一定要写注释;    若是定义的全局注释或者函数等注释采用标准等文档注释;


如:   




/**@zJquery 通用js库



## 6,链式调用以及其它用法  




如: $('.div1').html(''); $('.div2').html('');

可以写成: $('.div1,.div2').html('');

如: $('.div1').css('color','red');

$('.div1').addClass('active');

可以写成: $('.div1').css('color','red').addClass('active');





//  可以采用链式


## 7,函数命名统一采用驼峰命名法    
如:    


function createNums(){        
//....    
    
}




## 8,规范定义JSON对象,补全双引号    对于JSON数据,我们推荐采用标准地书写格式,方便查看;    




如:{name:'andy',age:'18'} 改成 {"name":"andy","age":"17"}





## 9,关于ESLite代码检查查看以下链接


http://eslint.cn/docs/rules/




## 10,用“===“取代“==“


前者是严格判断,后者会进行隐式的类型转换;


## 11,关于for循环性能体验


一般写法:


var myarr = [" " " " " ];

for(var i=0;i<myarr.length;i++){

//此写法性能一般;

}

for(var i=0,len=myarr.length;i<len;i++){
//此写法性能良好
}

for(var i=0,val;val = myarr[i++]){
 	console.log(i,val);
//此写法性能好---推荐使用
}




## 12,统一使用缩进大小,以tab为基准;


## 13,var  的时候若有常量,全用大写;




如 var KPI = 123;

## 14,js中避免过多的DOM操作,需创建文档片段;


数据较多的时候,会影响性能,如下:

for(var i=0;i<500;i++)

{ var _span = document.createElement('span');

var _text = document.createTextNode(i); 

_span.appendChild(_text); 

document.body.appendChild(_span); 

}





通过创建文档片段来优化性能:如下:


var $frgment = document.createDocumentFragment();

for(var i=0,len=500;i<len;i++){

var _span = document.createElement('span'),

    _text = document.createTextNode(i);
    
_span.appendChild(_text);

$frgment.appendChild(_span);//  先添加到文档片段中 

}

document.body.appendChild($frgment);// 最后再绑定给要赋予的元素

## 15,如何处理onload事件要执行的多个函数?


function createNumA(){ console.log(1); } function createNumB(){ console.log(2); } window.onload = createNumA;//这个不会执行,被下面的覆盖了; window.onload = createNumB;//当然,这个可以执行,覆盖了上面的onload事件







// 解决方法1:可以用隐式函数----此方法比较常见,便于理解 window.onload = function(){ //都会被执行 createNumA(); createNumB(); };





// 解决方法2: function addEventOnload(func){ var oldOnload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldOnload(); func(); }; } } // 调用方法 addEventOnload(createNumA); addEventOnload(createNumB);

提示:以上两个方法都推荐使用,看个人喜好;


## 16,js代码要做到高内聚/低耦合!


高内聚:就是指某个系统模块有一段相关行很强的代码组成,只负责一项任务开发,俗称“单一责任原则”;


低耦合:一段完整的js代码,模块与模块之间尽可能独立存在,原因是可能每个模块处理的js代码功能不同。模块与模块之间的接口尽量也少而简单。如果某个模块比较大,尽量拆分来做,便于修改以及调用;


例如:


        //  阶乘函数
        function factorial(num){
            if(num <= 1 ){
                return 1;
            }else{
                return num * factorial(num-1);
            }
        };
        factorial(3);
        console.log(factorial(3));//    6=1*2*3
        
        //  上面的函数,这样定义没有问题,但问题是这个函数的执行与函数名factorail紧紧耦合在了一起。
        //  为了消除这种紧密耦合的现象,用arguments.callee来解决
        function factorial(num){
            if(num <= 1){
                return 1;
            }else{
                return num * arguments.callee(num-1);
            }
        }


        /*  注意:在函数内部,有两个特殊的对象,arguments和this
            虽然,arguments的主要用途是保存函数参数,但这个对象有个名叫callee的属性,
            该属性是一个指针,指向拥有arguments对象的函数
        */
        
## 17,     定义多个函数的时候,如果参数相同,可以用apply()和call()改变环境对象,得到引用
         每个函数都包括非继承而来的方法,apply()和call();
         apply()和call()方法相同,区别在于接受的参数不同而已;


        function sum(num1,num2){
            return num1 + num2;
        }
        function callSum(num1,num2){
            return sum.apply(this,arguments);
        }
        function callSum1(num1,num2){
            return sum.apply(this,[num1,num2]);
        }
        function callSum2(num1,num2){
            return sum.call(this,num1,num2);
        }
        console.log(callSum(10,10));    //10
        console.log(callSum1(10,10));   //10
        console.log(callSum2(10,10));   //10
        //  但是,传递参数并不是apply()和call()的真正用武之地,他们真正的强大的地方是能够扩充函数赖以运行的作用域
        window.color = 'red';
        var $o = {"color":"blue"};
        function sayColor(){
            console.log(this.color);
        }
        sayColor();//red
        sayColor.call(this);//red
        sayColor.call(window);//red
        sayColor.call($o);//blue


除此,推荐大家使用ECMAScript5中定义的一个方法:bind()方法


        var objSayColor = sayColor.bind($o);
        objSayColor();//blue 

## 18,不要使用eval()函数
原因:1),性能差;2),不能打断点调试;3),容易受到攻击;4),可读性差;5),优化概率低;

## 19,减少花费在作用域链上的时间,增加脚本的整体性能
优化之前:

        function createUi(){
            var _span = document.getElementsByTagName('span');
            console.log(_span.length);
            for(var i = 0,len = _span.length;i<len;i++){
                _span[i].title = document.title + 'txt' + i;
                console.log(i);
            }
        }
        createUi();
createUi中包含了二个对于全局变量document对象的引用,特别是循环中的document引用,查到次数是O(n),每次都要进行作用域链查找。通过创建一个指向document的局部变量,就可以通过限制一次全局查找来改进这个函数的性能。

优化之后:

        function createUi(){
            var _doc = document,
                _span = _doc.getElementsByTagName('span');
            for(var i = 0,len=_span.length;i<len;i++){
                _span[i].title = _doc.title + 'txt' + i;
            }
        }
        
## 20,避免with()语句

缺点:1),运行缓慢;2),会创建自己的作用域,因为会增加代码块中执行的作用域的长度;3),难以优化;

## 21, 提倡对象字面量

        //  避免
        var $a = new Array();
        $a[0] = 1;
        $a[1] = 'andy';
        $a[2] = 'false';

        var $obj = new Object();
        $obj.name = 'andy';
        $obj.age = 20;

    //  提倡
        var $a = [1,'andy','false'];
        var $b = {
            name:'andy',
            andy:20
        } 
        
## 22,建议多使用innerHtml 

页面上创建DOM节点的方法有两种:

使用诸如createElement()和appendChild()之类的DOM方法,以及使用innerHTML。

对于小的DOM更改,两者效率差不多,但对于大的DOM更改,innerHTML要比标准的DOM方法创建同样的DOM结构快得多。
 
当使用innerHTML设置为某个值时,后台会创建一个HTML解释器,然后使用内部的DOM调用来创建DOM结构,而非基于JS的DOM调用。由于内部方法是编译好的而非解释执行,故执行的更快。

## 23,通过模板元素clone,替代createElemnet
如果文档中存在现成的样板节点,应该是用cloneNode()方法,因为使用createElement()方法之后,
你需要设置多次元素的属性,使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素,==应该先准备一个样板节点==
    
优化之前:

        var $frag = document.createDocumentFragment();
        for (var i = 0; i < 10; i++) {
            var _el = document.createElement('p');
            _el.innerHTML = i;
            $frag.appendChild(_el);
        }
        document.body.appendChild($frag);

        
优化之后:

        var $frag = document.createDocumentFragment();
        var $pEl = document.getElementsByTagName('p')[0];
        for (var i = 0; i < 10; i++) {
            var _el = $pEl.cloneNode(false);
            _el.innerHTML = i;
            $frag.appendChild(_el);
        }
        document.body.appendChild($frag);

## 24,|| 和 && 布尔运算符的应用
        function eventHandler(e) {
            if (!e) e = window.event;
        }
        
        //可以替换为:
        function eventHandler(e) {
            e = e || window.event;
        }
        
        
        if (myobj) {
            doSomething(myobj);
        }
        //可以替换为:
        myobj && doSomething(myobj);


## 25,一次性修改样式属性;
目的:防止页面过多重排

优化前:

ele.style.backgroundColor = "#e6e6e6";
ele.style.color = "#000";
ele.style.fontSize = "12rem";

优化后:


.addActive { background: #eee; color: #093; height: 200px; }


document.getElementById(‘myDiv’).className = ‘addActive’;

## 26,操作DOM前,先把DOM节点删除或隐藏,因为隐藏的节点不会触发重排

优化前:


var $items = document.getElementsByClassName('mydiv');

for (var i=0; i < $items.length; i++){
var _item = document.createElement("li");
_item.appendChild(document.createTextNode("Option " + i);
$items[i].appendChild(_item);
}



优化后:

$items.style.display = "none";
for (var i=0; i < items.length; i++){
var _item = document.createElement("li");
_item.appendChild(document.createTextNode("Option " + i);
$items[i].appendChild(_item);
}
$items.style.display = "";

DOM的核心问题是:DOM修改导致的页面重绘、重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨!

温馨提示:zQuery地址:https://github.com/hzaini1989/zQuery






共有 人打赏支持
粉丝 0
博文 2
码字总数 3142
×
京都玩家
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: