不推薦

var x = 10,
y = 100;

// Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
// will be stored in the window object. This is very unclean and needs to be avoided.
console.log(window.x + ‘ ‘ + window.y);

推薦

// 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(){})();

推薦

(function(){}());

so，用下列寫法來(lái)格式化你的 IIFE 代碼：

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

不推薦

x = 10;
y = 100;

推薦

var x = 10,
y = 100;

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

不推薦

var a,
b,
c;

a = 10;
b = 10;
c = 100;

推薦

var a = 10,
b = 10,
c = 100;

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

if(!x) {
 if(!y) {
 x = 1;
 } else {
 x = y;
 }
}

x = x || y || 1;

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

// 1.
MyClass.prototype.myMethod = function() {
 return 42;
} // No semicolon here.
 
(function() {
 // Some initialization code wrapped in a function to create a scope for locals.
})();
 
 
var x = {
 'i': 1,
 'j': 2
} // No semicolon here.
 
// 2. Trying to do one thing on Internet Explorer and another on Firefox.
// I know you'd never write code like this, but throw me a bone.
[ffVersion, ieVersion][isIE]();
 
 
var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // No semicolon here.
 
// 3. conditional execution a la bash
-1 == resultOfOperation() || die();

var foo = function() {
 return true;
}; // semicolon here.
 
function foo() {
 return true;
} // no semicolon here.

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';