AMD_CMD_RequireJS
2017-06-26 本文已影响0人
李永州的FE
题目1： 为什么要使用模块化？
解决命名冲突；
可进行依赖管理；
增强代码的可读性；
代码解耦，提高代码的复用率
题目2： CMD、AMD、CommonJS 规范分别指什么？有哪些应用
- AMD（应用require.js）
采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行
语法：define(id, dependences, factory);
- CMD（应用sea.js）
它并不是异步加载，而是松散加载，只有当需要加载模块的时候，再用require方法引用模块
语法：define(factory);
- COMMONJS(用在nodejs上)
- 定义模块 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
- 模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
- 加载模块： 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象
//模块定义 myModel.js
var name = 'Byron';
function printName(){
console.log(name);
}
module.exports = {
printName: printName,
}
//加载模块
var nameModule = require('./myModel.js');
nameModule.printName();
// CMD
// math.js
define(function(requires, exports, module) {
exports.add = function(x, y) {
return x + y;
};
});
// inc.js
define(function(requires, exports, module) {
var add = require('math').add;
exports.inc = function(val) {
return add(val, 1);
};
});
// program.js
define(function(require, exports, module) {
var inc = require('inc').inc;
var a = 1;
inc(a); // 2
module.id = "program";
});
例子
- 创建html文件，引入require.js库，设置data-main属性：js/main从上到下依次依赖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task38</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" data-main="js/main"></script>
</body>
</html>
- 在html目录下新建js文件夹，创建main.js：
// main.js
require(['starting']);
console.log("starting");
- starting.js
//starting.js
define(['inc'],function(inc){
console.log(inc.getRes());
inc.add1();
console.log(inc.getRes());
inc.add1();
console.log(inc.getRes());
});
- inc.js：
// inc.js
define(function() {
var a = 1;
var inc = {
add1: function() {
return a++;
},
getRes: function() {
return a;
}
};
return inc;
});
题目3： 使用各种效果完成一个网页
1. 首屏大图为全屏轮播
2. 有回到顶部功能
3. 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据(数据在
后端 mock)
4. 使用 r.js 打包应用
