UMD

作者: JasonQiao | 来源:发表于2017-08-18 11:14 被阅读20次

转自http://web.jobbole.com/82238/

UMD: 通用模块规范

既然CommonJs和AMD风格一样流行,似乎缺少一个统一的规范。所以人们产生了这样的需求,希望有支持两种风格的“通用”模式,于是通用模块规范(UMD)诞生了。

不得不承认,这个模式略难看,但是它兼容了AMD和CommonJS,同时还支持老式的“全局”变量规范:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'));
    } else {
        // 浏览器全局变量(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    方法
    function myFunc(){};

    //    暴露公共方法
    return myFunc;
}));

保持跟上面例子一样的模式,下面是更复杂的例子,它依赖了多个组件并且暴露多个方法:

(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
    }
}));

相关文章

  • 可能是最详细的UMD模块入门指南

    学习UMD 介绍 这个仓库记录了一些关于javascript UMD模块规范的demo,对我学习UMD规范有了很大...

  • Vue劫持data

    window上生成Vue 在用Rollup搭建开发环境时,用了format:"umd",的打包模式。umd的打包模...

  • webpack externals CDN优化如何查找的导出变

    首先要知道什么是UMD模块规范,一般js库为了兼容多个模块规范都是以UMD规范导出的。 不知道UMD的可以参考这篇...

  • UMD

    一、UMD 严格来说,UMD 并不能说是一种模块标准,不如说它是一组模块形式的集合更准确。UMD 的全称是Univ...

  • UMD

    转自http://web.jobbole.com/82238/ UMD: 通用模块规范 既然CommonJs和AM...

  • UMD

  • ESM Import与Bundle Free

    由于前端模块化的发展,在nodejs中分为了common.js,umd,es module三大种类。其中umd是可...

  • javascrip中UMD规范的详细介绍

    一、UMD规范 UMD规范,就是多有规范里面长得最丑的那个,没有之一!!!他是为了让模块同时兼容AMD和Commo...

  • umd写法

    (function (root, factory) {if (typeof define === 'functio...

  • ionic3报错:Uncaught Error: Cannot

    解决办法: 将 import{ Platform}from'ionic-angular/umd'; ...

网友评论

      本文标题:UMD

      本文链接:https://www.haomeiwen.com/subject/ohaorxtx.html