AMD模块化笔记

模块化

1 什么是模块化

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
2 为什么需要模块化

1 应用越大那么代码也越复杂
2 模块化利于解耦，降低复杂性和提高可维护性
3 应用部署可以优化代码，减少 http 请求（避免多模块文件造成的多请求）。

3 模块化历史

1 无模块，全局作用域冲突；

function m1(){
//...
}
function m2(){
//...
}

2 namespace 封装，减少暴露给全局作用域的变量，本质是对象，不安全(外部可以直接修改模块内部的数据)

let myModule = {
data: 'www.baidu.com',
foo() {
    console.log(`foo() ${this.data}`)
},
bar() {
    console.log(`bar() ${this.data}`)
}
}
myModule.data = 'other data' //能直接修改模块内部的数据
myModule.foo() // foo() other data

3 IIFE 模式：匿名函数自调用(闭包)

作用: 数据是私有的, 外部只能通过暴露的方法操作
编码: 将数据和行为封装到一个函数内部, 通过给 window 添加属性来向外暴露接口
问题: 如果当前这个模块依赖另一个模块怎么办?

// index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
    myModule.foo()
    myModule.bar()
    console.log(myModule.data) //undefined 不能访问模块内部数据
    myModule.data = 'xxxx' //不是修改的模块内部的data
    myModule.foo() //没有改变
</script>

// module.js文件
(function(window) {
let data = 'www.baidu.com'
//操作数据的函数
function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
}
function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
}
function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
}
//暴露行为
window.myModule = { foo, bar } //ES6写法
})(window)

4 IIFE 模式增强 : 引入依赖

// module.js文件
(function(window, $) {
let data = 'www.baidu.com'
//操作数据的函数
function foo() {
    //用于暴露有函数
    console.log(`foo() ${data}`)
    $('body').css('background', 'red')
}
function bar() {
    //用于暴露有函数
    console.log(`bar() ${data}`)
    otherFun() //内部调用
}
function otherFun() {
    //内部私有的函数
    console.log('otherFun()')
}
//暴露行为
window.myModule = { foo, bar }
})(window, jQuery)

 // index.html文件
<!-- 引入的js必须有一定顺序 -->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">
    myModule.foo()
</script>

4 模块化规范
- AMD 模块化加载原理
  
  1 找到入口文件所需的依赖。
  2 根据 require.config 定义全局参数 baseurl，根据 url 实例化 module（Module.use(ids, callback, id)）
  3 在 Module.use 函数中实例化 module 后，调用 module.load()方法，同时将 require 中传入的 callback 保存为 module 实例的 factory 属性。
  4 load 方法中将模块的依赖放进去，再判断该 module 的 status，然后创建 script 标签请求对应 url 的模块。
  5 如果该 module 的依赖全都加载出来后，调用 module 的 factory（即执行回调），然后将 module 的 exports 属性生成出来。
  6 然后通知该 module 的依赖，重复 3-6 步骤，递归的通知到入口文件。

AMD 实现参考

实现参考

最后编辑于：2018.12.24 16:14:43