久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

前端編碼風格規范之 JavaScript 規范

html5教程 html5模板網
JavaScript 只有 function 級的定義域，而無其他很多編程語言中的塊定義域，所以使得你在某一 function 內的某語句和循環體中定義了一個變量，此變量可作用于整個 function 內，而不僅僅是在
英文原文：Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / SASS coding style


JavaScript 規范


全局命名空間污染與 IIFE


總是將代碼包裹成一個 IIFE(Immediately-Invoked Function Expression)，用以創建獨立隔絕的定義域。這一舉措可防止全局命名空間被污染。


IIFE 還可確保你的代碼不會輕易被其它全局命名空間里的代碼所修改（i.e. 第三方庫，window 引用，被覆蓋的未定義的關鍵字等等）。


不推薦


  1. var x = 10,
  2.     y = 100;

  4. // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
  5. // will be stored in the window object. This is very unclean and needs to be avoided.
  6. console.log(window.x + ' ' + window.y);
復制代碼


推薦


  1. // We declare a IIFE and pass parameters into the function that we will use from the global space
  2. (function(log, w, undefined){
  3.   'use strict';

  5.   var x = 10,
  6.       y = 100;

  8.   // Will output 'true true'
  9.   log((w.x === undefined) + ' ' + (w.y === undefined));

  11. }(window.console.log, window));
復制代碼


IIFE（立即執行的函數表達式）


無論何時，想要創建一個新的封閉的定義域，那就用 IIFE。它不僅避免了干擾，也使得內存在執行完后立即釋放。


所有腳本文件建議都從 IIFE 開始。


立即執行的函數表達式的執行括號應該寫在外包括號內。雖然寫在內還是寫在外都是有效的，但寫在內使得整個表達式看起來更像一個整體，因此推薦這么做。


不推薦


  1. (function(){})();
復制代碼


推薦


  1. (function(){}());
復制代碼


so，用下列寫法來格式化你的 IIFE 代碼：


  1. (function(){
  2.   'use strict';

  4.   // Code goes here

  6. }());
復制代碼


如果你想引用全局變量或者是外層 IIFE 的變量，可以通過下列方式傳參：


  1. (function($, w, d){
  2.   'use strict';

  4.   $(function() {
  5.     w.alert(d.querySelectorAll('div').length);
  6.   });
  7. }(jQuery, window, document));
復制代碼


嚴格模式


ECMAScript 5 嚴格模式可在整個腳本或獨個方法內被激活。它對應不同的 javascript 語境會做更加嚴格的錯誤檢查。嚴格模式也確保了 javascript 代碼更加的健壯，運行的也更加快速。


嚴格模式會阻止使用在未來很可能被引入的預留關鍵字。


你應該在你的腳本中啟用嚴格模式，最好是在獨立的 IIFE 中應用它。避免在你的腳本第一行使用它而導致你的所有腳本都啟動了嚴格模式，這有可能會引發一些第三方類庫的問題。


不推薦


  1. // Script starts here
  2. 'use strict';

  4. (function(){

  6.   // Your code starts here

  8. }());
  9. 推薦

  11. (function(){
  12.   'use strict';

  14.   // Your code starts here

  16. }());
復制代碼


變量聲明


總是使用 var 來聲明變量。如不指定 var，變量將被隱式地聲明為全局變量，這將對變量難以控制。如果沒有聲明，變量處于什么定義域就變得不清（可以是在 Document 或 Window 中，也可以很容易地進入本地定義域）。所以，請總是使用 var 來聲明變量。


采用嚴格模式帶來的好處是，當你手誤輸入錯誤的變量名時，它可以通過報錯信息來幫助你定位錯誤出處。


不推


  1. x = 10;
  2. y = 100;
復制代碼


推薦


  1. var x = 10,
  2.     y = 100;
復制代碼


理解 JavaScript 的定義域和定義域提升


在 JavaScript 中變量和方法定義會自動提升到執行之前。JavaScript 只有 function 級的定義域，而無其他很多編程語言中的塊定義域，所以使得你在某一 function 內的某語句和循環體中定義了一個變量，此變量可作用于整個 function 內，而不僅僅是在此語句或循環體中，因為它們的聲明被 JavaScript 自動提升了。


我們通過例子來看清楚這到底是怎么一回事：


