Javascript——模块化开发

  • 了解模块化开发

    • 模块化开发是指将一类方法封装在一个 JS文件 中,每一个不同的功能类的 JS文件 就是一个模块,然后通过引入不同功能的文件相互配合,实现目标效果
    • 引入多个文件出现的问题

      1. 文件引入顺序,被依赖文件必须在使用被依赖文件内方法的文件前面
      2. 当多个JS文件时,产生文件依赖关系不清晰问题
      3. JS 文件内部全局变量污染
  • 模块化开发发展史

  • 没有模块化开发阶段

    1. 按照依赖顺序进行进入JS文件,最后引入整合文件
    2. 后期无法进行维护代码,依赖关系不清晰
    3. 全局变量污染,模块文件中的全局变量可以在其他模块或整合文件中直接进行使用,其他文件也无法定义相同的变量名
    // 模块文件a
    <script src="a.js"></script>
    
    // 模块文件b
    // 文件内部可能使用了 a 文件内部方法,所以需要在 a 文件后面引入
    <script src="b.js"></script>
    
    // 功能整合文件main
    // 文件是整合文件,使用了 a b 文件内的方法,所以 a b 需要引入在 main 文件前面
    <script src="main.js"></script>
    
    // a.js
    var num = 100;
    function af1(){
        console.log('a文件内的af1方法')
    }
    function af2(){
        console.log('a文件内的af2方法')
    }
    
    // b.js
    function bf1(){
        af2();
        console.log('使用了a文件内的af2方法')
    }
    function bf2(){
        console.log('a文件内的bf2方法')
    }
    
    // main.js
    console.log(num) // num 是一个全局变量,所以在main文件内可以使用
    af1();
    bf1();
  • IIFE伪模块化开发阶段(非官方)
    原理:在JS文件中书写一个自执行函数,然后将方法写在自执行函数体内,但方法是自执行函数内的局部变量,外界无法使用,所以需要将外界需要的方法挂载在全局上

    解决的问题:

    1. 通过自执行函数的参数可知道依赖了哪些模块
    2. 在自执行函数中定义的变量属于局部变量,没有全局变量污染问题

    产生的问题:

    1. 文件引入顺序不能动
    2. 虽然知道依赖了哪些模块,但是不知道模块是哪个文件的
    // 模块文件a
    <script src="a.js"></script>
    
    // 模块文件b
    // 文件内部可能使用了 a 文件内部方法,所以需要在 a 文件后面引入
    <script src="b.js"></script>
    
    // main 文件是整合文件,使用了 a b 文件内的方法,所以 a b 需要引入在 main 文件前面
    <script src="main.js"></script>
    
    
    // 模块文件a.js
    (function(){
        // 自执行函数执行结束后,变量自动销毁
        var num = 100;
        function af1(){
            console.log('a文件内的af1方法')
        }
        function af2(){
            console.log('a文件内的af2方法')
        }
    
        // 将变量和方法挂载在全局上,其他文件可进行使用
        window.madA={
          af1,
          af2,
          num
        }
    })()
    
    // 模块文件b.js
    (function(madA){
    // 这里的参数接收的是自执行函数参过来的参数
        function bf1(){
            madA.af2();
            console.log('使用了a文件内的af2方法')
        }
        function bf2(){
            console.log('a文件内的bf2方法')
        }
        // 将其他文件需要用到的方法挂在在全局上
        window.madB={
            bf1,
            bf2
        }
    // 传入其他模块文件挂载在全局上的对象名,在函数内进行使用内部变量和方法
    })(madA)
    
    // 模块文件main.js
    (function(madA,madA){
        console.log(madA.num) // num 是其他文件挂载在全局上的变量,所以在main文件内可以使用
        madA.af1();
        madB.bf1();
    })(madA,madB)
  • commonJS模块化开发标准
    CommmonJS用于node端模块化开发(只能用于后端)
    模块化开发规范:

    1. 通过module.exports或exports来暴露模块
    2. 通过require来加载模块

    CommmonJS的特点:

    1. 同步加载,一般用于node端
    2. 一次加载,多次使用。对同一个模块而言,只会运行一次,多次使用时会从缓存中获取
    3. 模块加载的顺序,按照它出现的顺序
    4. 代码都运行在模块作用域,不会造成全局污染
    //a.js文件
    var math = {
        add:function(a,b){
            return a+b;
        }
    }
    // module是代表当前模块,通常通过module.exports来暴露模块
    module.exports = math    
    
    //b.js
    // 引入依赖模块
    var math = require('./a.js')//模块依赖,通过require导入模块
    console.log(math.add(1,2))        
  • AMD模块化标准(非官方)阶段——前置依赖
    由社区发起,没有关键字,并且需要引入第三方文件require.js使用
    AMD模块化规范:

    1. 通过define()方法定义模块
    2. 通过require()方法加载模块
    3. 通过define(['依赖文件地址'···],function(接收依赖文件返回值){}),在模块文件中导入另一个模块文件

    解决的问题:

    1. 文件依赖清晰
    2. 解决全局变量污染问题

    产生的问题:
    前置依赖:文件会在打开页面时加载,首屏加载时间长,后期流畅

    // 引入第三方文件
    <script src="require.js"></script>
    
    // 定义一个模块文件
    define(function() {
        var helloInLang = {
          en: 'Hello world!',
          es: '¡Hola mundo!',
          ru: 'Привет мир!'
        };
        // 暴露内容
        return {
            sayHello: function (lang) {
                   return helloInLang[lang];
            }
        };
    });
    // 引入一个模块
    define(['./lib/greeting'], function(greeting) {
        // 这个形参接收的就是模块返回的方法或内容
        var phrase = greeting.sayHello('en');
    });
    
    // 在整合文件中使用其他模块文件中的变量和方法
    require(['./modules/module1'], function (module1) {
          module1.sayHello('hello')
    })
  • CMD通用模块化标准(非官方)——即时依赖
    在社区中,由淘宝“玉伯”开发的CMD模块化标准,依赖第三方文件使用
    定义模块:define(function(require, exports, module){})

    1. require()参数用于导入其他文件
    2. exports参数用于将文件导出内容

    解决的问题:解决前置依赖问题,加载时按需加载,也提供了依赖前置的接口

    存在的问题:即时依赖,首屏加载快,操作不够流畅

    // 引入第三方文件
    <script src="./js/sea.js"></script>
    
    // 定义一个模块文件
    define(function(require, exports, module) {
        // 定义方法
        function fn(){
            console.log("CMD")
        }
    
        // 在模块文件中导入其他模块
        var mod_A = require('依赖文件地址');
    
        // 导出内容
        module.exports = {fn}
    })
    
    // 整合文件
    define(function(require, exports, module) {
    seajs.use(['依赖文件地址'], function(modA){调用方法等})
    });
  • ES6(ES2015)模块化标准
    ES6 语法中自带一个模块化标准,提供了关键字,需要在 <script>标签添加 type=“module”属性,并且只有在服务器上打开才有效
    导出语法:

    1. export default 导出内容
    2. export var 变量名=值

    导入语法:

    1. import 变量 from '模块文件地址'
    2. import {接收变量} from ‘模块文件地址’
    3. 解决前置依赖问题语法:import('模块文件地址').then(function(形参){})

    解决的问题:不需要依赖第三方文件,每个文件都可以是模块文件,或整合文件

    存在的问题:需要兼容处理

    //定义一个模块
    export default {
        // 以对象或者数组到处
        function fn (lang) {
            return helloInLang[lang];
        }
    };
    // 引入一个模块
    import fn from "模块文件";
19 声望
2 粉丝
0 条评论
19 声望
2 粉丝
宣传栏