1、为什么要使用模块化?
- 解决命名冲突,当代码量很大的时候很容易有命名冲突。
- 实现依赖管理,代码量很大时候,代码之间会有复杂的依赖关系,模块化之后方便处理这些依赖关系。
- 提高代码的可读性
- 代码解耦,提高复用性
2、CMD、AMD、CommonJS 规范分别指什么?有哪些应用
- CMD即 Common Module Definition,中文为通用模块定义,它是一个在浏览器端模块化开发的规范
- 使用CMD规范进行开发需要使用SeaJS
- 语法
// 语法
define(id?, dependencies?, factory);
id:可选(推荐不写,默认为文件名),用来定义模块的标识,通常用文件名作为模块id
dependencies:可选(推荐不写),是一个当前模块依赖的模块名称数组(因为CMD推崇依赖就近,因此一般不在此处指定)
factory:function(require, exports, module)
require(id):require 是一个方法,接受模块标识作为唯一参数,用来获取其他模块提供的接口
exports 是一个对象,用来向外提供模块接口
module 是一个对象,上面存储了与当前模块相关联的一些属性和方法
- AMD
- AMD即 Asynchronous Module Definition,中文名为异步模块定义。它是一个在浏览器端模块化开发的规范
- 使用AMD规范进行开发需要使用RequireJS
- requireJS主要解决两个问题:
- js文件之间的依赖关系:被依赖的文件需要早于依赖它的文件加载到浏览器
- js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
- 语法
// 语法
define(id?, dependencies, factory);
id:可选参数,用来定义模块的标识,如果没有提供该参数,默认为该模块对应的脚本文件名(去掉拓展名)
dependencies:是一个当前模块依赖的模块名称数组
factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值
- CommonJS
- CommonJS是起源于服务器端模块化开发的规范
- 定义模块:一个单独的文件就是一个模块,每一个模块都是一个单独的作用域(在模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性)
- 模块输出:模块只有一个出口 module.exports 对象,需要将模块希望输出的内容放在该对象中
- 加载模块:加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的 module.exports 对象
3、使用 requirejs 完善入门任务15,包括如下功能:
1. 首屏大图为全屏轮播
2. 有回到顶部功能
3. 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
4. 使用 r.js 打包应用
效果
代码