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

效果
代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 685评论 3 1
  • 题目1: 为什么要使用模块化? 最主要的目的:1.解决命名冲突2.依赖管理其他价值:1.提高代码可读性2.代码解耦...
    saintkl阅读 320评论 0 0
  • 题目1: 为什么要使用模块化? 解决命令冲突 依赖管理 代码解耦,提高代码的重用性 提高代码的可读性参考 题目2:...
    Komolei阅读 255评论 0 0
  • 为什么要使用模块化? 1.解决命名冲突2.依赖管理3.提高代码可读性4.代码解耦,提高复用性 CMD、AMD、Co...
    小囧兔阅读 268评论 0 0
  • 服务奉献是思想素质的重要体现。奉献也是体现社会价值的重要一点。 总有很多古今中外的教育者谈到奉献精神对于一个人实现...
    思书者阅读 1,448评论 0 1