分享9點個人認為比較重要的javascript 程式設計技巧_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(),match()等。

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)();//一般不會這麼寫;

這麼做的好處就是，在()外部無法存取到函數中變量，也就成了塊級作用域，這種方式一般用在編寫插件的時候，不會再全局(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     {
        var div = document.createElement('div');
        div.innerHTML= i.toString();
        document.body.appendChild(div);
    }

這段程式碼會造成無限循環，在循環裡面創建了一個div，然後appendChild方法將其添加到body中，那麼，所有alldiv會立即就更新，所以，i

複製程式碼 程式碼如下:

var alldiv = document.getElementsByTagName('div');
    var len,i;
    for(i=0,len=alldiv.length;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     {
        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     {
       document.querySelector('ul').innerHTML="

" i "

";
    }

給物件的innerHTML賦值，會呼叫內建的C 解析器解析這個字串，雖然速度很快，但是最好不要這樣操作，會有一定的效能流失。

最好這樣做：

複製程式碼 程式碼如下:

var ih=null;

for(var i=0;i  {
    ih ="

" i "

";
 }
  document.querySelector('ul').innerHTML=ih;

另外的一些效能最佳化話題，等有時間再更新。

以上所述就是本文的全部內容了，希望大家能夠喜歡。