AMD_CMD_RequireJS

1、为什么要使用模块化?

  • 解决命名冲突,当代码量很大的时候很容易有命名冲突。
  • 实现依赖管理,代码量很大时候,代码之间会有复杂的依赖关系,模块化之后方便处理这些依赖关系。
  • 提高代码的可读性
  • 代码解耦,提高复用性

2、CMD、AMD、CommonJS 规范分别指什么?有哪些应用

  • CMD
  • 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 打包应用

效果
代码

你可能感兴趣的:(AMD_CMD_RequireJS)