浅谈前端js面试--开发环境-模块化--requirejs
2017-07-25 本文已影响0人
挨踢的菜鸟
- 不使用模块化
- util.js getFormatDate函数 最底层的函数
- a-util.js aGetFormatDate 使用依赖getFormatDate （业务层的底层）
- a.js aGetFormatDate （a业务）一层一层的引用
代码如下：
// util.js
function getFormatDate(date,type){
// type === 1 返回 2017-06-15
// type === 2 返回 2017年06月15日格式
// ...
}
// a-util.js
function aGetFormatDate(date){
//要求返回 2017年6月15日 格式
return getFormatDate(date,2)
}
// a.js
var dt = new Date()
console.log(aGetFormatDate(dt))
使用
<script src="util.js"></script>
<script src="a-util.js"></script>
<script src="a.js"></script>
<!--1.这些代码中的函数必须是全局变量，才能暴露给使用方。全局变量污染-->
<!--2.a.js 知道要引用 a-util.js,但是他知道还需要依赖于util.js吗？-->
依赖关系根本不清楚，如果顺序错了，会报错。
- 使用模块化（设计一种理想状态，不一定能实现）
//util.js
export {
getFormatDate:function(date,type){
// type === 1 返回 2017-06-15
// type === 2 返回 2017年06月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>',其他的根据依赖关系自动引用
//那两个函数,没必要做成全局变量，不会嗲来污染和覆盖
AMD
- require.js requirejs.org/
- 全局define函数
- 全局require函数
- 依赖js会自动、异步加载
使用require.js
//util.js
define(
function() {
getFormatDate: function(date, type) {
// type === 1 返回 2017-06-15
// type === 2 返回 2017年06月15日格式
// ...
}
}
)
// a-util.js
define(
[. / util.js],
function(util) {
return {
aGetFormatDate: function(date) {
//要求返回 2017年6月15日 格式
return getFormatDate(date, 2)
}
}
}
)
// a.js
define(
[. / a - util.js],
function(autil) {
return {
printDate: function(date) {
console.log(aUtil.aGetFormatDate(date))
}
}
}
)
// main.js
require(
['./a.js'],
function(a) {
var date = new Date()
a.printDate(date);
}
)
使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<script src="./require.min.js" data-main="./main.js"></script>
</body>
</html>
AMD示例
AMD示例
