介紹9點個人認為比較重要的javascript 編程技巧

 　　介紹9點個人認為比較重要的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<10;i++)

　　{

　　document.querySelector('ul').innerHTML="

• "+i+"

";

 

　　}

　　給對象的innerHTML賦值，會調用內置的C++解析器解析這個字符串，雖然速度很快，但是最好不要這樣操作，會有一定的性能流失。

　　最好這樣做：

　　 代碼如下:

　　var ih=null;

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

　　{

　　ih+="

• "+i+"

";

 

　　}

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

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