原 function


  1. (function(log){
  2.   'use strict';

  4.   var a = 10;

  6.   for(var i = 0; i < a; i++) {
  7.     var b = i * i;
  8.     log(b);
  9.   }

  11.   if(a === 10) {
  12.     var f = function() {
  13.       log(a);
  14.     };
  15.     f();
  16.   }

  18.   function x() {
  19.     log('Mr. X!');
  20.   }
  21.   x();

  23. }(window.console.log));
復制代碼


被 JS 提升過后


  1. (function(log){
  2.   'use strict';
  3.   // All variables used in the closure will be hoisted to the top of the function
  4.   var a,
  5.       i,
  6.       b,
  7.       f;
  8.   // All functions in the closure will be hoisted to the top
  9.   function x() {
  10.     log('Mr. X!');
  11.   }

  13.   a = 10;

  15.   for(i = 0; i < a; i++) {
  16.     b = i * i;
  17.     log(b);
  18.   }

  20.   if(a === 10) {
  21.     // Function assignments will only result in hoisted variables but the function body will not be hoisted
  22.     // Only by using a real function declaration the whole function will be hoisted with its body
  23.     f = function() {
  24.       log(a);
  25.     };
  26.     f();
  27.   }

  29.   x();

  31. }(window.console.log));
復制代碼


根據以上提升過程，你是否可理解以下代碼？


有效代碼


  1. (function(log){
  2.   'use strict';

  4.   var a = 10;

  6.   i = 5;

  8.   x();

  10.   for(var i; i < a; i++) {
  11.     log(b);
  12.     var b = i * i;
  13.   }

  15.   if(a === 10) {
  16.     f = function() {
  17.       log(a);
  18.     };
  19.     f();

  21.     var f;
  22.   }

  24.   function x() {
  25.     log('Mr. X!');
  26.   }

  28. }(window.console.log));
復制代碼


正如你所看到的這段令人充滿困惑與誤解的代碼導致了出人意料的結果。只有良好的聲明習慣，也就是下一章節我們要提到的聲明規則，才能盡可能的避免這類錯誤風險。


提升聲明


為避免上一章節所述的變量和方法定義被自動提升造成誤解，把風險降到最低，我們應該手動地顯示地去聲明變量與方法。也就是說，所有的變量以及方法，應當定義在 function 內的首行。


只用一個 var 關鍵字聲明，多個變量用逗號隔開。


不推薦


  1. (function(log){
  2.   'use strict';

  4.   var a = 10;
  5.   var b = 10;

  7.   for(var i = 0; i < 10; i++) {
  8.     var c = a * b * i;
  9.   }

  11.   function f() {

  13.   }

  15.   var d = 100;
  16.   var x = function() {
  17.     return d * d;
  18.   };
  19.   log(x());

  21. }(window.console.log));
復制代碼


推薦


  1. (function(log){
  2.   'use strict';

  4.   var a = 10,
  5.       b = 10,
  6.       i,
  7.       c,
  8.       d,
  9.       x;

  11.   function f() {

  13.   }

  15.   for(i = 0; i < 10; i++) {
  16.     c = a * b * i;
  17.   }



  21.   d = 100;
  22.   x = function() {
  23.     return d * d;
  24.   };
  25.   log(x());

  27. }(window.console.log));
復制代碼


把賦值盡量寫在變量申明中。


不推薦


  1. var a,
  2.     b,
  3.     c;

  5. a = 10;
  6. b = 10;
  7. c = 100;
復制代碼


推薦


  1. var a = 10,
  2.     b = 10,
  3.     c = 100;
復制代碼


總是使用帶類型判斷的比較判斷


總是使用 === 精確的比較操作符，避免在判斷的過程中，由 JavaScript 的強制類型轉換所造成的困擾。


如果你使用 === 操作符，那比較的雙方必須是同一類型為前提的條件下才會有效。


如果你想了解更多關于強制類型轉換的信息，你可以讀一讀 Dmitry Soshnikov 的這篇文章。


