• js的模块化规范


    js的模块化规范常见的有:AMD,CMD,commonJS,UMD,es6

    前期在没有模块化的时候,js文件十分庞大,于是就按功能抽离划分为多个js文件。

    但是在html页面通过script的方式加载大量js文件会出项许多问题,例如文件之间的相互依赖问题,浏览器的阻塞问题,接着就有了模块化规范。

    对于前端拥有AMD,CMD,UMD,ES6的import/export

    1)AMD

    AMD是requireJS倡导的一种模块化规范,推崇依赖前置;在requireJS中模块是通过define来进行定义的,如果模块之间相互依赖,需要先将依赖模块导入进来,待导入完毕之后,在通过回掉函数的方式执行后面的代码,有效的解决了模块依赖的问题。

    // CModuleJS

    define(['AModuleJs','BModuleJS'], // AModuleJs,BModuleJS分别对应两个js文件(模块),运行至此已经下载完成,可直接使用
      function (AModuleJs, BModuleJS) {
        var a = AModuleJs();
        var b = BModuleJS;
        var c = a + b;
      })
    }
    

     参考链接:http://www.cnblogs.com/evaling/p/6722760.html

    2)CMD

    CMD则是seaJS倡导的一种解决模块之间相互依赖规范,推崇依赖就近;在seaJS中一个脚本文件就是一个模块,所有的模块代码写在define的回调函数中,传递三个参数require,exports,module,通过使用 module.exports(exports) 对象向外暴露。

    require 函数加载模块的时候,会自动拿到模块内部的 module.exports 对象

    // main.js

    define(function (require, exports, module) {
        var moduleA = require('add.js') // //等待add.js下载、执行完
        console.log(moduleA.add(10,20))
    })
    

    // add.js

    define(function (require, exports, module) {
      function add(a, b){
        return a+b;
       }
      module.exports.add = add;
    })
    

    参考链接:https://www.cnblogs.com/jingh/p/6024873.html

    比较两者的异同?
    相同:都是js模块化的异步加载方式
    不同:可以看出AMD规范是在所有以来文件加载完毕之后才执行回调函数,cmd是按需加载,代码执行到了就加载

    优缺分析:
    AMD:
    缺点:
    a)前期模块初始化的时间相对较长(需要加载所有依赖的文件)
    b)如果某一个依赖文件出错,会导致整个代码无法执行,资源浪费(双刃剑)
    c)有时候加载的依赖项由于代码变更可能会没被用到(else,case分支),但是忘记修改,会造成资源浪费
    优点:
    a)提前加载依赖文件可以提前发现错误,解决问题(双刃剑)  

    CMD:
    优点:
    a)延迟按需加载,代码执行到了就加载,可节省资源(用不到的就不加载)
    缺点:
    a)不能提前暴露错误,降低开发效率

    3)commonJS

    commonJS服务器端(nodeJS)的js模块规范,同步加载方式。因为nodeJS会被部署在服务端不存在js模块下载阻塞的问题,但是浏览器则是本地客户机存在下载js文件阻塞的问题。

    4)UMD

    更像是一种语法糖首先判断程序环境是否是nodeJS环境如果是就使用commonJS规范,在判断是否支持AMD,如果是就使用AMD规范,否则就全局注册。

    function (global, factory) {
        typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        (global.Vue = factory());
    }
    

    5)ES6模块化规范 

    使用import/export语法,在文件顶部导入需要的模块,特点是:静态化,在编译时候(决定import 不能放在执行代码中)确定模块之间的以来关系,以及输入输出变量。

    commonJS,AMD,CMD都是在执行阶段导入模块,确定依赖关系。

    参考链接: https://segmentfault.com/a/1190000015991869

     

  • 相关阅读:
    准备使用 Office 365 中国版--邮箱迁移
    准备使用 Office 365 中国版--域名
    中国版的 Office 365
    了解 Office 365
    MySQL Database on Azure 参数设置
    MySQL Database on Azure 的用户名
    Android NOTE
    从源码看Android中sqlite是怎么通过cursorwindow读DB的
    一个由proguard与fastJson引起的血案
    【转载】淘宝架构框架发展史
  • 原文地址:https://www.cnblogs.com/evaling/p/10341112.html
Copyright © 2020-2023  润新知