关于某些常见js结构的半吊子理解

• 需要简单了解的一些概念
  • 闭包
  • 函数声明
  • 函数表达式
  • 执行一个函数
  • 匿名函数
• 一步一步慢慢认识

老是碰见这些类型，是时候理顺一下思路了。
(function (){…}())
(function (){…})()
!function (){…}()

需要简单了解的一些概念

闭包

为了不与其它变量相混淆，缩小作用域，避免暴露一些不需要的细节，这是这种写法要实现的主要目的。

函数声明

像这种:

function test1(){
    alert('Hello World');
}

函数表达式

像这种:

var test2 = function(){
    alert('Hello World');
}

执行一个函数

像这种:

var test3 = function(){
    alert('Hello World');
}
test3();

或者这种:

function test4(){
    alert('Hello World');
}
test4();

匿名函数

• 它不能单独存在，否则会报语法错误。
  js引擎会将开头的function关键字当做函数声明，会报错需要一个函数名。

• 它可以是函数表达式var a=b;右边的b那一部分。
• 它也可以是其它表达式的一部分，比如(a)、!a、+a。
• 像这种:

  function(){
    alert('Hello World');
  }
  

一步一步慢慢认识

• 首先，我们要认识到我们的目的，将某些实现放在匿名函数里面，实现闭包

  function(){
    alert('hello');
  }
  

• 然后，我们要让这个函数马上跑起来

  function(){
    alert('hello');
  }()
  

• 为了方便外部调用，可以传个参数进去

  var module = {};
  function(exports){
    exports.alert = function(){alert('hello')};
  }(module)
  // 如果一切顺利，module.alert()可以实现警报方法
  module.alert();
  

• 但是问题来了，因为语法问题，浏览器无法好好地识别匿名函数和函数声明，它会报错。所以我们需要加料。
  以下是几种实现：

  var module = {};
  !function(exports){
    exports.alert = function(){alert('hello')};
  }(module);
  

  或者

    var module = {};
    ~function(exports){
        exports.alert = function(){alert('hello')};
    }(module);
  

  或者

    var module = {};
    (function(exports){
        exports.alert = function(){alert('hello')};
    })(module);
  

  或者

    var module = {};
    (function(exports){
        exports.alert = function(){alert('hello')};
    }(module));
  

  等等