<dl id="3wz6h"></dl><li id="3wz6h"></li>

      1. <dl id="3wz6h"></dl>

      2. <dl id="3wz6h"><ins id="3wz6h"></ins></dl>

            <dl id="3wz6h"></dl>

            <dl id="3wz6h"><ins id="3wz6h"></ins></dl>
            1. 
              
              <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>

              <li id="3wz6h"><ins id="3wz6h"></ins></li>
              
              

            2. <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>
              首頁»JavaScript»超實用的JavaScript技巧及最佳實踐(下)

              超實用的JavaScript技巧及最佳實踐(下)

              來源:csdn 發布時間:2014-01-06 閱讀次數:

                在前段時間,發表了超實用的JavaScript技巧及最佳實踐(上),很多開發者都覺得里面所提到的技巧非常實用,基于此,我們再向大家推薦超實用的JavaScript技巧及最佳實踐(下),希望對大家有所幫助。

                文中所提供的代碼片段都已經過最新版的Chrome 30測試,該瀏覽器使用V8 JavaScript引擎(V8 3.20.17.15)。

                1.使用邏輯符號&&或者||進行條件判斷

              var foo = 10;  
              foo == 10 && doSomething(); // is the same thing as if (foo == 10) doSomething(); 
              foo == 5 || doSomething(); // is the same thing as if (foo != 5) doSomething();

                AND也可以用來設置函數參數的默認值

              Function doSomething(arg1){ 
                  Arg1 = arg1 || 10; // arg1 will have 10 as a default value if it’s not already set
              }

                2.使用map()方法來遍歷數組

              var squares = [1,2,3,4].map(function (val) {  
                  return val * val;  
              }); 
              // squares will be equal to [1, 4, 9, 16] 

                3.舍入小數位數

              var num =2.443242342;
              num = num.toFixed(4);  // num will be equal to 2.4432

                4.浮點數問題

              0.1 + 0.2 === 0.3 // is false 
              9007199254740992 + 1 // is equal to 9007199254740992  
              9007199254740992 + 2 // is equal to 9007199254740994

                0.1+0.2等于0.30000000000000004,為什么會發生這種情況?根據IEEE754標準,你需要知道的是所有JavaScript數字在64位二進制內的都表示浮點數。開發者可以使用toFixed()和toPrecision()方法來解決這個問題。

                5.使用for-in loop檢查遍歷對象屬性

                下面這段代碼主要是為了避免遍歷對象屬性。

              for (var name in object) {  
                  if (object.hasOwnProperty(name)) { 
                      // do something with name                    
                  }  
              }

                6.逗號操作符

              var a = 0; 
              var b = ( a++, 99 ); 
              console.log(a);  // a will be equal to 1 
              console.log(b);  // b is equal to 99

                7.計算或查詢緩存變量

                在使用jQuery選擇器的情況下,開發者可以緩存DOM元素

              var navright = document.querySelector('#right'); 
              var navleft = document.querySelector('#left'); 
              var navup = document.querySelector('#up'); 
              var navdown = document.querySelector('#down');

                8.在將參數傳遞到isFinite()之前進行驗證

              isFinite(0/0) ; // false 
              isFinite("foo"); // false 
              isFinite("10"); // true 
              isFinite(10);   // true 
              isFinite(undifined);  // false 
              isFinite();   // false 
              isFinite(null);  // true  !!! 

                9.在數組中避免負向索引

              var numbersArray = [1,2,3,4,5]; 
              var from = numbersArray.indexOf("foo") ;  // from is equal to -1 
              numbersArray.splice(from,2);    // will return [5]

                確保參數傳遞到indexOf()方法里是非負向的。

                10.(使用JSON)序列化和反序列化

              var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} }; 
              var stringFromPerson = JSON.stringify(person); 
              /* stringFromPerson is equal to "{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}"   */ 
              var personFromString = JSON.parse(stringFromPerson);  
              /* personFromString is equal to person object  */

                11.避免使用eval()或Function構造函數

                eval()和Function構造函數被稱為腳本引擎,每次執行它們的時候都必須把源碼轉換成可執行的代碼,這是非常昂過的操作。

              var func1 = new Function(functionCode);
              var func2 = eval(functionCode);

                12.避免使用with()方法

                如果在全局區域里使用with()插入變量,那么,萬一有一個變量名字和它名字一樣,就很容易混淆和重寫。

                13.避免在數組里使用for-in loop

                而不是這樣用:

              var sum = 0;  
              for (var i in arrayNumbers) {  
                  sum += arrayNumbers[i];  
              }

                這樣會更好:

              var sum = 0;  
              for (var i = 0, len = arrayNumbers.length; i < len; i++) {  
                  sum += arrayNumbers[i];  
              }

                這樣會更快:

              for (var i = 0; i < arrayNumbers.length; i++)

                為什么?數組長度arraynNumbers在每次loop迭代時都會被重新計算。

                14.不要向setTimeout()和setInterval()方法里傳遞字符串

                如果在這兩個方法里傳遞字符串,那么字符串會像eval那樣重新計算,這樣速度就會變慢,而不是這樣使用:

              setInterval('doSomethingPeriodically()', 1000);  
              setTimeOut('doSomethingAfterFiveSeconds()', 5000);

                相反,應該這樣用:

              setInterval(doSomethingPeriodically, 1000);  
              setTimeOut(doSomethingAfterFiveSeconds, 5000);

                15.使用switch/case語句代替較長的if/else語句

                如果有超過2個以上的case,那么使用switch/case速度會快很多,而且代碼看起來更加優雅。

                16.遇到數值范圍時,可以選用switch/casne

              function getCategory(age) {  
                  var category = "";  
                  switch (true) {  
                      case isNaN(age):  
                          category = "not an age";  
                          break;  
                      case (age >= 50):  
                          category = "Old";  
                          break;  
                      case (age <= 20):  
                          category = "Baby";  
                          break;  
                      default:  
                          category = "Young";  
                          break;  
                  };  
                  return category;  
              }  
              getCategory(5);  // will return "Baby"

                17.創建一個對象,該對象的屬性是一個給定的對象

                可以編寫一個這樣的函數,創建一個對象,該對象屬性是一個給定的對象,好比這樣:

              function clone(object) {  
                  function OneShotConstructor(){}; 
                  OneShotConstructor.prototype= object;  
                  return new OneShotConstructor(); 
              } 
              clone(Array).prototype ;  // []

                18.一個HTML escaper函數

              function escapeHTML(text) {  
                  var replacements= {"<": "<", ">": ">","&": "&", "\"": """};                      
                  return text.replace(/[<>&"]/g, function(character) {  
                      return replacements[character];  
                  }); 
              }

                19.在一個loop里避免使用try-catch-finally

                try-catch-finally在當前范圍里運行時會創建一個新的變量,在執行catch時,捕獲異常對象會賦值給變量。

                不要這樣使用:

              var object = ['foo', 'bar'], i;  
              for (i = 0, len = object.length; i <len; i++) {  
                  try {  
                      // do something that throws an exception 
                  }  
                  catch (e) {   
                      // handle exception  
                  } 
              }

                應該這樣使用:

              var object = ['foo', 'bar'], i;  
              try { 
                  for (i = 0, len = object.length; i <len; i++) {  
                      // do something that throws an exception 
                  } 
              } 
              catch (e) {   
                  // handle exception  
              } 

                20.給XMLHttpRequests設置timeouts 

                如果一個XHR需要花費太長時間,你可以終止鏈接(例如網絡問題),通過給XHR使用setTimeout()解決。

              var xhr = new XMLHttpRequest (); 
              xhr.onreadystatechange = function () {  
                  if (this.readyState == 4) {  
                      clearTimeout(timeout);  
                      // do something with response data 
                  }  
              }  
              var timeout = setTimeout( function () {  
                  xhr.abort(); // call error callback  
              }, 60*1000 /* timeout after a minute */ ); 
              xhr.open('GET', url, true);  
              
              xhr.send();

                此外,通常你應該完全避免同步Ajax調用。

                21.處理WebSocket超時

                一般來說,當創建一個WebSocket鏈接時,服務器可能在閑置30秒后鏈接超時,在閑置一段時間后,防火墻也可能會鏈接超時。

                為了解決這種超時問題,你可以定期地向服務器發送空信息,在代碼里添加兩個函數:一個函數用來保持鏈接一直是活的,另一個用來取消鏈接是活的,使用這種方法,你將控制超時問題。

                添加一個timeID……

              var timerID = 0; 
              function keepAlive() { 
                  var timeout = 15000;  
                  if (webSocket.readyState == webSocket.OPEN) {  
                      webSocket.send('');  
                  }  
                  timerId = setTimeout(keepAlive, timeout);  
              }  
              function cancelKeepAlive() {  
                  if (timerId) {  
                      cancelTimeout(timerId);  
                  }  
              }

                keepAlive()方法應該添加在WebSocket鏈接方法onOpen()的末端,cancelKeepAlive()方法放在onClose()方法下面。

                22.記住,最原始的操作要比函數調用快

                對于簡單的任務,最好使用基本操作方式來實現,而不是使用函數調用實現。

                例如

              var min = Math.min(a,b); 
              A.push(v);

                基本操作方式:

              var min = a < b ? a b; 
              A[A.length] = v;

                23.編碼時注意代碼的美觀、可讀

                JavaScript是一門非常好的語言,尤其對于前端工程師來說,JavaScript也非常重要,點擊 這里可以訪問更多優秀的JavaScript資源。

                來自: flippinawesome.org

              QQ群:WEB開發者官方群(515171538),驗證消息:10000
              微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
              提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
              網友評論(共4條評論) 正在載入評論......
              理智評論文明上網,拒絕惡意謾罵 發表評論 / 共4條評論
              登錄會員中心
              云南十一选往期