前端编码规范（3）JavaScript 开发规范

if (x) {
 function foo() {}
}

if (x) {
 var foo = function() {};
}

if(name === undefined) {
 throw {
 name: 'System Error',
 message: 'A name should always be specified!'
 }
}

(function(log){
 'use strict';
 
 // Constructor function
 function Apple(name) {
 this.name = name;
 }
 // Defining a method of apple
 Apple.prototype.eat = function() {
 log('Eating ' + this.name);
 };
 
 // Constructor function
 function GrannySmithApple() {
 // Invoking parent constructor
 Apple.prototype.constructor.call(this, 'Granny Smith');
 }
 // Set parent prototype while creating a copy with Object.create
 GrannySmithApple.prototype = Object.create(Apple.prototype);
 // Set constructor to the sub type, otherwise points to Apple
 GrannySmithApple.prototype.constructor = GrannySmithApple;
 
 // Calling a super method
 GrannySmithApple.prototype.eat = function() {
 // Be sure to apply it onto our current object with call(this)
 Apple.prototype.eat.call(this);
 
 log('Poor Grany Smith');
 };
 
 // Instantiation
 var apple = new Apple('Test Apple');
 var grannyApple = new GrannySmithApple();
 
 log(apple.name); // Test Apple
 log(grannyApple.name); // Granny Smith
 
 // Instance checks
 log(apple instanceof Apple); // true
 log(apple instanceof GrannySmithApple); // false
 
 log(grannyApple instanceof Apple); // true
 log(grannyApple instanceof GrannySmithApple); // true
 
 // Calling method that calls super method
 grannyApple.eat(); // Eating Granny Smith\nPoor Grany Smith
 
}(window.console.log));

(function(log, w){
 'use strict';
 
 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;
 
 for(i = 0; i < numbers.length; i++) {
 w.setTimeout(function() {
  // At the moment when this gets executed the i variable, coming from the outer function scope
  // is set to 3 and the current program is alerting the message 3 times
  // 'Index 3 with number undefined
  // If you understand closures in javascript you know how to deal with those cases
  // It's best to just avoid functions / new closures in loops as this prevents those issues
 
  w.alert('Index ' + i + ' with number ' + numbers[i]);
 }, 0);
 }
 
}(window.console.log, window));

(function(log, w){
 'use strict';
 
 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;
 
 for(i = 0; i < numbers.length; i++) { // Creating a new closure scope with an IIFE solves the problem // The delayed function will use index and number which are // in their own closure scope (one closure per loop iteration). // --- // Still this is not recommended as we violate our rule to not // create functions within loops and we are creating two! (function(index, number){ w.setTimeout(function() { // Will output as expected 0 > 1, 1 > 2, 2 > 3
  w.alert('Index ' + index + ' with number ' + number);
  }, 0);
 }(i, numbers[i]));
 }
 
}(window.console.log, window));

(function(log, w){
 'use strict';
 
 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;
 
 // Create a function outside of the loop that will accept arguments to create a
 // function closure scope. This function will return a function that executes in this
 // closure parent scope.
 function alertIndexWithNumber(index, number) {
 return function() {
  w.alert('Index ' + index + ' with number ' + number);
 };
 }
 
 // First parameter is a function call that returns a function.
 // ---
 // This solves our problem and we don't create a function inside our loop
 for(i = 0; i < numbers.length; i++) {
 w.setTimeout(alertIndexWithNumber(i, numbers[i]), 0);
 }
 
}(window.console.log, window));

(function(log, w){
 'use strict';
 
 // numbers and i is defined in the current function closure
 var numbers = [1, 2, 3],
  i;
 
 numbers.forEach(function(number, index) {
 w.setTimeout(function() {
  w.alert('Index ' + index + ' with number ' + number);
 }, 0);
 });
 
}(window.console.log, window));

(function(log){
 'use strict';
 
 var arr = [10, 3, 7, 9, 100, 20],
  sum = 0,
  i;
 
 
 for(i = 0; i < arr.length; i++) {
 sum += arr[i];
 }
 
 log('The sum of array ' + arr + ' is: ' + sum)
 
}(window.console.log));

(function(log){
 'use strict';
 
 var arr = [10, 3, 7, 9, 100, 20];
 
 var sum = arr.reduce(function(prevValue, currentValue) {
 return prevValue + currentValue;
 }, 0);
 
 log('The sum of array ' + arr + ' is: ' + sum);
 
}(window.console.log));

(function(log){
 'use strict';
 
 var numbers = [11, 3, 7, 9, 100, 20, 14, 10],
  numbersGreaterTen = [],
  i;
 
 
 for(i = 0; i < numbers.length; i++) { if(numbers[i] > 10) {
  numbersGreaterTen.push(numbers[i]);
 }
 }
 
 log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');
 
}(window.console.log));

(function(log){
 'use strict';
 
 var numbers = [11, 3, 7, 9, 100, 20, 14, 10];
 
 var numbersGreaterTen = numbers.filter(function(element) {
 return element > 10;
 });
 
 log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');
 
}(window.console.log));

(function(log){
 'use strict';
 
 // Iterate over an array and break at a certain condition
 [1, 2, 3, 4, 5].every(function(element, index, arr) {
 log(element + ' at index ' + index + ' in array ' + arr);
 
 if(index !== 5) {
  return true;
 }
 });
 
 // Defining a simple javascript object
 var obj = {
 a: 'A',
 b: 'B',
 'c-d-e': 'CDE'
 };
 
 // Iterating over the object keys
 Object.keys(obj).forEach(function(element, index, arr) {
 log('Key ' + element + ' has value ' + obj[element]);
 });
 
}(window.console.log));

// Length is 3.
var a1 = new Array(x1, x2, x3);
 
// Length is 2.
var a2 = new Array(x1, x2);
 
// If x1 is a number and it is a natural number the length will be x1.
// If x1 is a number but not a natural number this will throw an exception.
// Otherwise the array will have one element with x1 as its value.
var a3 = new Array(x1);
 
// Length is 0.
var a4 = new Array();

var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

var o = new Object();
 
var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;

var o = {};
 
var o2 = {
 a: 0,
 b: 1,
 c: 2,
 'strange key': 3
};

var msg = 'This is some HTML <div class="makes-sense"></div>';

if(x === 10) {
 return 'valid';
} else {
 return 'invalid';
}

return x === 10 ? 'valid' : 'invalid';