zoukankan      html  css  js  c++  java
  • javascript 编程技巧

    1.巧用判断:

      在js中,NaN,undefined,Null,0,"" 在转换为bool的时候,是false,所以,可以这样写。

    if(!obj)  {}

    表示一个对象如果为false的时候所做的事情,因为如果obj为以上任何一个,那么就是false,!false即是true,这样,就不需要 if(obj==null || obj == NaN ....)。

    2.巧用运算符:

       有一个很经典的技巧,得到时间戳。

    var dataspan = new Date()*1;

    我们知道,js是弱类型语言,Date()会返回一个表示时间的字符串,用这个字符串进行算术运算,将得到转换,也就是结果的时间戳。

    3.巧用正则表达式:

    /.a/ig.exec('xsas')

    //相当于创建一个reg对象,调用了exec方法,当然也能调用其他的方法,如:test()等。

    4.取数组最大值和最小值:

    var values = [1,2,3,40,23]; 
    var max = Math.max.apply(Math,values);

    调用Max.apply,设置对象的为Math,然后传递一个Values,就能确定最大值。

    5.内存优化:

    复制代码
    function p(){this.p='moersing'}; var p1 = new p();  
    
       p1.xx 
    
       p1.xx
    
       .......
    
       p1=null;  //执行完操作之后,最后手动解除对p1的引用。
    复制代码

    6.最受欢迎的创建对象方式(原型模式):

    复制代码
    function c(){
    
        this.name ='moersing';
    
        this.age=18;
    
        this.books=['javascript develop','C# develop'];
    
      }
    
      c.prototype={ 
           displayBookName:function (){ 
            foreach(var t in this.books) 
            {
               document.write(this.books[t]);
            }
        }
    }
    复制代码

    原型构造模式的最大缺点在于引用类型的共享,所以,将引用类型定义在构造函数中,而将通用方法定义在原型中,使用this引用。

    7.块级作用域和私有变量

        在javascript中,没有块级作用域和私有变量这一说,但是,利用一些特性,则能模仿这些效果。

    7.1块级作用域:

    (function(){ 
    
          //块级作用域
    }
    )();

        匿名函数外面加上一个括号,我管它叫"函数标准化",也就是说,可以像标准函数那样调用,如:

     var name =function(){};
    (name)();//一般不会这么写;</P>

    这么做的好处就是,在()外部无法访问到函数中变量,也就成了块级作用域,这种方式一般用在编写插件的时候,不会再全局 (global)中添加额外的变量,而且,在函数执行完毕之后,其内部定义的变量就被销毁了,所以,也不会有闭包特性存在的问题。

    7.2私有变量:

    复制代码
    function private()
     { 
       var name = 'moersing';
       this.getName = function(){
       return this.name;
       }
    }
    复制代码

    私有变量实际上就是利用函数的作用域作为限制(外部无法访问),然后定义一个方法,这个方法返回相应的变量,仅此而已。

    8.DOM之NodeList:

       nodeList是一个动态的元素,这意味着,在文档中添加任何元素,nodeList都会实时更新,如:

    复制代码
    var alldiv = document.getElementsByTagName('div');
    
        for(var i=0;i<alldiv.length;i++)
        {
            var div = document.createElement('div');
    
            div.innerHTML= i.toString();
    
            document.body.appendChild(div);
        }
    复制代码

    这段代码会造成无限循环,在循环里面创建了一个div,然后appendChild方法将其添加到body中,那么,所有alldiv会立即就更新,所以,i<alldiv.length永远无法成立,要解决这个问题,可以使用下面方式:

    复制代码
    var alldiv = document.getElementsByTagName('div');
    
        var len,i;
    
        for(i=0,len=alldiv.length;i<len;i++)
        {
            var div = document.createElement('div');
    
            div.innerHTML= i.toString();
    
            document.body.appendChild(div);
    
        }
    复制代码

    这里建议:最好不要频繁的对NodeList操作,因为每次操作都会执行一次DOM树的查询。

      除了以上介绍的方法外,HTML5 新加入的API(selector API Level1)也能解决这个问题,它类似C#的linq及时查询,至于什么是linq及时查询,以后我会更新blog,敬请关注: 

    复制代码
    var allDiv= document.querySelectorAll('div');
    
        for(var i=0;i<alldiv.length;i++)
        {
            var div = document.createElement('div');
    
            div.innerHTML= i.toString();
    
            document.body.appendChild(div);
    
        }
    复制代码

       querySelectorAll需要一个参数,一个CSS选择器,类似jquery中的$(),它返回的NodeList是一个及时的,非动态的DOM集合。

       另外还有一个querySelector,返回匹配的第一个元素,有关HTML5 API 详 见

    http://www.w3.org/standards/techs/dom#w3c_all 

    或者

     https://developer.mozilla.org/zh-CN/docs/Web/API

    另外,本人也在酝酿一篇blog,专门讲HTML5 API的,敬请关注。

    9.DOM性能:

        不要做这种傻事(我做过。。。)

    for(var i=0;i<10;i++)
        { 
           document.querySelector('ul').innerHTML="<li>"+i+"</li>";
        }

    给对象的innerHTML赋值,会调用内置的C++解析器解析这个字符串,虽然速度很快,但是最好不要这样操作,会有一定的性能流失。

    最好这样做:

    复制代码
    var ih=null;
    
    for(var i=0;i<10;i++)
     { 
        ih+="<li>"+i+"</li>";
     }
    
      document.querySelector('ul').innerHTML=ih;
    复制代码

    另外的一些性能优化话题,等有时间再更新。

  • 相关阅读:
    事务数据oracle 锁1
    编译文件系统移植linux3.0.62 + busybox最小系统到单板TQ2440
    事务说明[tomcat] spring2.5.6 + hiberante3.1.3 + atomikos3.8.0 多数据源事务配置
    字符判断字母顺序问题
    维度字段缓慢渐变维度的处理方式
    nullnull提取汉字第一个字母
    期望连续2013百度之星4.27月赛 题目一 Fir
    覆盖距离AsiaHatyai2012 & LA 6144 Radiation 二分搜索
    冒泡,插入,希尔,快排的比较
    链表打印从尾到头打印链表
  • 原文地址:https://www.cnblogs.com/xuan52rock/p/4460059.html
Copyright © 2011-2022 走看看