1.不使用模块化的情况
util.js getFormatDate函数.
a-utiljs aGetFormatDate函数,使用getFormatDate
a.js aGetFormatDate
// 引入 util.js
function getFormatDate(date, type) {
// type === 1 返回 2017-06-15
// type === 2 返回 2017年6月15日格}
// ....
}
//引入 a-util.js
function aGetFormatDate(date) {
//要求返回 2017年6月15日 格式
return getFormatDate(date, 2)
}
// 引入 a.js
var dt = new Date()
console.log(aGetFormatDate (dt))
2.使用模块化
<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>
<!--1,这些代码中的函数必须是全局变量,才能暴露给使用方。全局变量污染->
<!--2, a.js 知道要引用 a-util.is,但是他知道还需要依赖于 util.is吗?-->
// 引入 util.js
export {
getFormatDate:function(date, type) {
// type === 1 返回 2017-06-15
// type === 2 返回 2017年6月15日格}
}
}
//引入 a-util.js
var getFormatDate = require('util.js')
export {
aGetFormatDate: function (date) {
//要求返回 2017年6月15日 格式
return getFormatDate(date, 2)
}
}
// 引入 a.js
var aGetFormatDate = require('a-util.js')
var dt = new Date()
console.log(aGetFormatDate (dt))
//直接'<script src="a.js"><script>',其他的根据依赖关系自动引用
//那两个函数,没必要做成全局变量,不会带来污染和覆盖
3.AMD
require.js
全局 define 函数
全局 require 函数
依赖JS会自动、异步加载
使用require.js
// util.jS
define(function () {
var util = {
getFormatDate: function (date, type) {
if (type === 1) {
return '2017-06-15'
}
if (type ===2 ) {
return '2017年6月15日'
}
}
}
return util
})
// a-util.js
define(['./util.js'], function (util) {
var aUtil = {
aGetFormatDate: function (date) {
return util.getFormatDate(date, 2)
}
}
return aUtil
})
// a.js
define(['./a-util.js'], function (aUtil) {
var a = {
printDate: function (date) {
console.log(aUtil.aGetFormatDate(date))
}
}
return a
})
// main.js
require(['./a.js'], function (a) {
var date = new Date()
a.printDate(date)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>AMD TEST</p>
<script data-main="./main.js" src="https://cdn.bootcss.com/require.js/2.3.3/require.js"></script>
</body>
</html>
4.CommonJS
nodejs模块化规范,现在被大量用前端,原因:
前端开发依赖的插件和库,都可以从npm中获取
构建工具的高度自动化,使得使用npm的成本非常低
CommonJS不会异步加载JS ,而是同步一次性加载出来
// util.js
module.exports = {
getForiatDate: function (date, type) {
if (type === 1) {
return "2017-86-15"
}
if (type === 2) {
return "2017年6月15日"
}
}
}
// a-util.js
var util = require('util.js')
module.exports={
aGetFormatDate: function (date) {
return util.qetFormatDate (date, 2)
}
}
需要构建工具支持
一般和npm一起使用
5.AMD和CommonJS对的使用场景
需要异步加载JS,使用AMD
使用了npm之后建议使用CommonJS