在只使用 == 的情況下，JavaScript 所帶來的強制類型轉換使得判斷結果跟蹤變得復雜，下面的例子可以看出這樣的結果有多怪了：


  1. (function(log){
  2.   'use strict';

  4.   log('0' == 0); // true
  5.   log('' == false); // true
  6.   log('1' == true); // true
  7.   log(null == undefined); // true

  9.   var x = {
  10.     valueOf: function() {
  11.       return 'X';
  12.     }
  13.   };

  15.   log(x == 'X');

  17. }(window.console.log));
復制代碼


明智地使用真假判斷


當我們在一個 if 條件語句中使用變量或表達式時，會做真假判斷。if(a == true) 是不同于 if(a) 的。后者的判斷比較特殊，我們稱其為真假判斷。這種判斷會通過特殊的操作將其轉換為 true 或 false，下列表達式統統返回 false：false, 0, undefined, null, NaN, ''（空字符串）.


這種真假判斷在我們只求結果而不關心過程的情況下，非常的有幫助。


以下示例展示了真假判斷是如何工作的：


  1. (function(log){
  2.   'use strict';

  4.   function logTruthyFalsy(expr) {
  5.     if(expr) {
  6.       log('truthy');
  7.     } else {
  8.       log('falsy');
  9.     }
  10.   }

  12.   logTruthyFalsy(true); // truthy
  13.   logTruthyFalsy(1); // truthy
  14.   logTruthyFalsy({}); // truthy
  15.   logTruthyFalsy([]); // truthy
  16.   logTruthyFalsy('0'); // truthy

  18.   logTruthyFalsy(false); // falsy
  19.   logTruthyFalsy(0); // falsy
  20.   logTruthyFalsy(undefined); // falsy
  21.   logTruthyFalsy(null); // falsy
  22.   logTruthyFalsy(NaN); // falsy
  23.   logTruthyFalsy(''); // falsy

  25. }(window.console.log));
復制代碼


變量賦值時的邏輯操作


邏輯操作符 || 和 && 也可被用來返回布爾值。如果操作對象為非布爾對象，那每個表達式將會被自左向右地做真假判斷。基于此操作，最終總有一個表達式被返回回來。這在變量賦值時，是可以用來簡化你的代碼的。


不推薦


  1. if(!x) {
  2.   if(!y) {
  3.     x = 1;
  4.   } else {
  5.     x = y;
  6.   }
  7. }
復制代碼


推薦


  1. x = x || y || 1;
復制代碼


這一小技巧經常用來給方法設定默認的參數。


  1. (function(log){
  2.   'use strict';

  4.   function multiply(a, b) {
  5.     a = a || 1;
  6.     b = b || 1;

  8.     log('Result ' + a * b);
  9.   }

  11.   multiply(); // Result 1
  12.   multiply(10); // Result 10
  13.   multiply(3, NaN); // Result 3
  14.   multiply(9, 5); // Result 45

  16. }(window.console.log));
復制代碼


分號


總是使用分號，因為隱式的代碼嵌套會引發難以察覺的問題。當然我們更要從根本上來杜絕這些問題[1] 。以下幾個示例展示了缺少分號的危害：


  1. // 1.
  2. MyClass.prototype.myMethod = function() {
  3.   return 42;
  4. }  // No semicolon here.

  6. (function() {
  7.   // Some initialization code wrapped in a function to create a scope for locals.
  8. })();


  11. var x = {
  12.   'i': 1,
  13.   'j': 2
  14. }  // No semicolon here.

  16. // 2.  Trying to do one thing on Internet Explorer and another on Firefox.
  17. // I know you'd never write code like this, but throw me a bone.
  18. [ffVersion, ieVersion][isIE]();


  21. var THINGS_TO_EAT = [apples, oysters, sprayOnCheese]  // No semicolon here.

  23. // 3. conditional execution a la bash
  24. -1 == resultOfOperation() || die();
復制代碼


So what happens?


JavaScript 錯誤 —— 首先返回 42 的那個 function 被第二個 function 當中參數傳入調用，接著數字 42 也被“調用”而導致出錯。
八成你會得到 ‘no such property in undefined’ 的錯誤提示，因為在真實環境中的調用是這個樣子：x[ffVersion, ieVersion][isIE]().
die 總是被調用。因為數組減 1 的結果是 NaN，它不等于任何東西（無論 resultOfOperation 是否返回 NaN）。所以最終的結果是die() 執行完所獲得值將賦給 THINGS_TO_EAT.


Why?


