DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 介紹9點個人認為比較重要的javascript 編程技巧
介紹9點個人認為比較重要的javascript 編程技巧
編輯: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;

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved