AMD_CMD_RequireJS

题目1: 为什么要使用模块化?
  • 最主要的目的:
    解决命名冲突
    依赖管理

  • 其他价值:
    提高代码可读性
    代码解耦,提高复用性

题目2: CMD、AMD、CommonJS 规范分别指什么?有哪些应用
  • CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同
    语法(Sea.js 推崇一个模块一个文件,遵循统一的写法define):
    define(id?, deps?, factory)
    因为CMD推崇一个文件一个模块,所以经常就用文件名作为模块id
    CMD推崇依赖就近,所以一般不在define的参数中写依赖,而在factory中写。factory有三个参数
    function(require, exports, module)
    require
    requirefactory 函数的第一个参数。
    require(id)
    require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。

    exports
    exports 是一个对象,用来向外提供模块接口。

    module
    module 是一个对象,上面存储了与当前模块相关联的一些属性和方法。

  • AMD 即Asynchronous Module Definition,中文名是异步模块定义的意思。它是一个在浏览器端模块化开发的规范。AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。
    requireJS主要解决两个问题:

    • 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器。

    • js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长。
      一个使用requireJS的例子

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

      语法(requireJS定义了一个函数 define,它是全局变量,用来定义模块):
      define(id?, dependencies?, factory);
      id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)。
      dependencies:是一个当前模块依赖的模块名称数组。
      factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值在页面上使用require函数加载模块。

      require([dependencies], function(){});
      require()函数接受两个参数。

      第一个参数是一个数组,表示所依赖的模块。
      第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
      require()函数在加载依赖的函数的时候是异步加载的,这样浏览器不会失去响应,它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。

         // 定义模块  myModule.js
         define(function(require, exports, module) {
           var $ = require('jquery.js')
           $('div').addClass('active');
         });
      
         // 加载模块
         seajs.use(['myModule.js'], function(my){
         
         });
      
  • CommonJS:
    用于服务器端模块化,有一个全局性方法require(),用于加载模块。

    语法:

      require(dependences) // 加载依赖模块
      exports.factory = function(){ // ...};  // 使用”exports”对象来做为输出的唯一表示。
    
题目3: 使用 requirejs 完善入门任务15,包括如下功能:

代码

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

推荐阅读更多精彩内容

  • 为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理 其他价值提高代码可读性代码解耦,提高复用性 CMD、AM...
    Eazer阅读 157评论 2 1
  • 1. 为什么要使用模块化? 随着 Web2.0时代的到来,,Ajax 技术得到广泛应用,jQuery 等前端库层出...
    D一梦三四年阅读 45评论 0 0
  • 题目1: 为什么要使用模块化? 最主要的目的:1.解决命名冲突2.依赖管理其他价值:1.提高代码可读性2.代码解耦...
    saintkl阅读 52评论 0 0
  • 题目1:为什么要使用模块化? 最主要的目的:解决命名冲突依赖管理其他价值提高代码可读性代码解耦,提高复用性 在Ja...
    无目的阅读 61评论 0 0
  • 1、为什么要使用模块化? 最主要的目的:  ▪ 解决命名冲突  ▪ 依赖管理 其他价值:  ▪ 提高代码可读性  ...
    Jeff12138阅读 31评论 0 0