题目1: 为什么要使用模块化?
前端开发中,起初只要在script
标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js
得到重视,应用也广泛起来了,jQuery
,Ajax
,Node.Js
,MVC
,MVVM
等的助力也使得前端开发得到重视,也使得前端项目越来越复杂,然而,JavaScript
却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module
)了,那么什么是模块呢?
一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。模块开发需要遵循一定的规范,否则就都乱套了。
模块化的目的:
- 解决命名冲突
- 依赖管理
- 提高代码可读性
- 代码解耦,提高复用性
题目2: CMD、AMD、CommonJS 规范分别指什么?有哪些应用
CommonJS
CommonJS
是服务器端模块的规范,Node.JS
采用了这个规范。Node.JS
首先采用了js
模块化的概念。根据CommonJS
规范,一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global
对象的属性。
输出模块变量的最好方法是使用module.exports
对象。
// 文件名: foo.js
// 加载模块
var $ = require('./jquery');
var _ = require('./underscore');
// 定义方法
function a(){}; // 私有方法,因为它没在module.exports中 (见下面)
function b(){}; // 公共方法,因为它在module.exports中定义了
function c(){}; // 公共方法,因为它在module.exports中定义了
// 导出接口
module.exports = {
b: b,
c: c
};
AMD
AMD
即Asynchronous Module Definition
,中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范,服务器端的规范是CommonJS
,模块将被异步加载,模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。AMD
是 RequireJS
在推广过程中对模块定义的规范化的产出。
// 文件名: foo.js
define(['jquery', 'underscore'], function ($, _) {
// 方法
function a(){}; // 私有方法,因为没有被返回(见下面)
function b(){}; // 公共方法,因为被返回了
function c(){}; // 公共方法,因为被返回了
// 对外提供接口
return {
b: b,
c: c
}
});
CMD
CMD
即 Common Module Definition
通⽤模块定义,CMD
规范是国内发展出来的,就像AMD
有个requireJS
,CMD
有个浏览器的实现SeaJS
,SeaJS
要解决的问题requireJS
⼀样,只不过在模块定义⽅式和模块加载(可以说运⾏、解析)时机上有所不同。
Sea.js
推崇⼀个模块⼀个⽂件,遵循统⼀的写法。
// 文件名: foo.js
define(function(require, exports, module) {
var $ = require('./jquery.js')
var _ = require('./underscore');
// 方法
function a(){}; // 私有方法,因为没有被返回(见下面)
function b(){}; // 公共方法,因为被返回了
function c(){}; // 公共方法,因为被返回了
// 对外提供接口
exports={
b: b,
c: c
}
});
题目3: 使用 requirejs 完善入门任务15,包括如下功能:
- 首屏大图为全屏轮播
- 有回到顶部功能
- 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
- 使用 r.js 打包应用
瀑布流布局需要开启服务器,本地验证通过
使用r.js打包: