• 优化JS的一些小tip


          请问您的母语是什么?一些人回答C语言,一些人回答PHP语言,一些人回答JS语言,当然大部分人的答案还是汉语。回归正题,JS至少也算的上前端工程师的第二语言。所以平时在使用的时候,也应该尽量做到言简意赅,比如能使用“赞”的时候,就不要使用“非常好非常好”这样的重复叠词。      

    避免重复的获得元素

    在一个代码块中,需要操作DOM对象的时候,需要获得这个DOM对象,会经常有这样的代码出现(以Qwrap为例):
     
    // : (
    W('#items').addClass("hide");
    ...
    W('#items').removeClass("hide");

    其实,既然在一个代码块中,完成可以用一个变量记住这些DOM对象,因为每次获取元素集合都会调用选择器引擎来计算需要获取的元素,虽然现在的选择器引擎和querySelectorAll 都已经很快了,但是重复的工作总是要慢于一次性工作的。

    // : )
    var items = W('#items');
    .....
    items.addClass("hide");
    ....
    items.removeClass("hide");

    避免重复的条件判断

    其实此方法在《JavaScript高级程序设计》中有讲到,就是所谓的“惰性载入函数”。书上的定义是:表示函数执行的分支仅会发生1次,即函数第一次调用的时候。同样,在代码中经常会做条件的判断,比如下面的代码:
    // : (
     var per = function(){
          if( statement ){
                 //条件statement满足的时候执行这段代码
           }else{
               // 条件不满足的时候执行这段代码
           }
    }
    这样的代码是OK的,能正常的运行。殊不知,每次 调用per函数per()的时候,都会进行一次条件判断。借用惰性载入函数的思路,这样写代码会更有效一些
    // : )
    var per = statement ? function(){//条件statement满足的时候执行这段代码} : function(){//条件不满足的时候执行这段代码}
     
    下面是一个简单的测试代码,不知道能不能说明问题:
    var a = 0;
    
    var test1 = a ? function(){
        console.log("aa")
    }:
    function(){
        console.log("bb");
        console.log("+++++++"+(Date.now()-d2));
    }
    
    var test = function(){   
        if(a){
            console.log('a');
        
        }else{
            console.log('b');
            console.log("++++++"+(Date.now()-d1));
        }  
    }
    
    var d1 = Date.now();
    test();
    
    var d2 = Date.now();
    test1();
    运行的结果如下:
    (第一次)
    b
    ++++++9
    bb
    +++++++0
    (第二次)
    b
    ++++++8
    bb
    +++++++0
    (第三次)
    b
    ++++++8
    bb
    +++++++0

    避免重复的创建对象

    举两个在实际开发中遇到的情况,第一个是正则表达式(虽然写文章的人可以算是基本没入门正则,囧)。比如下面的代码,
    //  : ( 
    function str(){
          var newStr = oldStr.replace(/abcdefg/,'');
          return newStr;
    }
    同样是ok的代码,但是问题就在于每次调用str函数的时候,执行replace代码,都会创建一个正则表达式对象。微笑的做法可以如下
    // : )
    
    var reg = /abcdefg/;
    function str(){
         var newStr = oldStr.replace(reg,'');
         return newStr;
    }
    这样,正则对象只创建一次,但是会被使用多次。
     
    第二个例子是时间对象。JS中获得当前时间可以用Date.now()啦,在ECMA-262的第5版中增加了这个方法,不过,那些低级的浏览器是不支持的。
    用Date.now()返回当前时间的好处就是,不用每次new Date()去创建一次时期对象。鉴于浏览器的状况,可以用下面的代码来实现兼容
    Date.now = Date.now || function(){
         return + new Date();
    }
    以上就是全部内容,其实目的很简单,就是追随我们的奥运精神,更高,更快,更强。然后在140字流行的现在,争取用第二语言更快地表达出内心的那一丢小纠纠。
  • 相关阅读:
    cocos2dx遇到的一些坑
    cocos2dx场景切换的坑
    整合quickx到普通cocos2dx
    Hadoop、spark
    Redis高级特性及应用场景
    wpf相关好资源
    MVVM模式的几个开源框架
    ASP.NET的IIS映射
    NET 开发者必备的工具箱
    C#开源汇总
  • 原文地址:https://www.cnblogs.com/lilyimage/p/3134071.html
Copyright © 2020-2023  润新知