• 慈善基金进社区 点对点帮扶居民 2019-04-10
  • 三面悬崖的3197哨所 战士背饮用水要走"天梯" 2019-04-10
  • 习近平《在深入推动长江经济带发展座谈会上的讲话》单行本出版 2019-04-09
  • 女子在自家院子乘凉 被后山滚落千斤巨石砸死 2019-04-07
  • 很深刻。当今城市化基本出于房地资本的繁衍需要与维持粗陋GDP的无奈,越来越显露其反动性。 2019-04-03
  • 故都之秋,惊艳了整个华东文章中国国家地理网 2019-04-03
  • 中国虚拟现实创新创业大赛南昌赛区颁奖仪式举行 2019-03-31
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-03-31
  • 蔡英文,赖清德,李登辉,陈水扁..... 2019-03-24
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-03-22
  • 上海电影节第三日:电影市场热议产业新形势 2019-03-22
  • 特朗普雇佣资深律师应对涉俄调查 2019-03-18
  • 两部门:支持建设一批乡土经济活跃的农业产业强镇 2019-03-17
  • 法国总统马克龙首次访华 法国居民期待成果 2019-03-16
  • 黑龙江p62历史开奖结果

    2月8日p62开奖结果查询:JavaSript??楣娣?- AMD规范与CMD规范介绍

    稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-07-01   阅读次数: 25   查看权限: 游客查看

    在了解AMD,CMD规范前,还是需要先来简单地了解下什么是??榛?,??榛??

    黑龙江p62历史开奖结果 www.tgpe.net ??榛侵冈诮饩瞿骋桓龈丛游侍饣蛘咭幌盗械脑郁畚侍馐?,依照一种分类的思维把问题进行系统性的分解以之处理。??榛且恢执砀丛酉低撤纸馕虢峁垢侠?,可维护性更高的可管理的??榈姆绞???梢韵胂笠桓鼍薮蟮南低炒?,被整合优化分割成逻辑性很强的??槭?,对于软件是一种何等意义的存在。对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得“有理可循”。

    还有一些对于??榛恍┳ㄒ档亩ㄒ逦耗?榛侨砑低车氖粜?,这个系统被分解为一组高内聚,低耦合的???。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好??榻惺褂眉纯?。

    首先,既然是??榛杓?,那么作为一个??榛低乘匦氲哪芰Γ?br />     1. 定义封装的???。
        2. 定义新??槎云渌?榈囊览?。
        3. 可对其他??榈囊胫С?。

        好了,思想有了,那么总要有点什么来建立一个??榛墓娣吨贫劝?,不然各式各样的??榧釉胤绞街换峤纸恋酶炻?。那么在JavaScript中出现了一些非传统??榭⒎绞降墓娣?CommonJS的??楣娣?,AMD(Asynchronous Module Definition),CMD(Common Module Definition)等。

    AMD 与 RequireJS
    AMD

    Asynchronous Module Definition,用白话文讲就是 异步??槎ㄒ?,对于 JSer 来说,异步是再也熟悉不过的词了,所有的??榻灰觳郊釉?,??榧釉夭挥跋旌竺嬗锞湓诵?。所有依赖某些??榈挠锞渚胖迷诨氐骱?。

    AMD规范定义了一个自由变量或者说是全局变量 define 的函数。
    define( id?, dependencies?, factory );    
    AMD规范  https://github.com/amdjs/amdjs-api/wiki/AMD
    第一个参数 id 为字符串类型,表示了??楸晔?,为可选参数。若不存在则??楸晔队Ω媚隙ㄒ逦诩釉仄髦斜磺肭蠼疟镜谋晔?。如果存在,那么??楸晔侗匦胛ゲ愕幕蛘咭桓鼍缘谋晔?。
    第二个参数,dependencies ,是一个当前??橐览档?,已被??槎ㄒ宓哪?楸晔兜氖樽置媪?。
    第三个参数,factory,是一个需要进行实例化的函数或者一个对象。

    创建??楸晔段?alpha 的???,依赖于 require, export,和标识为 beta 的???/p>

        define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
            export.verb = function(){
                return beta.verb();
                // or:
                return require("beta").verb();
            }
        });

    一个返回对象字面量的异步???/p>

        define(["alpha"], function( alpha ){
            return {
                verb : function(){
                    return alpha.verb() + 1 ;
                }
            }
        });

    无依赖??榭梢灾苯邮褂枚韵笞置媪坷炊ㄒ?/p>

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

    类似与 CommonJS 方式定义

        define( function( require, exports, module){
            var a = require('a'),
                  b = require('b');
    
            exports.action = function(){};
        } );

    require();  

    require API 介绍 https://github.com/amdjs/amdjs-api/wiki/require

        在 AMD 规范中的 require 函数与一般的 CommonJS中的 require 不同。由于动态检测依赖关系使加载异步,对于基于回调的 require 需求强烈。

        局部 与 全局 的require
        局部的 require 需要在AMD模式中的 define 工厂函数中传入 require。

        define( ['require'], function( require ){
          // ...
        } );
        or:
        define( function( require, exports, module ){
          // ...
        } );

        局部的 require 需要其他特定的 API 来实现。
        全局的 require 函数是唯一全局作用域下的变量,像 define一样。全局的 require 并不是规范要求的,但是如果实现全局的 require函数,那么其需要具有与局部 require 函数 一样的以下的限定:
        1. ??楸晔妒游缘?,而不是相对的对应另一个??楸晔?。
        2. 只有在异步情况下,require的回调方式才被用来作为交互操作使用。因为他不可能在同步的情况下通过 require(String) 从顶层加载???。
        依赖相关的API会开始??榧釉?。如果需要有互操作的多个加载器,那么全局的 reqiure 应该被加载顶层??槔创?。

        require(String)
        define( function( require ){
            var a = require('a'); // 加载??閍
        } );
    
        require(Array, Function)
        define( function( require ){
            require( ['a', 'b'], function( a,b ){ // 加载??閍 b 使用
                // 依赖 a b ??榈脑诵写?
            } );
        } );
    
        require.toUrl( Url )
        define( function( require ){
            var temp = require.toUrl('./temp/a.html'); // 加载页面
        } );

    amdjs 的API   https://github.com/amdjs/amdjs-api/wiki

    RequireJS

        官网 //www.requirejs.org/
        API //www.requirejs.org/docs/api.html

        RequireJS 是一个前端的??榛芾淼墓ぞ呖?,遵循AMD规范,它的作者就是AMD规范的创始人 James Burke。所以说RequireJS是对AMD规范的阐述一点也不为过。

        RequireJS 的基本思想为:通过一个函数来将所有所需要的或者说所依赖的??槭迪肿霸亟?,然后返回一个新的函数(??椋?,我们所有的关于新??榈囊滴翊攵荚谡飧龊诓坎僮?,其内部也可无限制的使用已经加载进来的以来的???。

      <script data-main='scripts/main' src='scripts/require.js'></script>

        那么scripts下的main.js则是指定的主代码脚本文件,所有的依赖??榇胛募冀痈梦募家觳郊釉亟胫葱?。

        defined用于定义???,RequireJS要求每个??榫旁诙懒⒌奈募?。按照是否有依赖其他??榈那榭龇治懒⒛?楹头嵌懒⒛??。
        1. 独立???,不依赖其他???。直接定义:

        define({
            method1: function(){},
            method2: function(){}
        });
    
    
        也等价于
    
        define(function(){
            return{
                method1: function(){},
                method2: function(){}
            }
        });

        2. 非独立???,对其他??橛幸览?。

        define([ 'module1', 'module2' ], function(m1, m2){
            ...
        });
        //或者:
        define( function( require ){
            var m1 = require( 'module1' ),
                  m2 = require( 'module2' );
            ...
        });

        简单看了一下RequireJS的实现方式,其 require 实现只不过是将 function 字符串然后提取 require 之后的??槊?,将其放入依赖关系之中。

        require方法调用???/h3>

        在require进行调用??槭?,其参数与define类似。

        require( ['foo', 'bar'], function( foo, bar ){
            foo.func();
            bar.func();
        } );

        在加载 foo 与 bar 两个??橹笾葱谢氐骱迪志咛骞?。
        当然还可以如之前的例子中的,在define定义??槟诓拷衦equire调用???/p>

        define( function( require ){
            var m1 = require( 'module1' ),
                  m2 = require( 'module2' );
            ...
        });

    define 和 require 这两个定义???,调用??榈姆椒ê铣莆狝MD模式,定义??榍逦?,不会污染全局变量,清楚的显示依赖关系。AMD模式可以用于浏览器环境并且允许非同步加载???,也可以按需动态加载???。

    CMD 与 seaJS

    CMD
        在CMD中,一个??榫褪且桓鑫募?,格式为:

    define( factory );

    全局函数define,用来定义???。
    参数 factory  可以是一个函数,也可以为对象或者字符串。
    当 factory 为对象、字符串时,表示??榈慕涌诰褪歉枚韵?、字符串。

    定义JSON数据??椋?/p>

    define({ "foo": "bar" });

    通过字符串定义模板??椋?/p>

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

        factory 为函数的时候,表示??榈墓乖旆椒?,执行构造方法便可以得到??橄蛲馓峁┑慕涌?。

        define( function(require, exports, module) {
            // ??榇?
        });
    
        define( id?, deps?, factory );
        define也可以接受两个以上的参数,字符串id为??楸晔?,数组deps为??橐览担?
    
        define( 'module', ['module1', 'module2'], function( require, exports, module ){
            // ??榇?
        } );

    其与 AMD 规范用法不同。
    require 是 factory 的第一个参数。

    require( id );

          接受??楸晔蹲魑ㄒ坏牟问?,用来获取其他??樘峁┑慕涌冢?/p>

    define(function( require, exports ){
            var a = require('./a');
            a.doSomething();
        });
    
        require.async( id, callback? );

    require是同步往下执行的,需要的异步加载??榭梢允褂?require.async 来进行加载:

    define( function(require, exports, module) {
            require.async('.a', function(a){
                a.doSomething();
            });
        });
    require.resolve( id )

        可以使用??槟诓康穆肪痘评捶祷啬?槁肪?,不会加载???。

        exports 是 factory 的第二个参数,用来向外提供??榻涌?。

        define(function( require, exports ){
            exports.foo = 'bar'; // 向外提供的属性
            exports.do = function(){}; // 向外提供的方法
        });

       当然也可以使用 return 直接向外提供接口。

        define(function( require, exports ){
            return{
                foo : 'bar', // 向外提供的属性
                do : function(){} // 向外提供的方法
            }
        });

        也可以简化为直接对象字面量的形式:

        define({
            foo : 'bar', // 向外提供的属性
            do : function(){} // 向外提供的方法
        });

        与nodeJS中一样需要注意的是,一下方式是错误的:

        define(function( require, exports ){
            exports = {
                foo : 'bar', // 向外提供的属性
                do : function(){} // 向外提供的方法
            }
        });

        需要这么做

        define(function( require, exports, module ){
            module.exports = {
                foo : 'bar', // 向外提供的属性
                do : function(){} // 向外提供的方法
            }
        });

    传入的对象引用可以添加属性,一旦赋值一个新的对象,那么值钱传递进来的对象引用就会失效了??贾?,exports 是作为 module.exports 的一个引用存在,一切行为只有在这个引用上 factory 才得以正常运行,赋值新的对象后就会断开引用,exports就只是一个新的对象引用,对于factory来说毫无意义,就会出错。

        module 是factory的第三个参数,为一个对象,上面存储了一些与当前??橄喙亓氖粜杂敕椒?。
        module.id 为??榈奈ㄒ槐晔?。
        module.uri 根据??橄低车穆肪督馕龉嬖虻玫侥?榈木月肪?。
        module.dependencies 表示??榈囊览?。
        module.exports 当前??槎酝馓峁┑慕涌?。

    seaJS

        官网 //seajs.org/docs/
        API快速参考 https://github.com/seajs/seajs/issues/266
        sea.js 核心特征:
            1. 遵循CMD规范,与NodeJS般的书写??榇?。
            2. 依赖自动加载,配置清晰简洁。
        兼容 Chrome 3+,Firefox 2+,Safari 3.2+,Opera 10+,IE 5.5+。
        seajs.use
        用来在页面中加载一个或者多个???/p>

        // 加载一个???
        seajs.use('./a');
        // 加载???,加载完成时执行回调
        seajs.use('./a',function(a){
            a.doSomething();
        });
        // 加载多个??橹葱谢氐?
        seajs.use(['./a','./b'],function(a , b){
            a.doSomething();
            b.doSomething();
        });

    其define 与 require 使用方式基本就是CMD规范中的示例。

    AMD 与 CMD 区别到底在哪里?

        看了以上 AMD,requireJS 与 CMD, seaJS的简单介绍会有点感觉模糊,总感觉较为相似。因为像 requireJS 其并不是只是纯粹的AMD固有思想,其也是有CMD规范的思想,只不过是推荐 AMD规范方式而已, seaJS也是一样。

    下面是玉伯对于 AMD 与 CMD 区别的解释:

        AMD 是 RequireJS 在推广过程中对??槎ㄒ宓墓娣痘?。
        CMD 是 SeaJS 在推广过程中对??槎ㄒ宓墓娣痘?。

        类似的还有 CommonJS Modules/2.0 规范,是 BravoJS 在推广过程中对??槎ㄒ宓墓娣痘龌褂胁簧??

        这些规范的目的都是为了 JavaScript 的??榛?,特别是在浏览器端的。
        目前这些规范的实现都能达成浏览器端??榛⒌哪康?。

    区别:

        1. 对于依赖的???,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.
        2. CMD 推崇依赖就近,AMD 推崇依赖前置??创耄?/p>

        // CMD
        define(function(require, exports, module) {
            var a = require('./a')
            a.doSomething()
            // 此处略去 100 行
            var b = require('./b') // 依赖可以就近书写
            b.doSomething()
            // ...
        })
    
        // AMD 默认推荐的是
        define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
            a.doSomething()
            // 此处略去 100 行
            b.doSomething()
            // ...
        })

    虽然 AMD 也支持 CMD 的写法,同时还支持将 require 作为依赖项传递,但 RequireJS 的作者默认是最喜欢上面的写法,也是官方文档里默认的??槎ㄒ逍捶?。
    3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据??橄低车耐瓯感?,提供 seajs.use 来实现??橄低车募釉仄舳?。CMD 里,每个 API 都简单纯粹。
    4. 还有一些细节差异,具体看这个规范的定义就好,就不多说了。
    另外,SeaJS 和 RequireJS 的差异,可以参考:https://github.com/seajs/seajs/issues/277
    总结
    本文主要是介绍了一下 AMD CMD的规范,顺便简单的讲述了一下 requireJS 与 seaJS。讲的较为笼统,下面的扩展阅读可以更好的帮助你理解??榛约案鞲龉娣?。

    扩展阅读:
    AMD规范文档 https://github.com/amdjs/amdjs-api/wiki/AMD
    amdjs 的 require 接口文档 https://github.com/amdjs/amdjs-api/wiki/require
    amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
    RequireJS官网接口文档  //www.requirejs.org/docs/api.html 
     
    前端??榛⒌募壑?nbsp;https://github.com/seajs/seajs/issues/547
    前端??榛⒛堑憷?nbsp;https://github.com/seajs/seajs/issues/588
    CMD ??槎ㄒ骞娣?nbsp;https://github.com/seajs/seajs/issues/242
    从 CommonJS 到 Sea.js https://github.com/seajs/seajs/issues/269    
     

    RequireJS和AMD规范  //javascript.ruanyifeng.com/tool/requirejs.html 

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

    JavaScript??榛?- CommonJS规范 //www.feeldesignstudio.com/2013/09/javascript-module-pattern-commonjs 
    JavaScript??榛?- AMD规范 //www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd

    ??榛杓?nbsp;//baike.baidu.com/view/189730.htm 
    ??榛?nbsp; //baike.baidu.com/view/182267.htm

    关键词: javascript,??榛?amd,cmd   编辑时间: 2015-07-01 21:34:52

    • 感到高兴

      7

      高兴
    • 感到支持

      7

      支持
    • 感到搞笑

      7

      搞笑
    • 感到不解

      7

      不解
    • 感到谎言

      7

      谎言
    • 感到枪稿

      7

      枪稿
    • 感到震惊

      7

      震惊
    • 感到无奈

      7

      无奈
    • 感到无聊

      7

      无聊
    • 感到反对

      7

      反对
    • 感到愤怒

      7

      愤怒
    50%(7)
    50%(7)
    共有0 条评论 发言请遵守【相关规定

    网友评论

    会员头像
    发 表同步腾讯微博  匿名评论  验证码:  点击更新
    • 暂无评论
    关闭??? align=文章图片 article Pictrue
    • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
    • 代码覆盖率工具 Istanbul 入门教程
    • 全栈工程师的武器——MEAN
    • 9款超炫的 CSS3 复选框(Checkbox)
    • 微信开发在线翻译功能
    • CSS3那些不为人知的高级属性
    • 给easyui的datebox添加清空事件
    • flash写字效果
    • kendoUI系列教程之DropDownList下拉菜单
    • kendoUI系列教程之datetimepicker日期时间选择
    • kendoUI系列教程之datepicker日期选择
    • kendoUI系列教程之combobox下拉列表框
    • kendoUI系列教程之colorpicker
    • kendoUI系列教程之calendar日历表
    • kendoUI系列教程之autocomplete自动补齐
    • kendo ui简介
  • 慈善基金进社区 点对点帮扶居民 2019-04-10
  • 三面悬崖的3197哨所 战士背饮用水要走"天梯" 2019-04-10
  • 习近平《在深入推动长江经济带发展座谈会上的讲话》单行本出版 2019-04-09
  • 女子在自家院子乘凉 被后山滚落千斤巨石砸死 2019-04-07
  • 很深刻。当今城市化基本出于房地资本的繁衍需要与维持粗陋GDP的无奈,越来越显露其反动性。 2019-04-03
  • 故都之秋,惊艳了整个华东文章中国国家地理网 2019-04-03
  • 中国虚拟现实创新创业大赛南昌赛区颁奖仪式举行 2019-03-31
  • 邯郸“廉政诊所”筑起基层首道廉政防线 2019-03-31
  • 蔡英文,赖清德,李登辉,陈水扁..... 2019-03-24
  • 【北京海之沃车型报价】北京海之沃4S店车型价格 2019-03-22
  • 上海电影节第三日:电影市场热议产业新形势 2019-03-22
  • 特朗普雇佣资深律师应对涉俄调查 2019-03-18
  • 两部门:支持建设一批乡土经济活跃的农业产业强镇 2019-03-17
  • 法国总统马克龙首次访华 法国居民期待成果 2019-03-16
  • 福彩快三app下载安装 排列3 北京赛车pk10开奖记录 新时时彩快速购彩 北单奖金怎么算 快乐飞艇是哪里开的官方网站 香港六合彩 时时彩走势图龙虎和八方集团 新疆时时彩开奖结果走势囹 辽宁福利彩票35选7 老时时彩玩法 胜平负竞彩网 体彩排列三走势图 福彩3d试机号今天预测分析 2元彩票开奖 pc蛋蛋幸运28 预测