JavaScript 中語句要以分號結束，否則它將會繼續執行下去，不管換不換行。以上的每一個示例中，函數聲明或對象或數組，都變成了在一句語句體內。要知道閉合圓括號并不代表語句結束，JavaScript 不會終結語句，除非它的下一個 token 是一個中綴符[2] 或者是圓括號操作符。


這真是讓人大吃一驚，所以乖乖地給語句末加上分號吧。


澄清：分號與函數


分號需要用在表達式的結尾，而并非函數聲明的結尾。區分它們最好的例子是：


  1. var foo = function() {
  2.   return true;
  3. };  // semicolon here.

  5. function foo() {
  6.   return true;
  7. }  // no semicolon here.
復制代碼


嵌套函數


嵌套函數是非常有用的，比如用在持續創建和隱藏輔助函數的任務中。你可以非常自由隨意地使用它們。


語句塊內的函數聲明


切勿在語句塊內聲明函數，在 ECMAScript 5 的嚴格模式下，這是不合法的。函數聲明應該在定義域的頂層。但在語句塊內可將函數申明轉化為函數表達式賦值給變量。


不推薦


  1. if (x) {
  2.   function foo() {}
  3. }
復制代碼


推薦


  1. if (x) {
  2.   var foo = function() {};
  3. }
復制代碼


異常


基本上你無法避免出現異常，特別是在做大型開發時（使用應用開發框架等等）。


在沒有自定義異常的情況下，從有返回值的函數中返回錯誤信息一定非常的棘手，更別提多不優雅了。不好的解決方案包括了傳第一個引用類型來接納錯誤信息，或總是返回一個對象列表，其中包含著可能的錯誤對象。以上方式基本上是比較簡陋的異常處理方式。適時可做自定義異常處理。


在復雜的環境中，你可以考慮拋出對象而不僅僅是字符串（默認的拋出值）。


  1. if(name === undefined) {
  2.   throw {
  3.     name: 'System Error',
  4.     message: 'A name should always be specified!'
  5.   }
  6. }
復制代碼


標準特性


總是優先考慮使用標準特性。為了最大限度地保證擴展性與兼容性，總是首選標準的特性，而不是非標準的特性（例如：首選string.charAt(3) 而不是 string[3]；首選 DOM 的操作方法來獲得元素引用，而不是某一應用特定的快捷方法）。


簡易的原型繼承


如果你想在 JavaScript 中繼承你的對象，請遵循一個簡易的模式來創建此繼承。如果你預計你會遇上復雜對象的繼承，那可以考慮采用一個繼承庫，比如 Proto.js by Axel Rauschmayer.


簡易繼承請用以下方式：


  1. (function(log){
  2.   'use strict';

  4.   // Constructor function
  5.   function Apple(name) {
  6.     this.name = name;
  7.   }
  8.   // Defining a method of apple
  9.   Apple.prototype.eat = function() {
  10.     log('Eating ' + this.name);
  11.   };

  13.   // Constructor function
  14.   function GrannySmithApple() {
  15.     // Invoking parent constructor
  16.     Apple.prototype.constructor.call(this, 'Granny Smith');
  17.   }
  18.   // Set parent prototype while creating a copy with Object.create
  19.   GrannySmithApple.prototype = Object.create(Apple.prototype);
  20.   // Set constructor to the sub type, otherwise points to Apple
  21.   GrannySmithApple.prototype.constructor = GrannySmithApple;

  23.   // Calling a super method
  24.   GrannySmithApple.prototype.eat = function() {
  25.     // Be sure to apply it onto our current object with call(this)
  26.     Apple.prototype.eat.call(this);

  28.     log('Poor Grany Smith');
  29.   };

  31.   // Instantiation
  32.   var apple = new Apple('Test Apple');
  33.   var grannyApple = new GrannySmithApple();

  35.   log(apple.name); // Test Apple
  36.   log(grannyApple.name); // Granny Smith

  38.   // Instance checks
  39.   log(apple instanceof Apple); // true
  40.   log(apple instanceof GrannySmithApple); // false

  42.   log(grannyApple instanceof Apple); // true
  43.   log(grannyApple instanceof GrannySmithApple); // true

  45.   // Calling method that calls super method
  46.   grannyApple.eat(); // Eating Granny Smith\nPoor Grany Smith

  48. }(window.console.log));
