• 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 

  • 相关阅读:
    MyEclipse2014安装插件的几种方式(适用于Eclipse或MyEclipse其他版本)
    淘淘商城 本地仓库配置和仓库jar包下载
    淘淘商城的第一天
    Oracle12c 性能优化攻略:攻略1-1:创建具有最优性能的数据库
    Eclipse开发环境配置
    Oracle12c 性能优化攻略:攻略目录表
    将日期或数据转换为char数据类型 TO_CHAR(x[[,c2],C3])
    根据条件返回相应值 decode(条件,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值)
    【功能】返回数据类型、字节长度和在内部的存储位置.DUMP(w[,x[,y[,z]]])
    alter table的用法
  • 原文地址:https://www.cnblogs.com/zhuifeng/p/4897246.html
Copyright © 2020-2023  润新知