您的位置:时时app平台注册网站 > web前端 > javascript基本功修炼(4)——UMD规范的代码推演

javascript基本功修炼(4)——UMD规范的代码推演

2019-11-03 04:36

3. 更具指向性的UMD范式

UMD在其github主页上提供了更具针对性的范式,适用于分裂的场景,感兴趣的读者可以自行查看(地址在首先节已经付诸卡塔 尔(英语:State of Qatar)。

图片 1

在这里贴多少个或许对绝大多数开荒者比较有效的jqueryPlugin的花费范式,假诺看懂了地点的解析,那么下边包车型大巴代码应该轻松看懂:

// Uses CommonJS, AMD or browser globals to create a jQuery plugin.
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                // require('jQuery') returns a factory that requires window to
                // build a jQuery instance, we normalize how we use modules
                // that require this pattern but the window provided is a noop
                // if it's defined (how jquery works)
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.jqueryPlugin = function () { return true; };
}));

[图形上传中。。。(7卡塔 尔(英语:State of Qatar)]

二. webpack与模块化

webpack暗许扶植的是CommonJs规范,终究它是nodejs支撑的模块管理方法,而并未有node哪来的webpack。但还要为了扩充其选拔境况,webpack在本子迭代中也加盟了对ES harmony规范和AMD正式的卓殊。

图片 2

CMD和英特尔的分别有以下几点:

webpack怎样识别ES Harmony模块

对于ES Harmony标准素不相识的能够查看《ES6 Module语法》一文。

先使用import一声令下加载三个CommonJs正式导出的模块,查看包装后的代码能够见见模块引用的意气风发部分被转变来了下边那样:

__webpack_require__.r(__webpack_exports__);
/* harmony import */ 
var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./components/component10k.js");
/* harmony import */
var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_components_component10k_js__WEBPACK_IMPORTED_MODULE_0__);

简化一下再来看:

__webpack_require__.r(__webpack_exports__);
var a = __webpack_require__("./components/component10k.js");
var b = __webpack_require__.n(a);

那边提到到八个工具函数:

图片 3

