AMD_CMD_RequireJS

题目1: 为什么要使用模块化?

  • 最主要的目的:
    1.解决命名冲突
    2.依赖管理
  • 其他价值:
    1.提高代码可读性
    2.代码解耦和,提高复用性
    参考:前端模块化开发的价值

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

  • CMD(Common Module Definition)
    更贴近 CommonJS Modules/1.1 和 Node Modules 规范,一个模块就是一个文件;它推崇依赖就近,想什么时候 require就什么时候加载;它也没有全局 require, 每个API都简单纯粹 。代码的书写格式如下:
    define(factory);factory 为函数时,表示是模块的构造方法。执行该构造方法,可以得到模块向外提供的接口。factory 方法在执行时,默认会传入三个参数:require、exports 和 module。
    function(require,exports,module)
    require: 是一个方法,用来获取其他模块提供的接口
    exports:是一个对象,用来向外提供模块接口
    module: 是一个对象,上面存储了与当前模块相关联的一些属性和方法
    对于CMD,有代表性的是SeaJS,官网:seajs.org/docs/
//eg:
//math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});
//increment.js
define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});
//program.js
define(function(require, exports, module) {
  var inc = require('increment').increment;
  var a = 1;
  inc(a); // 2

  module.id == "program";
});
  • AMD (Asynchronous Module Definition, 异步模块定义) 指定一种机制,在该机制下模块和依赖可以异步加载。这对浏览器端的异步加载尤其适用。
    它是依赖前置 (依赖必须一开始就写好)会先尽早地执行(依赖)模块。换句话说,所有的require都被提前执行(require 可以是全局或局部 )。
    AMD规范只定义了一个函数 define,它是全局变量。用法:
    defind(id, dependencies, factory)
    id: 定义中模块的名字,可选;如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。。
    dependencies:是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。 依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。
    factory:模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。
    //示例:
    define('modal', ['jQuery', 'dialog'], function($, Dialog){
    $('.modal').show();
    Dialog.open();
    });
  • CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。
    在一个模块中,存在一个自由的变量”require”,它是一个函数。
    这个”require”函数接收一个模块标识符。
    “require”返回外部模块所输出的API。
    如果出现依赖闭环(dependency cycle),那么外部模块在被它的传递依赖(transitive dependencies)所require的时候可能并没有执行完成;在这种情况下,”require”返回的对象必须至少包含此外部模块在调用require函数(会进入当前模块执行环境)之前就已经准备完毕的输出。
    如果请求的模块不能返回,那么”require”必须抛出一个错误。
    在一个模块中,会存在一个名为”exports”的自由变量,它是一个对象,模块可以在执行的时候把自身的API加入到其中。
    模块必须使用”exports”对象来做为输出的唯一表示。
//示例:

//math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

//increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

//program.js
var inc = require('increment').increment;
var a = 1;
inc(a); 
// 2

题目3: 使用 requirejs 完善入门任务15,包括如下功能:

  1. 首屏大图为全屏轮播
  2. 有回到顶部功能
  3. 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
  4. 使用 r.js 打包应用

一、require使用原因:
1.由于加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;2.由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。
require.js的诞生,就是为了解决这两个问题
 (1)实现js文件的异步加载,避免网页失去响应;
 (2)管理模块之间的依赖性,便于代码的编写和维护。
二、require.js的使用
1.是先去官方网站下载最新版本。
下载后,假定把它放在js子目录下面,就可以加载了。
 <script src="js/require.js"></script>
2.加载require.js以后,下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。那么,只需要写成下面这样就行了:
  <script src="js/require.js" data-main="js/main"></script>
data-main属性的作用:指定网页程序的主模块(整个网页的入口代码)。
在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
3.主模块的写法:
主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。
  // main.js
requirejs.config({
baseUrl:"js/dist", //相对于被引用的页面的路径,次例为调用页面和js平级
paths:{//相对于baseUrl的路径,
"jquery":"jquery-2.1.4",
"carouse":"../app/carouse",
"waterfalls":"../app/waterfalls"
}
});
  require(['jquery', 'carouse', 'waterfalls'], function ($, carouse, waterfalls){
    // some code here
 });
4.要加载的模块文件写法为:
define(mo,[依赖],funciton(){
//to do code...
})
//mo为模块名字,一般不写,依赖为可选参数
三、r.js压缩
r.js是一个打包工具,主要是与requirejs配合对模块化后的开发进行打包压缩,因为模块化的写法会导致多个http的请求并产生性能影响,因此在发布上线前要进行文件的压缩合并。
r.js的运行需要node环境和git
1.下载r.js
npm install requirejs//会附送r.js
2.设置配置文件,文件名为build.js
({
baseUrl:"../../dist",//相对于build.js,入口文件main.js所在的路径
paths:{//相对于baseUrl的路径,
"jquery":"jquery-2.1.4",
"carouse":"../app/carouse",
"waterfalls":"../app/waterfalls"
},
name:"main",name为需要打包压缩js文件的入口文件名字
out:"../../dist/merge.js"//out为压缩完成后输出的文件名字
})
3.使用git,在r.js所在目录下执行node r.js -o build.js
4.改变require.js的 data-main, 使用压缩的merge.js
<script src="js/require.js" data-main="js/merge"></script>

页面效果

交互效果.gif

推荐阅读更多精彩内容

  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 158评论 2 1
  • 1. 为什么要使用模块化? 背景:如今CPU、浏览器性能得到了极大的提升,很多页面逻辑迁移到了客户端(表单验证等)...
    _李祺阅读 118评论 0 0
  • 题目1: 为什么要使用模块化?答:解决命名冲突依赖管理提高代码可读性代码解耦,提高复用性 题目2: CMD、AMD...
    饥人谷_桶饭阅读 97评论 0 1
  • 题目1: 为什么要使用模块化? 解决命名冲突; 可进行依赖管理; 增强代码的可读性; 代码解耦,提高代码的复用率;...
    漂于行阅读 162评论 0 0
  • 1: 为什么要使用模块化? 1.解决命名冲突2.可进行依赖管理3.增强代码的可读性4.代码解耦,提高代码的复用率 ...
    高进哥哥阅读 36评论 0 0