AMD_CMD_RequireJS

2017-06-20  本文已影响57人  任少鹏
1: 为什么要使用模块化?

解决命名冲突;
方便依赖性管理;
提高代码的维护性和可读性;
每个模块都是单独文件,解耦提高代码复用性;

  • 模块的由来:
    随着网站逐渐的发展,嵌入网页的Javascript代码越来越庞大,而网页越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等,为了更好的管理网页的业务逻辑,产生了模块化编程的理念。
2: CMD、AMD、CommonJS 规范分别指什么?有哪些应用
//AMD 规范
/**
 * define(id?, dependencies?, factory); 
 *
 * define(['dep1', 'dep2'], function(dep1, dep2){
 *  return funciton() {};
 * });
 */
 
 define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好
    a.doSomething()
    ....
    b.doSomething()
    ...
 }) 

define(function () {
    var exports = {};
    exprots.sayHello = function () {
        alert('Hello from module:' + module.id);
    };
    return exports;
});
**************************************************************************

//CMD 规范
/**
 * define(function(require, exports, module){
 *      return funciton() {};
 * });
 * require是可以把其他模块导入进来的一个参数;
 * exports可以把模块内的一些属性和方法导出;
 * module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。
 * 在需要依赖模块时,随时调用require() 引入即可
 */
 
 define(function(require, exports, module) {   
     var a = require('./a')  
     a.doSomething()   
     ......   
     var b = require('./b') 
     // 依赖可以就近书写   b.doSomething()   
     // ... 
})
**************************************************************************

//commonJs 规范
/**
 * 在模块中,通过require()方法来引入外部的模块。
 * 上下文提供了exports 对象用于暴露当前模块的方法和变量, 并且是唯一的出口。
 * 在模块中存在一个module对象,它代表模块自身,exports是module的属性。
 */
//example.js
var invisible = function () {
  console.log("invisible");
}

exports.message = "hi";

exports.say = function () {
  console.log(message);
}

//运行下面的命令,可以输出exports对象。
var example = require('./example.js');
example
// {
//   message: "hi",
//   say: [Function]
// }
3: 使用 requirejs 完善入门任务15,包括如下功能:
 1. 首屏大图为全屏轮播
 2. 有回到顶部功能
 3. 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
 4.  使用 r.js 打包应用

预览
代码

4:RequireJS

RequireJS入门(一)
RequireJS入门(二)
RequireJS入门(三)
RequireJS进阶(一)
RequireJS进阶(二)
RequireJS进阶(三)

上一篇下一篇

猜你喜欢

热点阅读