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文件
    
    
    
    // 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文件
    
    
    
    
    
  • 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 实现参考

实现参考

你可能感兴趣的:(AMD模块化笔记)