谈谈前端模块化的演变历程 (2)

SeaJS模块例子:

// 定义模块 myModule.js define(function(require, exports, module) { var $ = require('jquery.js'); var foo = require('foo'); var out = foo.bar(); $('div').addClass('active'); module.exports = out; }); // 加载模块 seajs.use(['myModule.js'], function(my){ });

3、CommonJS、AMD和CMD区别

CommonJS是同步的, 主要用于服务器

AMD和CMD是异步的, 两者的模块定义和加载机制稍有不同, 主要用于浏览器

AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块,CMD`推崇就近依赖,只有在用到某个模块的时候再去require
两个都是定义的全局define函数来定义模块, define接收函数function(require, exports, module)保持一致

CMD是懒加载, 仅在require时才会加载模块; - AMD是预加载, 在定义模块时就提前加载好所有依赖

CMD保留了CommonJS风格

三、ES6的使用

ES6在语言标准的层面上, 实现了模块功能, 而且实现得相当简单, 完全可以取代CommonJS和AMD规范, 是浏览器和服务器通用的模块解决方案

ES6模块例子:

//模块定义 myModule.js const name = 'Byron'; function printName(){ console.log(name); } function printFullName(firstName){ console.log(firstName + name); } const myModule = { printName: printName, printFullName: printFullName }; export myModule; //加载模块 import myModule, { printFullName } from './myModule.js'; myModule.printName(); printFullName('Michael'); 四、最后再说说browserify和webpack

说到 browserify / webpack ,那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型,browserify / webpack 是另一种类型。

1、seajs / require :
是一种在线"编译"模块的方案,相当于在页面上加载一个 CMD/AMD 解释器。这样浏览器就认识了 define、exports、module 这些东西。也就实现了模块化。

2、browserify / webpack : 是一个预编译模块的方案,相比于上面 ,这个方案更加智能。没用过browserify,这里以webpack为例。首先,它是预编译的,不需要在浏览器中加载解释器。另外,你在本地直接写JS,不管是 AMD / CMD / ES6 风格的模块化,它都能认识,并且编译成浏览器认识的JS。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpywgx.html