淡淡理解下AngularJS中的module

在AngularJS中module是一個核心的存在，包括了很多方面，比如controller, config, service, factory, directive, constant, 等等。

在Javascript中如何實現類似module的功能呢？

或者說，我們定義一個函數，如何把函數內的函數向外界開放呢？

我想，可以把函數中的函數作為一個對象的鍵值，從而向外界開放。

這樣說很籠統，其實是這樣的：

var myModule = function outerFuction(){
    var method1 = new function(){}
    var method2 = new function(){}
    
    return{
        method1: method1,
        method2, method2
    }
}

var o = outerFucntion();
o.method1();
o.mehtod2();

舉個銀行存錢取錢的例子。

var account = function(){

  //餘額
  var balance = 0;

  //存錢
  var deposit = function(money){
    balance+=money;
    console.log("卡上餘額為： " + balance);
    notifyUser();
  }

  //取錢
  var withdraw = function(money){
    balance -= money;
    console.log("卡上餘額為： " + balance)
    notifyUser();
  }

  //通知用戶
  var notifyUser = function(){
    console.log("卡上餘額有變動");
  }

  return {
    deposit:deposit,
    withdraw: withdraw
  }

}

var a1 = account();
a1.deposit(100);
a1.withdraw(50);

再來到AngularJS，我們已經習慣了這樣寫：

var app = angular.module('app',[]);

app.config();
app.controller();
app.factory();
...

也就是獲取到module,再調用module提供給我們的方法。

查看angular.js源代碼，發現：

angular = window.angular || (window.angular = {} )

這是為什麼我們能使用angular這個變數的原因。

...
var moduleInstace = {
        provider: invokeLater('$provide','provider'),
        factory: invokeLater('$provider', 'factory'),
        service: invokeLater('$provider', 'service'),
        value: invokeLater('$provide', 'value'),
        constant: invokeLater('$provider', 'constant'...),
        animation: invokeLater('$animateProvider',...),
        filter: invokeLater('$filterProvider',...),
        controller: invokeLater('$controllerProvider',...),
        directive: invokeLater('$compileProvider',...),
        config: config,
}

return moduleInstance;
...

以上的寫法正是module的寫法。