AMD_CMD_RequireJS

[yongheng2016]

题目1： 为什么要使用模块化？

前端模块化：用来隔离、组织复杂的JavaScript代码，一个模块就是实现特定功能的文件，想要什么功能，就加载什么模块。

主要目的：

• 解决命名冲突
• 依赖管理

其它价值：

• 提高代码可读性
• 代码解耦，提高复用性

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

• CommonJS

  • 所有代码都运行在模块作用域，不会污染全局作用域。

  • 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。

  • 模块加载的顺序，按照其在代码中出现的顺序

  • 典型应用就是Nodejs

  • DEMO

//模块定义
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

//模块加载
var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

参考：http://javascript.ruanyifeng.com/nodejs/module.html

• AMD

  • 模块定义： define([id], [dependencies], factory)

    • [id]可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
    • [dependencies]，是一个当前模块依赖的模块名称数组
    • [factory]，工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

  • 模块加载：（AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块，所有模块加载完成之后的回调函数。） require([module], callback)

    • module，表示所需要加载的模块
    • callback，模块加载完成后的回调函数

  • 典型应用：Require.js

  • DEMO

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName()
})

参考

• [x] http://javascript.ruanyifeng.com/tool/requirejs.html#toc4

• [x] https://segmentfault.com/a/1190000004873947

• CMD

  • 模块定义：(CMD是SeaJS 在推广过程中对模块定义的规范化产出) define(id?, deps?, factory)
    • 一个文件一个模块，经常用文件名作为id
    • 推崇依赖就近，一般不再define参数中写依赖 ，而是在factory中 function(require, exports, module)
  • 模块加载：
  • 典型应用：sea.js
  • DEMO

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName(); });

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

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

预览