以此艺术是给模块的exports对象加上ES Harmony专门的学业的标记,假使援助Symbol对象,则为exports指标的Symbol.toStringTag属性赋值Module,那样做的结果是exports目的在调用toString方法时会再次回到'Module'(小编并未查到这种写法的从头到尾的经过卡塔尔;假诺不辅助Symbol对象,则将exports.__esModule赋值为true。

另二个工具函数是:

图片 4

传播了二个模块,再次来到八个getter措施,此处是三个高阶函数的施用,实现的职能是当模块的__esModule个性为真时,重回贰个getDefault( )措施,不然重临getModuleExports( )方法.

回过头再来看上边的简化代码:

// 添加ES Harmony规范模块标记
__webpack_require__.r(__webpack_exports__);
// a实际上得到了模块通过module.exports输出的对象
var a = __webpack_require__("./components/component10k.js");
// 根据a的模块化规范类型返回不同的getter函数,当getter函数执行时才会真正得到模块对象
var b = __webpack_require__.n(a);

总计一下,webpack所做的拍卖也正是对模块扩展了代理,假如被加载模块切合ES Harmony规范,则返回module['default'],不然重临module。这里的module泛指模块输出的靶子。

再使用import加载一个施用export语法输出的ES Harmony模块,查看包装结果中的模块文件能够见见:

//component10k.js模块文件在main.bundle.js中的内容
__webpack_require__.r(__webpack_exports__);
__webpack_exports__["default"] = (function(){
    Array.from('component10k');
})

能够看出输出的原委平素绑定到了输出模块的default品质上,由于这些模块被打上了__esModule的暗号,所以引用它的模块会通过module['default']来取用其剧情,也就正好命中了模块的输出内容。

2.1 基本协会

先来看最外层的组织:

(function (){}());

非常轻松,正是叁个自实行函数。既然它是叁个模块化的标准,也就意味着这些自进行函数最后可以导出多个模块,那么从代码的角度来说实际上有二种不足为道的兑现格局:

  1. return再次回到二个模块;
  2. 实参传入三个目标,把函数内部生成好的急需导出的事物挂在这里个指标的个性上;

能够看见上面的函数体内部是尚未return语句的,那么能够推测UMD在落成时是使用了第二种办法。既然UMD是风流罗曼蒂克种模块化的正经八百,那么它的效果与利益就是基于使用供给坐蓐模块,也正是说它的职责定位叫做模块工厂,我们得以定义三个factory艺术,每当实行该方法时,就回再次来到多个模块,所以它的着力构培养成为了如下的规范:

(function (factory){
    //假设没有使用任何模块化方案,那么将工厂函数执行后返回的内容直接挂载到全局
    window.Some_Attr = factory();
}(function(){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

也便是说大家自定义多少个佚名函数,然后把它当作实参传给了自实践函数,然后在自试行函数内部通过形参来访谈那几个工厂方法(大概您会更熟练回调函数callback如此的叫法卡塔尔国,把它总结地挂在到全局对象上,那样就完事了基本的模块导出。

局地时候我们也希望得以将模块挂载到非全局的情形,将挂载对象动态传入可以让代码变得更灵敏,此处涉及到叁个底蕴知识,正是浏览器遭受中的全局对象具备parent,top,self几个性格来追踪页面中放到<iframe>后引进的新的Window对象的,单页面Window.self是指向自个儿的,代码中常通过是不是包罗self特性来甄别全局对象,所以这边的写法能够纠正为同盟:

(function(root,factory){
    root.Some_Attr = factory();
}(self !== undefined ? self : this, function(){

}));

2、CMD推崇注重就近,AMD推崇信任前置。

风流倜傥. 模块化大杂烩

图片 5

本子归并是基于模块化规范的,javascript模块化是一个特别混乱的话题,各样**【*MD】**行业内部争飞还要外加一群【*.js】的正式落到实处。今世化前端项目多基于框架进行付出,较为流行的框架之中基本已经联合依据ES6的模块化标准,就算帮忙度不少年老成,但经过创设筑工程具得以消除浏览器帮衬滞后的难点;基于nodejs的服务端项目原生扶植CommonJs业内;而支出中引进的有的工具类的库,销路广的工具类库为了能同一时候协作浏览器和node碰到,经常会利用UMD行业内部(Universal Module Definition卡塔 尔(英语:State of Qatar)来促成模块化,对UMD范式不打听的读者能够先读书《javascript根基修炼(4)——UMD规范的代码推演》一文,以至某个第三方库并不曾遵从任何模块化方案。借使不借助于塑造筑工程具,想要对每一种方案完成宽容是极度复杂的。

1. UMD规范

地址:

UMD规范,就是独具正规里长得最丑的极其,未有之意气风发!!!它是为着让模块相同的时候合作AMDCommonJs正式而现身的,多被一些亟需同有时候扶植浏览器端和服务端援引的第三方库所运用。UMD是一个时期的产品,当各个条件最终完结ES harmony的联合的正经后,它也将退出历史舞台。

UMD标准的组织乍生机勃勃看特别复杂,重倘若因为想要看懂这段范式要求一些javascript底子知识,它的主题结构是如此的:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    方法
    function a(){};    //    私有方法,因为它没被返回 (见下面)
    function b(){};    //    公共方法,因为被返回了
    function c(){};    //    公共方法,因为被返回了

    //    暴露公共方法
    return {
        b: b,
        c: c
    }
}));

介于上面包车型大巴聊起的题目,于是浏览器端的异步版本的require应际而生

webpack怎么着识别英特尔模块

我们将component10k.js模块改为用AMD业钦命义:

define(function(){
    console.log('test');
})

翻看经过webpack打包后,那几个模块产生了之类的理所当然:

var __WEBPACK_AMD_DEFINE_RESULT__;
!(__WEBPACK_AMD_DEFINE_RESULT__ = (function(){
    console.log('test');
}).call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

简化一下:

var result;
!(result=(function(){}).call(...),result!==undefined && module.exports = result);

空泛一下:

var result;
!(expression1,expression2 && expression3)

此地提到的javascript的基本知识相当多,逗号表达式的优先级最低,所以最后参加运算,逗号表明式会从左到右依次试行语句,并赶回最终多个表明式的结果,&&为隔开分离运算语法,即前四个标准建马上才总计前面包车型客车表明式,赋值语句推行完后会将所赋的值再次来到。此处外层的!(expression )语法起了什么样作用,小编也没看懂,希望领会的读者多多支持。

所以,webpack对于AMD模块的管理,实际上是加了后生可畏层封装,将模块运转的结果挂载到了webpack模块的module.exports对象上。

2.2 适配AMD

进而大家先来加盟AMD的正经的适配,标准地点:AMD规范github地址:

/*
* AMD规范的模块定义格式是define(id?, dependencies?, factory),factory就是实际的模块内容
*/
(function (factory){
    //判断全局环境是否支持AMD标准
    if(typeof define === 'function' && define.amd){
        //定义一个AMD模块
        define([/*denpendencies*/],factory);
    }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

1、近年来的浏览器大都还不合作,要想行使这种方式的模块系统,貌似只好依附转译工具了(比如贝布el卡塔尔国
2、这种格局的module近日还相当少

webpack4.0声东击西(5卡塔 尔(阿拉伯语:قطر‎—— Module篇

webpack作为前端最火的创设筑工程具,是前面三个自动化工具链最重大的局地,使用门槛较高。本连串是小编自身的读书记录,相比底子,希望经过标题 消除方式的情势,早先端营造中境遇的具体供给为重点点,学习webpack工具中相应的拍卖措施。(本篇中的参数配置及利用方法均基于webpack4.0版本

图片 6

使用webpack对台本实行合并是老大便于的,因为webpack金玉锦绣了对各个区别模块标准的合营管理,对前面三个开辟者来讲,驾驭这种落成格局比学习怎么着陈设webpack更为首要,本节的内容实用性相当低。
图片 7

4. 模块化开拓

前端模块化本人是一个稍显混乱的话题,小编自个儿最先也是require( )require.js傻傻分不清楚,但模块化是前端开拓中超重大的课题,要是您不想风度翩翩辈子只是在一个页面内写代码,那生龙活虎关是不容置疑要过的,感兴趣的读者能够据守上面包车型大巴为主项目划分分块举办学习。

图片 8

图片 9

webpack怎么样识别CommonJs模块

webpack打包后输出文件的为主协会是底下这一个样子的:

(function(modules) { // webpackBootstrap
    // 模块缓存对象
    var installedModules = {};

    // webpack内部的模块引用函数
    function __webpack_require__(moduleId) {

        // 加载入口JS

        // 输出
        return module.exports;
    }

    // 挂载模块数组
    __webpack_require__.m = modules;
    // ...
    // 在__webpack_require__挂载多个属性

    // 传入入口JS模块ID执行函数并输出模块
    return __webpack_require__(__webpack_require__.s = 0);
});
// 包含所有模块的数组
([
    /* id为0 */
    (function(module, exports) {
        console.log('1')
    })
]);

简化以后实际就是三个自进行函数:

(function(modules){
    return __webpack_require__(0);
}([Module0,Module1...]))

能够看到__webpack_reqruie__( )以此方式的参数便是模块的唯朝气蓬勃ID标志,再次回到值就是module.exports,所以webpack对于CommonJs标准是原生帮助的。

2.3 适配CommonJs

接着大家先来出席CommonJs的正规的适配:

/*
* CommonJs规范使用require('moduleName')的格式来引用模块,使用module.exports对象输出模块,所以只要把模块的输出内容挂载到module.exports上就完成了模块定义。
*/
(function (factory){
    //判断全局环境是否支持CommonJs标准
      if(typeof exports === 'object' && typeof define !== 'function'){
             module.exports = factory(/*require(moduleA), require(moduleB)*/);
      }
}(function(/*formal parameters*/){
    //自定义模块主体的内容
    /*
        var a,b,c
        function a1(){}
        function b1(){}
        function c1(){}
        return {
           a:a1,
           b:b1
        }
     */
}))

加入对CommonJs的适配后,函数主体中return的剧情(经常是二个指标)就被挂载到了module.exports上,即使你编写过node.js代码,对此一定不会不熟悉。

把地点的局地揉到一块,你也就看懂UMD的模范了。

CMD是SeaJS 在加大进程中对模块定义的标准化产出

2. 源码范式推演

UMD: 通用模块标准

javascript根基修炼(4)——UMD规范的代码推演

在模块化那东西没出来在此以前,前端脚本援引大概是这么的:
后边二个发展到明天,已经有多数模块化的方案,举个例子AMD、CMD、UMD、CommonJS等,当然了,还应该有es6拉动的模块系统,这几个模块化规范的中央价值都以让 JavaScript 的模块化开拓变得轻易和自然,几近日就来看看这么些职业都以什么。

这种措施通过二个叫作require的主意,同步加载信赖,然后返导出API供其余模块使用,贰个模块能够通过exports恐怕module.exports导出API。CommonJS标准中,三个单独的文本正是八个模块。每二个模块都是四个独立的成效域,在三个文件中定义的变量,都以私家的,对任何文件是不可以看到的。

图片 10

Less Well

[图形上传中。。。(4卡塔尔国]
AMD 标准中,define 函数有七个国有属性 define.amd。

在于上面包车型地铁聊起的题目,于是浏览器端的异步版本的require应际而生

ES6为JavaScript加多了部分言语结构,形成另贰个模块系统。

ES6为JavaScript加多了一些言语结构,产生另二个模块系统。

1、扫除了模块异步加载的标题
2、消除了多少个剧本并行加载的标题

图片 11

ES6 modules: 你们都让开,作者才是正经

怎么要模块化

[图形上传中。。。(1卡塔 尔(阿拉伯语:قطر‎]
模块把接口拆穿到全局对象下(举个例子window卡塔尔,种种模块能够经过全局对象访问各种依赖的接口,可是也存在部分主题材料:

1、消除了模块异步加载的标题
2、化解了八个剧本并行加载的标题

[图形上传中。。。(5卡塔 尔(英语:State of Qatar)]
虽说英特尔也协助CMD写法,但依靠前置是法定文书档案的默许模块定义写法。
引入风姿浪漫篇小说:SeaJS与RequireJS最大的分别

Well

1、代码太过肥壮,相当不够温婉,难以阅读和书写
2、然则好似又是某种应用方案

CMD表示不性格很顽强在荆棘塞途或巨大压力面前不屈

Well

[图形上传中。。。(2卡塔 尔(英语:State of Qatar)]
为了解决那么些标题,种种模块化的方案都出去了

正文首假设介绍了弹指间 AMD、CMD等典型,较为笼统,上面包车型地铁扩充阅读能够越来越好的援救您驾驭模块化甚至各种专门的学业。
[图形上传中。。。(1卡塔 尔(英语:State of Qatar)]
模块把接口暴露到全局对象下(比方window卡塔尔国,各类模块能够由此全局对象访谈种种信任的接口,可是也存在一些主题材料:

[图表上传中。。。(3卡塔尔国]
服务端Node.js正是用的这种办法。

CommonJS

本文首假如介绍了大器晚成晃 AMD、CMD等规范,较为笼统,上面包车型客车扩充阅读能够越来越好的声援您精通模块化以致各类专门的学问。前端发展到今天,已经有众多模块化的方案,比如速龙、CMD、UMD、CommonJS等,当然了,还可能有es6带来的模块系统,这几个模块化标准的核心价值都以让 JavaScript 的模块化开采变得不难和自然,今日就来拜会那个专门的学业都以吗。

Less Well

1、加载模块是同台的,所以唯有加载成功技能进行前边的操作
2、多个模块无法互相加载

在模块化那东西没出去之前,前端脚本引用大约是那样的:

Well

Less Well

CMD 规范中定义了 define 函数有一个国有属性 define.cmd。

CMD 规范中定义了 define 函数有四个国有属性 define.cmd。

图片 12

模块把接口拆穿到全局对象下(比方window卡塔尔国,种种模块能够通过全局对象访谈各类依赖的接口,可是也设有部分主题素材:

CMD是SeaJS 在加大进程中对模块定义的标准化产出

1、挂在全局对象下轻松生出冲突
2、各样脚本加载的必需从严依照信赖顺序,不然或者就玩不转
3、在八个特意大的体系中,援用的脚本就能特地多,script 标签就能极度多,何况难以维护。譬喻:

1、服务端模块能够很好的复用
2、这种作风的模块已经重重了,比方npm上基本上都以这种作风的module
3、简单易用

CMD 规范中定义了 define 函数有二个国有属性 define.cmd。

总结

像Node.js重要用来服务器的编制程序,加载的模块文件平时都早就存在本地硬盘,所以加载起来超快,不用思索异步加载的点子,所以CommonJS标准相比适用。但若是是浏览器情状,要从服务器加载模块,那是就非得选择异步格局。所以就有了 AMD 、CMD 的建设方案。

CMD 模块中有二种格局提供对外的接口,风姿罗曼蒂克种是 exports.MyModule = ...,风流浪漫种是行使 return 进行重返。

AMD: 异步require
AMD === Asynchronous Module Definition

正文首若是介绍了眨眼间间 英特尔、CMD等规范,较为笼统,下边包车型大巴恢弘阅读能够更加好的帮扶你精通模块化以至各样专门的学问。

缘何要模块化

Less Well

AMD: 异步require
AMD === Asynchronous Module Definition

英特尔被利用的最分布的贯彻方案属实正是 require.js 了

1、静态剖析非常轻易
2、以后的正规

图片 13

这种情势通过一个名为require的章程,同步加载正视,然后返导出API供其余模块使用,三个模块能够通过exports也许module.exports导出API。CommonJS标准中,叁个单身的文件正是八个模块。每一个模块都是一个独门的成效域,在多少个文件中定义的变量,都以私人商品房的,对别的文件是不可以预知的。

可是本身生机勃勃旦想同有时间帮忙三种风格吗?于是通用模块规范(UMD卡塔 尔(阿拉伯语:قطر‎诞生了。那么些形式中参预了脚下留存哪个种类标准的论断,所以能够“通用”,它特出了英特尔和CommonJS,同临时间还扶持老式的“全局”变量标准:

1、对于借助的模块英特尔是提前实行,CMD是延迟实践。(require2.0貌似有变动卡塔尔

总结

图片 14

[图片上传中。。。(6卡塔尔]

1、解决了模块异步加载的标题
2、消除了多少个剧本并行加载的标题

前面二个发展到今日,已经有过多模块化的方案,举例英特尔、CMD、UMD、CommonJS等,当然了,还可能有es6拉动的模块系统,这个模块化规范的主题价值都以让 JavaScript 的模块化开荒变得轻便和自然,前天就来拜谒那一个专门的工作都以啥。

[图形上传中。。。(6卡塔 尔(阿拉伯语:قطر‎]

1、挂在大局对象下轻松发生冲突
2、各样脚本加载的总得严峻遵从依赖顺序,不然可能就玩不转
3、在三个特意大的类型中,征引的剧本就能特意多,script 标签就能特意多,并且难以保证。举个例子:

Well

Less Well

1、代码太过肥胖,相当的矮贵,难以阅读和书写
2、但是有如又是某种应用方案

英特尔 标准中,define 函数有叁个国有属性 define.amd。

CommonJS

为了消除那个主题材料,各个模块化的方案都出来了

Well

1、代码太过丰腴,远远不够文雅,难以阅读和书写
2、不过就好像又是某种施工方案

1、挂在大局对象下容易产生冲突
2、各种脚本加载的总得从严依照信任顺序,不然恐怕就玩不转
3、在四个非常大的类别中,援引的脚本就能专程多,script 标签就能专程多,而且难以保证。举例:

[图形上传中。。。(5卡塔尔]
虽说AMD也援助CMD写法,但依据前置是法定文书档案的默许模块定义写法。
引入生龙活虎篇文章:SeaJS与RequireJS最大的界别

[图片上传中。。。(3卡塔尔国]
服务端Node.js就是用的这种办法。

Well

AMD: 异步require
AMD === Asynchronous Module Definition

[图形上传中。。。(2卡塔尔国]
为了消除这么些主题素材,各样模块化的方案都出来了

ES6 modules: 你们都让开,作者才是正式

2、CMD推崇信任就近,速龙推崇注重前置。

Well

不过本人倘使想同有的时候间补助三种风格吗?于是通用模块标准(UMD卡塔尔国诞生了。这几个情势中投入了近来存在哪类标准的判别,所以能够“通用”,它十分了英特尔和CommonJS,同期还扶植老式的“全局”变量标准:

介于上边的谈到的标题,于是浏览器端的异步版本的require应时而生

图片 15

CMD和英特尔的界别有以下几点:

CMD和英特尔的不相同有以下几点:

UMD是英特尔和CommonJS两个的构成,英特尔浏览器第意气风发的法则提升,异步加载模块。CommonJS 模块以服务器第生机勃勃尺码发展,同步加载模块,它的模块无需包装。

Less Well

像Node.js主要用以服务器的编制程序,加载的模块文件平时都已存在本地硬盘,所以加载起来异常的快,不用思考异步加载的法子,所以CommonJS规范相比适用。但万一是浏览器情状,要从服务器加载模块,那是就一定要运用异步形式。所以就有了 AMD 、CMD 的技术方案。

UMD: 通用模块规范

CMD 模块中有三种方法提供对外的接口,生机勃勃种是 exports.MyModule = ...,大器晚成种是使用 return 举办重返。

AMD被接受的最遍布的贯彻方案属实正是 require.js 了

ES6 modules: 你们都让开,作者才是行业内部

1、近年来的浏览器大都还不协作,要想行使这种方法的模块系统,貌似只可以借助转译工具了(比方Babel卡塔 尔(阿拉伯语:قطر‎
2、这种格局的module近来还比很少

Less Well

英特尔被应用的最分布的贯彻方案属实正是 require.js 了

2、CMD推崇信赖就近,英特尔推崇信赖前置。

1、加载模块是手拉手的,所以独有加载成功本领施行前面包车型客车操作
2、三个模块不能够互相加载

1、对于依附的模块AMD是提前施行,CMD是延迟施行。(require2.0近似有生成卡塔 尔(英语:State of Qatar)

1、服务端模块能够很好的复用
2、这种作风的模块已经重重了,譬如npm上海南大学学多都以这种风格的module
3、轻易易用

Less Well

UMD是英特尔和CommonJS两个的结缘,AMD浏览器第风流洒脱的规格发展,异步加载模块。CommonJS 模块以服务器第黄金年代规格发展,同步加载模块,它的模块不需求包装。

这种办法通过一个堪称require的议程,同步加载重视,然后返导出API供其余模块使用,二个模块能够通过exports或然module.exports导出API。CommonJS标准中,三个独门的公文正是贰个模块。每一个模块都以一个单独的成效域,在二个文件中定义的变量,都以个人的,对其他文件是不可知的。

服务端Node.js正是用的这种措施。

1、静态解析特别轻松
2、现在的行业内部

1、对于依赖的模块英特尔是提前实行,CMD是延迟实行。(require2.0相同有变化卡塔尔国

UMD: 通用模块标准

只是本身只要想同一时间帮助二种风格吗?于是通用模块标准(UMD卡塔 尔(阿拉伯语:قطر‎诞生了。这一个形式中步入了脚下留存哪个种类规范的推断,所以能够“通用”,它极度了AMD和CommonJS,同有时候还援救老式的“全局”变量规范:

[图片上传中。。。(4卡塔 尔(英语:State of Qatar)]
AMD 标准中,define 函数有叁个国有属性 define.amd。

UMD是AMD和CommonJS两个的组成,英特尔浏览器第后生可畏的口径升高,异步加载模块。CommonJS 模块以服务器第风度翩翩法规提升,同步加载模块,它的模块没有需求包装。

CMD表示不服

1、加载模块是一块的,所以唯有加载成功技巧实行前边的操作
2、七个模块不能够相互加载

像Node.js首要用于服务器的编制程序,加载的模块文件常常都早已存在本地硬盘,所以加载起来不慢,不用思忖异步加载的秘籍,所以CommonJS标准比较适用。但风流洒脱旦是浏览器境遇,要从服务器加载模块,那是就必须要运用异步格局。所以就有了 英特尔 、CMD 的解决方案。

怎么要模块化

1、静态剖判特别轻巧
2、以后的专门的职业

固然如此英特尔也支撑CMD写法,但依据前置是合英文档的暗中认可模块定义写法。
推荐生龙活虎篇作品:SeaJS与RequireJS最大的区分

CMD表示不服

在模块化那东西没出去以前,前端脚本援引大约是如此的:

CommonJS

Less Well

ES6为JavaScript增添了部分语言结构,形成另叁个模块系统。

Well

CMD 模块中有三种艺术提供对外的接口,后生可畏种是 exports.MyModule = ...,大器晚成种是选拔 return 进行再次回到。

1、服务端模块可以很好的复用
2、这种风格的模块已经重重了,举个例子npm上海大学多都以这种作风的module
3、简单易用

总结

Well

CMD是SeaJS 在推广进度中对模块定义的标准化产出

1、最近的浏览器大都还不相称,要想利用这种格局的模块系统,貌似只可以依靠转译工具了(比方贝布el卡塔尔国
2、这种方式的module近来还少之又少

[图表上传中。。。(7卡塔 尔(阿拉伯语:قطر‎]

本文由时时app平台注册网站发布于web前端,转载请注明出处:javascript基本功修炼(4)——UMD规范的代码推演

关键词: