AMD-CMD-RequireJS

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

  1. 解决命令冲突
  2. 依赖管理
  3. 代码解耦,提高代码的重用性
  4. 提高代码的可读性
    参考

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

这是针对如果不在服务器的环境下去加载模块,而是在浏览器中去向服务器去要模块去加载,就要采用异步加载的方式,所以就有AMD ,CMD解决方案。

  1. CMD规范:

(Common Module definition)通用模块定义。这个是在SeaJs在推广过程中对于模块定义的规范化产出,意思就是SeaJs在推广过程中,重新对模块化进行了定义。
语法:
define(id?dependencies?factory);//id,dependenicies可以省略,不然就跟AMD一样了。
通常在factory中是传入function,且function的参数固定:
格式:function(require,exports,module){
//require是请求的模块名,用来获取其他模块提供的模块名。
//exports是对外输出的模块接口
//module是存储当前模块相关的属性和方法
}
注意点:记得要加载requireJS文件。不然不行的。

   demo:
    //定义模块index.js  
   define(function(require,exports,module){
      var $=require('jquery.js');
      $('div').remove();  
      a={ name: 'clc', sayName:function(){
          console.log(this.name);}
        } 
            //错误的写法   //exports.a=a;//index.js这个模块的输出口                      
      exports.a=a.sayName();       //index.js这个模块的输出口
    )

    //加载在clc.js,就是在clc.js模块中加载index.js模块
     //错误的写法   // defind(funciton(require,exports,module){
    //var komo=require('index.js').a   //请求index.js这个模块。
    //komo.sayName(); //结果:clc
      //}
    
    defind(funciton(require,exports,module){
    var komo=require('index.js')   //请求index.js这个模块,并调用index.js中的a.sayName(),输出 clc;      
      }

或是直接加载: 下面的方法没有验证过,怀疑。先注释,等实验过在去注释
// seajs.use(['index.js'],function(my){
//在这里my是等于index.js模块中的a。故可以直接调用下面的方法
// my.sayName() //结果: clc
//})

  1. AMD规范:

(Asynchronous Module Definiton)异步模块定义。这个是在RequireJs在推广过程中所形成的模块化的定义方法,简称规范。

    demo: 
    //定义模块mymodule.js
    define([dependencies],function () {
        var name = 'komo';
        function sayName() {
            console.log('my name', name);
        }
        return {
        sayName: sayName
          }
        })
    //加载模块
    require(['./mymodule.js'], function (my) {
    my.sayName();
    })

AMD、CMD区别:
1 . AMD是推崇依赖前置,在定义模块的时候就要声明其依赖的模块。就是你在定义一个新的模块的时候,会使用到什么模块,你都要提前依赖好。
2 . CMD是推崇就近依赖,只有在用到某个模块的时候再去依赖,通过require来进行依赖。就是要你要什么模块,你就require你要的模块就好了。

  1. CommonJS规范:是运行在服务器端的规范,Nodejs采用这个规范。其加载模块是同步的,只有加载完成之后才能执行下一个操作。而由于所有的文件是在服务器上的,所以加载起来比较快,不用考虑异步加载的方式。

其具体指的是:

  1. 定义模块:一个单独的文件就是一个模块。每一个模块就是一个单独的作用域,换一句话说:在该模块定义的变量是无法被别的模块所读取的,除非将这个变量定义为全局变量,也就是定义为global对象的属性。

  2. 模块输出:模块就是一个出口,module.exports对象,我们将需要模块输出的内容放入到该对象中去。就是module.exports=模块的内容

  3. 加载模块:加载模块使用require方法,require方法读取一个文件并执行,返回文件内部的module.exports对象,就是require(xxx),是调用require()去调用xxx文件并执行,同时因为xxx文件中有module.exports对象,则在返回。

    demo:index.js文件
    var komo={ name: 'clc', sayName:funciton(){ console.log("this name is:",this. name}
    module.exports=komo;
    调用文件:x.js
    var a=require(index.js) ;//require(index.js)
    //var a;
    a.sayName() ------>输出this name is clc;
    题目3: 使用 requirejs 完善入门任务15,包括如下功能:

  4. 首屏大图为全屏轮播

  5. 有回到顶部功能

  6. 图片区使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)

  7. 使用 r.js 打包应用

    预览 额,要在mock中使用才行。
    后端mock的demo
    r.js
    ps: 看见有人用新浪的接口。。等等去试试看。在链接。0 .0
    小demo,新浪的

你可能感兴趣的:(AMD-CMD-RequireJS)