JS 模块化
zKing 2018-11-27 JavaScript
以下代码只是简单的逻辑示例，并不能作为实例引用
# 不使用模块化的情况
util.js，最底层的代码，封装各种函数
function getFormatDate(date,type){
// type === 1 返回 xxxx-xx-xx 的格式
// type === 2 返回 xxxx年xx月xx日 的格式
}
controlUtil.js，业务层底层代码，通过使用封装好的函数然后返回业务逻辑需要的 result
function controlFormateDate(date){
// 要求返回 xxxx年xx月xx日 的格式
return getFormatDate(date,2)
}
control.js，业务层逻辑代码
var date = new Date();
console.log(controlFormateDate(date));
test.html
代码中的函数必须是全局变量，才能暴露给使用方。会造成全局变量污染。
script 的顺序是一定的，不能更改，而且是相互依赖的，多人开发时，容易不了解每个文件各自的依赖项，导致报错。
<script src=’util.js‘></script>
<script src=’controlUtil.js‘></script>
<script src=’control.js‘></script>
# 使用模块化
使用模块化的化就不会导致全局变量污染，而且每个文件的依赖项都很清楚
# AMD
常用的模块加载器require.js 就是使用 AMD 的规范的。
简单了解一下AMD的规范
- 全局 define 函数
- 全局 require 函数
- 依赖 JS 会自动、异步加载
util.js
define(function(){
return {
getFormatDate: function (date,type){
// type === 1 返回 xxxx-xx-xx 的格式
// type === 2 返回 xxxx年xx月xx日 的格式
}
}
})
controlUtil.js
define(['./util.js'],function(util){
return {
controlFormateDate: function (date){
// 要求返回 xxxx年xx月xx日 的格式
return util.getFormatDate(date,2)
}
}
})
control.js
define(['./controlUtil.js'],function(controlUtil){
return {
printDate: function(date){
console.log(controlUtil.controlFormateDate(date));
}
}
})
main.js
require(['./control.js'],function(control){
var date = new Date();
control.printDate(date);
})
test.html
<!-- 使用require.js -->
<script src="require.min.js" data-mian='./main,js'></script>
# CommonJs
是node.js 模块化规范，现在被大量用于前端中
需要构建工具支持，一般和 npm 配合使用
CommonJs 不会异步加载JS，而是同步一次性加载出来，当然有些构建工具可以把它用于异步加载
util.js
module.export = {
getFormatDate: function (date,type){
// type === 1 返回 xxxx-xx-xx 的格式
// type === 2 返回 xxxx年xx月xx日 的格式
}
}
controlUtil.js
var util = require('util.js');
module.export = {
controlFormateDate: function (date){
// 要求返回 xxxx年xx月xx日 的格式
return util.getFormatDate(date,2)
}
}
control.js
var controlUtil = require('controlUtil.js');
var date = new Date();
console.log(controlUtil.controlFormateDate(date));
// node control.js 即可运行
AMD 和 CommonJS 的使用场景
需要异步加载 Js，使用 AMD
使用 npm 之后建议使用 CommonJS
← JS-Web-API（下） JS 异步操作 →