復制代碼


使用閉包


閉包的創建也許是 JS 最有用也是最易被忽略的能力了。關于閉包如何工作的合理解釋。


切勿在循環中創建函數


在簡單的循環語句中加入函數是非常容易形成閉包而帶來隱患的。下面的例子就是一個典型的陷阱：


不推薦


  1. (function(log, w){
  2.   'use strict';

  4.   // numbers and i is defined in the current function closure
  5.   var numbers = [1, 2, 3],
  6.       i;

  8.   for(i = 0; i < numbers.length; i++) {
  9.     w.setTimeout(function() {
  10.       // At the moment when this gets executed the i variable, coming from the outer function scope
  11.       // is set to 3 and the current program is alerting the message 3 times
  12.       // 'Index 3 with number undefined
  13.       // If you understand closures in javascript you know how to deal with those cases
  14.       // It's best to just avoid functions / new closures in loops as this prevents those issues

  16.       w.alert('Index ' + i + ' with number ' + numbers[i]);
  17.     }, 0);
  18.   }

  20. }(window.console.log, window));
復制代碼


接下來的改進雖然已經解決了上述例子中的問題或 bug，但還是違反了不在循環中創建函數或閉包的原則。


不推薦


  1. (function(log, w){
  2.   'use strict';

  4.   // numbers and i is defined in the current function closure
  5.   var numbers = [1, 2, 3],
  6.       i;

  8.   for(i = 0; i < numbers.length; i++) {
  9.     // Creating a new closure scope with an IIFE solves the problem
  10.     // The delayed function will use index and number which are
  11.     // in their own closure scope (one closure per loop iteration).
  12.     // ---
  13.     // Still this is not recommended as we violate our rule to not
  14.     // create functions within loops and we are creating two!

  16.     (function(index, number){
  17.       w.setTimeout(function() {
  18.         // Will output as expected 0 > 1, 1 > 2, 2 > 3
  19.         w.alert('Index ' + index + ' with number ' + number);
  20.       }, 0);
  21.     }(i, numbers[i]));
  22.   }

  24. }(window.console.log, window));
復制代碼


接下來的改進已解決問題，而且也遵循了規范。可是，你會發現看上去似乎過于復雜繁冗了，應該會有更好的解決方案吧。


不完全推薦


  1. (function(log, w){
  2.   'use strict';

  4.   // numbers and i is defined in the current function closure
  5.   var numbers = [1, 2, 3],
  6.       i;

  8.   // Create a function outside of the loop that will accept arguments to create a
  9.   // function closure scope. This function will return a function that executes in this
  10.   // closure parent scope.
  11.   function alertIndexWithNumber(index, number) {
  12.     return function() {
  13.       w.alert('Index ' + index + ' with number ' + number);
  14.     };
  15.   }

  17.   // First parameter is a function call that returns a function.
  18.   // ---
  19.   // This solves our problem and we don't create a function inside our loop
  20.   for(i = 0; i < numbers.length; i++) {
  21.     w.setTimeout(alertIndexWithNumber(i, numbers[i]), 0);
  22.   }

  24. }(window.console.log, window));
復制代碼


將循環語句轉換為函數執行的方式問題能得到立馬解決，每一次循環都會對應地創建一次閉包。函數式的風格更加值得推薦，而且看上去也更加地自然和可預料。


推薦


  1. (function(log, w){
  2.   'use strict';

  4.   // numbers and i is defined in the current function closure
  5.   var numbers = [1, 2, 3],
  6.       i;

  8.   numbers.forEach(function(number, index) {
  9.     w.setTimeout(function() {
  10.       w.alert('Index ' + index + ' with number ' + number);
  11.     }, 0);
  12.   });

  14. }(window.console.log, window));
復制代碼


eval 函數（魔鬼）


eval() 不但混淆語境還很危險，總會有比這更好、更清晰、更安全的另一種方案來寫你的代碼，因此盡量不要使用 evil 函數。


this 關鍵字


只在對象構造器、方法和在設定的閉包中使用 this 關鍵字。this 的語義在此有些誤導。它時而指向全局對象（大多數時），時而指向調用者的定義域（在 eval 中），時而指向 DOM 樹中的某一節點（當用事件處理綁定到 HTML 屬性上時），時而指向一個新創建的對象（在構造器中），還時而指向其它的一些對象（如果函數被 call() 和 apply() 執行和調用時）。


