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;

另外的一些性能優化話題，等有時間再更新。