题目1: 为什么要使用模块化?
- 解决命令冲突
- 依赖管理
- 代码解耦,提高代码的重用性
- 提高代码的可读性
参考
题目2: CMD、AMD、CommonJS 规范分别指什么?有哪些应用
这是针对如果不在服务器的环境下去加载模块,而是在浏览器中去向服务器去要模块去加载,就要采用异步加载的方式,所以就有AMD ,CMD解决方案。
- CMD规范:
(Common Module definition)通用模块定义。这个是在SeaJs在推广过程中对于模块定义的规范化产出,意思就是SeaJs在推广过程中,重新对模块化进行了定义。
语法:
define(id?dependencies?factory);//id,dependenicies可以省略,不然就跟AMD一样了。
通常在factory中是传入function,且function的参数固定:
格式:function(require,exports,module){
//require是请求的模块名,用来获取其他模块提供的模块名。
//exports是对外输出的模块接口
//module是存储当前模块相关的属性和方法
}
注意点:记得要加载requireJS文件。不然不行的。
demo:
//定义模块index.js
define(function(require,exports,module){
var $=require('jquery.js');
$('div').remove();
a={ name: 'clc', sayName:function(){
console.log(this.name);}
}
//错误的写法 //exports.a=a;//index.js这个模块的输出口
exports.a=a.sayName(); //index.js这个模块的输出口
)
//加载在clc.js,就是在clc.js模块中加载index.js模块
//错误的写法 // defind(funciton(require,exports,module){
//var komo=require('index.js').a //请求index.js这个模块。
//komo.sayName(); //结果:clc
//}
defind(funciton(require,exports,module){
var komo=require('index.js') //请求index.js这个模块,并调用index.js中的a.sayName(),输出 clc;
}
或是直接加载: 下面的方法没有验证过,怀疑。先注释,等实验过在去注释
// seajs.use(['index.js'],function(my){
//在这里my是等于index.js模块中的a。故可以直接调用下面的方法
// my.sayName() //结果: clc
//})
- AMD规范:
(Asynchronous Module Definiton)异步模块定义。这个是在RequireJs在推广过程中所形成的模块化的定义方法,简称规范。
demo:
//定义模块mymodule.js
define([dependencies],function () {
var name = 'komo';
function sayName() {
console.log('my name', name);
}
return {
sayName: sayName
}
})
//加载模块
require(['./mymodule.js'], function (my) {
my.sayName();
})
AMD、CMD区别:
1 . AMD是推崇依赖前置,在定义模块的时候就要声明其依赖的模块。就是你在定义一个新的模块的时候,会使用到什么模块,你都要提前依赖好。
2 . CMD是推崇就近依赖,只有在用到某个模块的时候再去依赖,通过require来进行依赖。就是要你要什么模块,你就require你要的模块就好了。
- CommonJS规范:是运行在服务器端的规范,Nodejs采用这个规范。其加载模块是同步的,只有加载完成之后才能执行下一个操作。而由于所有的文件是在服务器上的,所以加载起来比较快,不用考虑异步加载的方式。
其具体指的是:
定义模块:一个单独的文件就是一个模块。每一个模块就是一个单独的作用域,换一句话说:在该模块定义的变量是无法被别的模块所读取的,除非将这个变量定义为全局变量,也就是定义为global对象的属性。
模块输出:模块就是一个出口,module.exports对象,我们将需要模块输出的内容放入到该对象中去。就是module.exports=模块的内容
-
加载模块:加载模块使用require方法,require方法读取一个文件并执行,返回文件内部的module.exports对象,就是require(xxx),是调用require()去调用xxx文件并执行,同时因为xxx文件中有module.exports对象,则在返回。
demo:index.js文件
var komo={ name: 'clc', sayName:funciton(){ console.log("this name is:",this. name}
module.exports=komo;
调用文件:x.js
var a=require(index.js) ;//require(index.js)
//var a;
a.sayName() ------>输出this name is clc;
题目3: 使用 requirejs 完善入门任务15,包括如下功能: 首屏大图为全屏轮播
有回到顶部功能
图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
-
使用 r.js 打包应用
预览 额,要在mock中使用才行。
后端mock的demo
r.js
ps: 看见有人用新浪的接口。。等等去试试看。在链接。0 .0
小demo,新浪的