淡淡理解下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的写法。