前端模块化
前端模块化
将逻辑代码拆分成独立的块,各自封装,互相独立
前端模块化的目的:使代码更易于维护,测试和重构。提升代码的可复用性和开发效率
目前流行的js模块化规范:CommonJS,AMD,CMD,ES6模块化
ES6是静态加载,其他都是动态加载
1、CommonJS
CommonJS用同步的方式加载模块,适用于服务端编程。
在服务端,模块文件都存储在本地磁盘,读取非常快,所以这样做不会有问题,最佳应用node.js
在浏览器,由于网络原因,更合理的方案时异步加载
语法糖:
输入:require
输出:module.exports
// 定义模块math.js var basicNum = 0; function add(a, b) { return a + b; } module.exports = { //在这里写上需要向外暴露的函数、变量 add: add, basicNum: basicNum } // 引用自定义的模块时,参数包含路径,可省略.js var math = require('./math'); math.add(2, 5); // 引用核心模块时,不需要带路径 var http = require('http'); http.createService(...).listen(3000);
2、AMD
AMD规范采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行
AMD是依赖前置,提前执行(最佳实践RequireJS)
所有模块加载完成后才执行主逻辑,执行顺序a和b和开发人员写的不一样,那个模块网速好,先下载完就先执行
语法糖:
require.config()
指定引用路径等
define()
定义模块
require()
加载模块
// 定义math.js模块 define(function () { var basicNum = 0; var add = function (x, y) { return x + y; }; return { add: add, basicNum :basicNum }; }); // 定义一个依赖underscore.js的模块 define(['underscore'],function(_){ var classify = function(list){ _.countBy(list,function(num){ return num > 30 ? 'old' : 'young'; }) }; return { classify :classify }; }) // 引用模块,将模块放在[]内 require(['jquery', 'math'],function($, math){ var sum = math.add(10,20); $("#sum").html(sum); });
3、CMD
CMD是就近依赖,延迟执行(SeaJs)
模块加载完成后才执行主逻辑,执行顺序a和b和开发人员写的一样
/** AMD写法 **/ define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { // 等于在最前面声明并初始化了要用到的所有模块 a.doSomething(); if (false) { // 即便没用到某个模块 b,但 b 还是提前执行了 b.doSomething() } }); /** CMD写法 **/ define(function(require, exports, module) { var a = require('./a'); //在需要时申明 a.doSomething(); if (false) { var b = require('./b'); b.doSomething(); } });
4、ES6模块化
在编译的时候确定依赖关系,以及输入输出变量
语法糖:
输入:import
输出:export