模块.md

模块

模块是指利用函数的词法作用域，再把私有变量函数限量返回被调用，其实模块是含有闭包的影子的。

function CoolModule() {
  var something = 'cool'
  var another = [1, 2, 3]
  function doSomething() {
    console.log(somethine)
  }
  function doAnother() {
    console.log(another.join('!'))
  }

  return {
    doSomething: doSomething,
    doAnother: doAnother
  }
}

var foo = CoolModule()
foo.doSomething() // cool
foo.doAnother() // 1!2!3

像上面的模式，在 JavaScript 中被称为模块，最常见的实现模块模式的方法通常被称为模块暴露。 模块必要有两个条件:

1. 必须有函数把内部私有变量函数都封闭起来，该函数至少被调用一次，每次调用都会创建一个新的模块实例。
2. 封闭的函数必须返回至少一个内部函数，这样才可以形成闭包，并可以访问或者修改私有的状态。

模块模式和 IIFE 结合

var foo = (function CoolModule(id) {
  function change() {
    publicAPI.identify = identify2
  }

  function identify1() {
    console.log(id)
  }
  function identify2() {
    console.log(id.toUpperCase())
  }
  var publicAPI = {
    change: change,
    identify: identify1
  }
  return publicAPI
})('foo module')

foo.identify() // foo module
foo.change()
foo.identify() // FOO MODULE

可以通过对参数实例化模块， 并通过模块实例方法，添加删除修改里面的值。

现代模块机制

// 定义模块工具类
var MyModules = (function Manager() {
  var modules = {}

  function define(name, deps, impl) {
    for (var i=0; i<deps.length; i++) {
      deps[i] = modules[deps[i]]
    }
    modules[name] = impl.apply(impl, deps)
  }

  function get(name) {
    return modules[name]
  }

  return {
    define: define,
    get: get
  }
})()

// 添加模块属性
MyModules.define('bar', [], function () {
  function hello(who) {
    return 'Let me introduce:' + who
  }
  return {
    hello: hello
  }
})

MyModules.define('foo', ['bar'], function(bar) {
  var hungry = 'hippo'
  function awesome() {
    console.log( bar.hello(hungry).toUpperCase() )
  }
  return {
    awesome: awesome
  }
})

var bar = MyModules.get('bar')
var foo = MyModules.get('foo')

console.log(
  bar.hello('hippo') // Let me instroduce: hippo
)
foo.awesome() // 

ES6 模块语法

因为 ES6 新引入了模块法语法所以可以很好地处理模块。

// bar.js
function hello(who) {
  return 'Let me introduce: ' + who
}
export hello

// foo.js
import hello from 'bar'
var hungry = 'hippo'
function awesome() {
  console.log(
    hello(hungry).toUpperCase()
  )
}
export awesome

// baz.js
import foo from 'foo'
import bar from 'bar'

console.log(
  bar.hello('rhino') // Let me introduce: rhino
)
foo.awesome() // LET ME INTRODUCE: HIPPO