前端模块化解析与实践

前端模块化解析与实践

技术杂谈小彩虹2021-08-21 7:32:24130A+A-

老版本 js 加载 (scripts )缺点

1、污染全局作用域 2、开发人员必须主观解决模块和代码库的依赖关系 3、文件只能按照script标签的书写顺序进行加载 4、在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪

模块化定义:

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。

模块化系统能力:

  1. 定义封装的模块。
  2. 定义新模块对其他模块的依赖。
  3. 可对其他模块的引入支持。

Commonjs

CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。但如果是浏览器环境,要从服务器加载模块,这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

Example

文件:exp.js function exp () { this.foo = function () { // do someing … } this.bar = function () { //do someing … } }

var foobar = new exp(); exports.exp = exp;

引用: var test = require('./exp').exp; test.bar();

AMD

异步模块定义

define(id?, dependencies?, factory); 第一个参数 id 为字符串类型,表示了模块标识,为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在,那么模块标识必须为顶层的或者一个绝对的标识。 第二个参数,dependencies ,是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。 第三个参数,factory,是一个需要进行实例化的函数或者一个对象。

模块加载: require([module], callback) [module]:是一个数组,里面的成员就是要加载的模块; callback:是模块加载完成之后的回调函数。

RequireJS

通过一个函数来将所有所需要的或者说所依赖的模块实现装载进来,然后返回一个新的函数(模块),我们所有的关于新模块的业务代码都在这个函数内部操作,其内部也可无限制的使用已经加载进来的以来的模块。

Cmd

对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过) CMD推崇依赖就近,AMD推崇依赖前置

umd

CommonJS 服务器 AMD 浏览器

UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用Node.js模块模式。 跨平台方案 (function (window, factory) { if (typeof exports === 'object') {

    module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
 
    define(factory);
} else {
 
    window.eventUtil = factory();
}

})(this, function () { //module ... });

参考:

Amd 规范:github.com/amdjs/amdjs… Cmd 规范:github.com/seajs/seajs…

es6 module

1.Module 只执行一次 2.默认是不携带凭据的 cookie 3.静态执行,不能使用表达式或者变量,if语句里加入import语句,报错,据说后续会 加import() 返回Promise对象

总结:

模块管理,不是你说好才叫好,改的人不骂你,说明真的好~ Es6习惯了就会觉得很好用~ Ps:我还没习惯~

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们