正因為它是如此容易地被搞錯，請限制它的使用場景：


  • 在構造函數中
  • 在對象的方法中（包括由此創建出的閉包內）

首選函數式風格


函數式編程讓你可以簡化代碼并縮減維護成本，因為它容易復用，又適當地解耦和更少的依賴。


接下來的例子中，在一組數字求和的同一問題上，比較了兩種解決方案。第一個例子是經典的程序處理，而第二個例子則是采用了函數式編程和 ECMA Script 5.1 的數組方法。


例外：往往在重代碼性能輕代碼維護的情況之下，要選擇最優性能的解決方案而非維護性高的方案（比如用簡單的循環語句代替 forEach）。


不推薦


  1. (function(log){
  2.   'use strict';

  4.   var arr = [10, 3, 7, 9, 100, 20],
  5.       sum = 0,
  6.       i;


  9.   for(i = 0; i < arr.length; i++) {
  10.     sum += arr[i];
  11.   }

  13.   log('The sum of array ' + arr + ' is: ' + sum)

  15. }(window.console.log));
復制代碼


推薦


  1. (function(log){
  2.   'use strict';

  4.   var arr = [10, 3, 7, 9, 100, 20];

  6.   var sum = arr.reduce(function(prevValue, currentValue) {
  7.     return prevValue + currentValue;
  8.   }, 0);

  10.   log('The sum of array ' + arr + ' is: ' + sum);

  12. }(window.console.log));
復制代碼


另一個例子通過某一規則對一個數組進行過濾匹配來創建一個新的數組。


不推薦


  1. (function(log){
  2.   'use strict';

  4.   var numbers = [11, 3, 7, 9, 100, 20, 14, 10],
  5.       numbersGreaterTen = [],
  6.       i;


  9.   for(i = 0; i < numbers.length; i++) {
  10.     if(numbers[i] > 10) {
  11.       numbersGreaterTen.push(numbers[i]);
  12.     }
  13.   }

  15.   log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');

  17. }(window.console.log));
復制代碼


推薦


  1. (function(log){
  2.   'use strict';

  4.   var numbers = [11, 3, 7, 9, 100, 20, 14, 10];

  6.   var numbersGreaterTen = numbers.filter(function(element) {
  7.     return element > 10;
  8.   });

  10.   log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');

  12. }(window.console.log));
復制代碼


使用 ECMA Script 5


建議使用 ECMA Script 5 中新增的語法糖和函數。這將簡化你的程序，并讓你的代碼更加靈活和可復用。


數組和對象的屬性迭代


用 ECMA5 的迭代方法來迭代數組。使用 Array.forEach 或者如果你要在特殊場合下中斷迭代，那就用 Array.every。


  1. (function(log){
  2.   'use strict';

  4.   // Iterate over an array and break at a certain condition
  5.   [1, 2, 3, 4, 5].every(function(element, index, arr) {
  6.     log(element + ' at index ' + index + ' in array ' + arr);

  8.     if(index !== 5) {
  9.       return true;
  10.     }
  11.   });

  13.   // Defining a simple javascript object
  14.   var obj = {
  15.     a: 'A',
  16.     b: 'B',
  17.     'c-d-e': 'CDE'
  18.   };

  20.   // Iterating over the object keys
  21.   Object.keys(obj).forEach(function(element, index, arr) {
  22.     log('Key ' + element + ' has value ' + obj[element]);
  23.   });

  25. }(window.console.log));
復制代碼


不要使用 switch


switch 在所有的編程語言中都是個非常錯誤的難以控制的語句，建議用 if else 來替換它。


這個我表示不同意


數組和對象字面量


用數組和對象字面量來代替數組和對象構造器。數組構造器很容易讓人在它的參數上犯錯。


不推薦


  1. // Length is 3.
  2. var a1 = new Array(x1, x2, x3);

  4. // Length is 2.
  5. var a2 = new Array(x1, x2);

  7. // If x1 is a number and it is a natural number the length will be x1.
  8. // If x1 is a number but not a natural number this will throw an exception.
  9. // Otherwise the array will have one element with x1 as its value.
  10. var a3 = new Array(x1);

  12. // Length is 0.
  13. var a4 = new Array();
