我是FE,也是Fe

          前端來源于不斷的點滴積累。我一直在努力。

          統計

          留言簿(15)

          閱讀排行榜

          評論排行榜

          javascript中循環最佳實踐

          javascript中的循環或許大家都會,但是真正去研究,發現還是有一些區別。
          通常的寫法:
          var anchors = document.getElementsByTagName("a");

          for (i=0;i<anchors.length;i++){
              
          // do some stuff here
          }
          上面的代碼用jslint檢查時會有很多的修改建議。

          加上空格,提高可讀性,jslint建議在for的操作語句中加上空格,下面是加上空格后的代碼:
          var anchors = document.getElementsByTagName("a");

          for (i = 0; i < anchors.length; i++) {
              
          //         ^                                ^       ^
          }

          i聲明為局部變量:
          var anchors = document.getElementsByTagName("a");

          for (var i = 0; i < anchors.length; i++) {
              
          // do some stuff here
          }
          jslint的解釋是,變量不加上var  聲明,將做為全局變量。全局變量不是好的代碼。

          不要使用++,--之類的操作符
          在jslint上面的建議是這樣的 http://www.jslint.com/lint.html#inc :
          The ++ (increment) and — (decrement) operators have been known to contribute to bad code by encouraging excessive trickiness. They are second only to faulty architecture in enabling to viruses and other security menaces.

          ++,--視為程序的小技巧,但是并不是鼓勵這樣做,初學者很容易在這個上面困惑(大學教材/考試上最喜歡糾結這個了),其次就是會導致安全問題(這種情況沒見過)。
          基于上面的建議:代碼修改為:
          var anchors = document.getElementsByTagName("a");

          for (var i = 0; i < anchors.length; i += 1) {
              
          // do some stuff here
          }

          不要每次循環時計算數組的長度,i<anchors.length,會導致每次判斷循環是否停止時需要計算一次anchors的長度,這樣在數組比較大的時候會產生性能問題。
          var anchors = document.getElementsByTagName("a");

          for (var i = 0j = anchors.length; i < j; i += 1) {
              
          // do some stuff here
          }

          上面的代碼使用一個變量j緩存數組長度,提高了性能。

          使用遞減代替遞增
          上面我們已經使用一個變量緩存數組長度,但是,我們甚至可以不需要緩存數組長度,使用變量遞減。
          var anchors = document.getElementsByTagName("a");

          for (var i = anchors.length; i > 0; i -= 1) {
              
          // do some stuff here
          }

          上面的代碼,既不需要每次循環都判斷長度,也不需要單獨使用一個變量緩存數組長度。

          一個經常寫的循環學問還不小,掌握這些小技巧,可以寫出更漂亮的javascript for循環 代碼。

          后面還有人喜歡這么寫:
          var i = anchors.length;
          while (i--)
          {
          // do some stuff here
          }
          這種寫法也是比較精簡,平時用的比較少。

          相關資料:
          原文鏈接:http://www.impressivewebs.com/javascript-for-loop/
          大牛Douglas Crockford 的jslint建議:http://www.jslint.com/lint.html



          posted on 2010-12-08 00:10 衡鋒 閱讀(1507) 評論(0)  編輯  收藏 所屬分類: Web開發

          主站蜘蛛池模板: 舞阳县| 邻水| 涿鹿县| 如皋市| 黑山县| 福贡县| 定兴县| 苏尼特左旗| 腾冲县| 如皋市| 万州区| 银川市| 延寿县| 平阳县| 昔阳县| 正阳县| 灵山县| 尤溪县| 东海县| 垣曲县| 呈贡县| 澄城县| 理塘县| 上栗县| 和田市| 梁河县| 华坪县| 靖江市| 故城县| 钟山县| 连云港市| 巴彦淖尔市| 邯郸市| 桑植县| 辛集市| 株洲县| 临洮县| 拉孜县| 金坛市| 集安市| 永新县|