zoukankan      html  css  js  c++  java
  • javaScript模块化规范ADM与CMD

    模块化:模块化是指在解决某一个复杂问题时,依照一种分类的思维把问题进行系统性的分解处理,可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。

    模块化系统所必须的能力:

    1、定义封装的模块

    2、定义新模块对其他模块的依赖

    3、可对其他模块的引入支持

    AMD模块规范:其实就是异步模块定义,所有的模块将被异步加载,模块加载不影响后面语句运行,所有依赖某些模块的语句均放置在回调函数中。 

    AMD规范定义了一个全局变量define函数,格式为:define(id, dependencies, factory)

    第一个参数:id为字符串类型,表示模块标识,为可选参数,如果忽略这个参数,则模块标识默认为加载器中被请求的文件的URL为模块标识。如果需要填写这个id,则最好是加载器中该模块的URL(填写id一般是为了合并多个模块减少网站中HTTP请求)

    第二个参数:dependencies是一个数组,为可选参数,里面存放着当前模块所依赖的其他模块标识.

    第三个参数:factory是一个函数或者对象

    案例:创建模块

    define('./bsSave', ['./ajax', './lib/domApi'], function (ajax, domApi){

      var remArr = [];

      //模块代码

      return remArr;

    })

    //无依赖模块可以直接使用对象字面量来定义

    define({

      add: function (x, y){return x + y;},

      age: 25,

      name: 'luke'

    })

    CMD模块规范:在CMD中,一个模块就是一个文件。全局函数define,用来定义一个模块。格式为:define(id, dependencies, factory);

    第一个参数:id为字符串类型,表示模块标识,为可选参数,如果忽略这个参数,则模块标识默认为加载器中被请求的文件的URL为模块标识。如果需要填写这个id,则最好是加载器中该模块的URL(填写id一般是为了合并多个模块减少网站中HTTP请求)

    第二个参数:dependencies是一个数组,为可选参数,里面存放着当前模块所依赖的其他模块标识。

    第三个参数:factory可以是一个函数,也可以为对象或者字符串。当factory为对象或者字符串时,表示模块的接口就是该对象或者字符串。

    案例:定义一个模块

    define('./BsSave', ['./ajax'], function (require, exports, module){

      var BsSave = {};

      //模块代码

      return BsSave

    })

    //定义JSON数据模块

    define({"name": "csh"})

    //通过字符串定义模板模块

    define('this is {{data}}');

    //factory为函数的时候,表示模块的构造方法,通过return可以输出该模块的数据

    define(function (){

      var modArr = [];

      //模块代码

      return modArr; //输出该模块的数据

    })

    当模块的第三个参数是函数的时候,这个函数也有三个参数,分别是requireexportsmodule

    require是一个方法,接受模块标识作为唯一的参数,用来引入其他模块,require方法是同步往下执行的,需要异步加载模块可以使用require.async方法,可以使用require.resolve方法来返回模块路径

    案例:加载模块

    define(function(require, exports, module){

      //同步加载模块

      var ajax = require('./ajax');

      //异步加载模块

      require.async('./ajax', function (ajax){

        ajax.get();

      })

      //返回模块的路径,但它不会加载模块

      require.resolve('./ajax');

    })

    exports用来向外提供模块接口,当然直接使用return也是可以的

    案例:为模块向外提供接口

    define(function(require, exports, module){

      exports.name = 'csh';          //向外提供的属性

      exports.do = function (){};     //向外提供的方法

      //这样也可以向外提供接口

      return {

        name: 'csh',

        do: function (){}

      }

      //这样也可以向外提供接口

      module.exports = {

        name: 'csh',

        do: function (){}

      }

      //注意,以下方式是错误的

      exports = {

        name: 'csh',

        do: function (){}

      }

    })

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

    module.id为模块的唯一标识。

    module.uri根据模块系统的路径解析规则得到模块的绝对路径。

    module.dependencies表示模块的依赖。

    module.exports当前模块对外提供的接口。

    下面是玉伯对于 AMD 与 CMD 区别的解释(详细的区别可对照上文)

    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

    类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对模块定义的规范化产出还有不少

    这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。

    目前这些规范的实现都能达成浏览器端模块化开发的目的。

    扩展阅读:

    AMD规范文档 https://github.com/amdjs/amdjs-api/wiki/AMD

    RequireJS官网接口文档  http://www.requirejs.org/docs/api.html 

    CMD 模块定义规范 https://github.com/seajs/seajs/issues/242

    SeaJS API快速参考 https://github.com/seajs/seajs/issues/266

    知乎  AMD 和 CMD 的区别有哪些? http://www.zhihu.com/question/20351507 

  • 相关阅读:
    Delphi公用函数单元
    Delphi XE5 for Android (十一)
    Delphi XE5 for Android (十)
    Delphi XE5 for Android (九)
    Delphi XE5 for Android (八)
    Delphi XE5 for Android (七)
    Delphi XE5 for Android (五)
    Delphi XE5 for Android (四)
    Delphi XE5 for Android (三)
    Delphi XE5 for Android (二)
  • 原文地址:https://www.cnblogs.com/zhuifeng/p/4897246.html
Copyright © 2011-2022 走看看