前端编码风格规范(3) 之 JavaScript

// We declare a IIFE and pass parameters into the function that we will use from the global space
(function(log, w, undefined){
  'use strict';
  var x = 10,
      y = 100;
  // Will output 'true true'
  log((w.x === undefined) + ' ' + (w.y === undefined));
}(window.console.log, window));

(function(){
  'use strict';
  // Code goes here
}());

(function($, w, d){
  'use strict';
  $(function() {
    w.alert(d.querySelectorAll('div').length);
  });
}(jQuery, window, document));

// Script starts here
'use strict';
(function(){
  // Your code starts here
}());

(function(){
  'use strict';
  // Your code starts here
}());

(function(log){
  'use strict';
  var a = 10;
  for(var i = 0; i < a; i++) {
    var b = i * i;
    log(b);
  }
  if(a === 10) {
    var f = function() {
      log(a);
    };
    f();
  }
  function x() {
    log('Mr. X!');
  }
  x();
}(window.console.log));

(function(log){
  'use strict';
  // All variables used in the closure will be hoisted to the top of the function
  var a,
      i,
      b,
      f;
  // All functions in the closure will be hoisted to the top
  function x() {
    log('Mr. X!');
  }
  a = 10;
  for(i = 0; i < a; i++) {
    b = i * i;
    log(b);
  }
  if(a === 10) {
    // Function assignments will only result in hoisted variables but the function body will not be hoisted
    // Only by using a real function declaration the whole function will be hoisted with its body
    f = function() {
      log(a);
    };
    f();
  }
  x();
}(window.console.log));

(function(log){
  'use strict';
  var a = 10;
  i = 5;
  x();
  for(var i; i < a; i++) {
    log(b);
    var b = i * i;
  }
  if(a === 10) {
    f = function() {
      log(a);
    };
    f();
    var f;
  }
  function x() {
    log('Mr. X!');
  }
}(window.console.log));

(function(log){
  'use strict';
  var a = 10;
  var b = 10;
  for(var i = 0; i < 10; i++) {
    var c = a * b * i;
  }
  function f() {
  }
  var d = 100;
  var x = function() {
    return d * d;
  };
  log(x());
}(window.console.log));

(function(log){
  'use strict';
  var a = 10,
      b = 10,
      i,
      c,
      d,
      x;
  function f() {
  }
  for(i = 0; i < 10; i++) {
    c = a * b * i;
  }
  d = 100;
  x = function() {
    return d * d;
  };
  log(x());
}(window.console.log));

(function(log){
  'use strict';
  log('0' == 0); // true
  log('' == false); // true
  log('1' == true); // true
  log(null == undefined); // true
  var x = {
    valueOf: function() {
      return 'X';
    }
  };
  log(x == 'X');
}(window.console.log));

(function(log){
  'use strict';
  function logTruthyFalsy(expr) {
    if(expr) {
      log('truthy');
    } else {
      log('falsy');
    }
  }
  logTruthyFalsy(true); // truthy
  logTruthyFalsy(1); // truthy
  logTruthyFalsy({}); // truthy
  logTruthyFalsy([]); // truthy
  logTruthyFalsy('0'); // truthy
  logTruthyFalsy(false); // falsy
  logTruthyFalsy(0); // falsy
  logTruthyFalsy(undefined); // falsy
  logTruthyFalsy(null); // falsy
  logTruthyFalsy(NaN); // falsy
  logTruthyFalsy(''); // falsy
}(window.console.log));

(function(log){
  'use strict';
  function multiply(a, b) {
    a = a || 1;
    b = b || 1;
    log('Result ' + a * b);
  }
  multiply(); // Result 1
  multiply(10); // Result 10
  multiply(3, NaN); // Result 3
  multiply(9, 5); // Result 45
}(window.console.log));

(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 SmithnPoor 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));