復制代碼


正因如此，如果將代碼傳參從兩個變為一個，那數組很有可能發生意料不到的長度變化。為避免此類怪異狀況，請總是采用更多可讀的數組字面量。


推薦


  1. var a = [x1, x2, x3];
  2. var a2 = [x1, x2];
  3. var a3 = [x1];
  4. var a4 = [];
復制代碼


對象構造器不會有類似的問題，但是為了可讀性和統一性，我們應該使用對象字面量。


不推薦


  1. var o = new Object();

  3. var o2 = new Object();
  4. o2.a = 0;
  5. o2.b = 1;
  6. o2.c = 2;
  7. o2['strange key'] = 3;
復制代碼


應該寫成這樣：


推薦


  1. var o = {};

  3. var o2 = {
  4.   a: 0,
  5.   b: 1,
  6.   c: 2,
  7.   'strange key': 3
  8. };
復制代碼


修改內建對象的原型鏈


修改內建的諸如 Object.prototype 和 Array.prototype 是被嚴厲禁止的。修改其它的內建對象比如 Function.prototype，雖危害沒那么大，但始終還是會導致在開發過程中難以 debug 的問題，應當也要避免。


自定義 toString() 方法


你可以通過自定義 toString() 來控制對象字符串化。這很好，但你必須保證你的方法總是成功并不會有其它副作用。如果你的方法達不到這樣的標準，那將會引發嚴重的問題。如果 toString() 調用了一個方法，這個方法做了一個斷言[3] ，當斷言失敗，它可能會輸出它所在對象的名稱，當然對象也需要調用 toString()。


圓括號


一般在語法和語義上真正需要時才謹慎地使用圓括號。不要用在一元操作符上，例如 delete, typeof 和 void，或在關鍵字之后，例如return, throw, case, new 等。


字符串


統一使用單引號(’)，不使用雙引號(“)。這在創建 HTML 字符串非常有好處：


var msg = 'This is some HTML <div class="makes-sense"></div>';
三元條件判斷（if 的快捷方法）


用三元操作符分配或返回語句。在比較簡單的情況下使用，避免在復雜的情況下使用。沒人愿意用 10 行三元操作符把自己的腦子繞暈。


不推薦


  1. if(x === 10) {
  2.   return 'valid';
  3. } else {
  4.   return 'invalid';
  5. }
復制代碼


推薦


  1. return x === 10 ? 'valid' : 'invalid';
復制代碼


[1]：作者指的是采用嚴格規范的語句寫法，從根本上杜絕由分號缺失而引起的代碼歧義。


[2]：中綴符，指的是像 x + y 中的 +。


[3]：斷言一般指程序員在測試測序時的假設，一般是一些布爾表達式，當返回是 true 時，斷言為真，代碼運行會繼續進行；如果條件判斷為 false，代碼運行停止，你的應用被終止。


via:http://www.cnblogs.com/afrog/archive/2015/01/16/4228103.html

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： 国产黄色电影 | 午夜一区二区三区在线观看 | 色资源av| 欧美激情国产日韩精品一区18 | 亚洲精选一区二区 | 免费观看一级特黄欧美大片 | 中文字幕欧美日韩 | 国产精品99久久久久久人 | 性欧美hd| gogo肉体亚洲高清在线视 | 日韩在线小视频 | 国产精品91网站 | 99综合 | 国产露脸国语对白在线 | av永久免费 | 午夜久久久 | 波多野结衣二区 | 欧美极品在线 | 亚洲欧洲精品一区 | 中文字幕欧美日韩一区 | 日韩av免费在线观看 | 动漫www.被爆羞羞av44 | 亚洲精品久久久一区二区三区 | 亚洲精品乱码久久久久久9色 | 久久麻豆精品 | 国产99久久精品一区二区300 | 久久国内精品 | 97久久精品午夜一区二区 | 日本亚洲欧美 | 午夜视频一区二区 | 久久亚洲天堂 | 日韩视频一区二区三区 | 亚洲一区免费视频 | 二区精品| 欧美精品一区二区三区四区 在线 | 日韩免费一区二区 | 人人看人人干 | av免费观看网站 | 99reav | 99亚洲精品视频 | 欧美乱操 |