javascript module system all in one

AMD & CMD

https://github.com/amdjs/amdjs-api/wiki/AMD

http://requirejs.org/

http://requirejs.org/docs/whyamd.html

https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

https://github.com/cmdjs/specification/blob/master/draft/module.md

https://github.com/seajs/seajs/issues/242

Using jQuery UI with AMD

http://learn.jquery.com/jquery-ui/environments/amd/

AMD、CMD、UMD 模块的写法

2015/03/24 · JavaScript · AMDCMDUMD

分享到:
原文出处: David Calhoun   译文出处:奇舞团 - hxl   

简介

最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。

为了解决这个问题,两种竞争关系的模块规范AMD和CommonJS问世了,它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码,这样就能避免“污染生态系统”。

AMD

随着RequireJS成为最流行的实现方式,异步模块规范(AMD)在前端界已经被广泛认同。

下面是只依赖jquery的模块foo的代码:

JavaScript
 
1
2
3
4
5
6
7
8
//    文件名: foo.js
define(['jquery'], function ($) {
    //    方法
    function myFunc(){};
 
    //    暴露公共方法
    return myFunc;
});

还有稍微复杂点的例子,下面的代码依赖了多个组件并且暴露多个方法:

JavaScript
 
1
2
3
4
5
6
7
8
9
10
11
12
// 文件名: foo.js
define(['jquery', 'underscore'], function ($, _) {
// 方法
function a(){}; // 私有方法,因为没有被返回(见下面)
function b(){}; // 公共方法,因为被返回了
function c(){}; // 公共方法,因为被返回了
     //    暴露公共方法
    return {
        b: b,
        c: c
    }
});

定义的第一个部分是一个依赖数组,第二个部分是回调函数,只有当依赖的组件可用时(像RequireJS这样的脚本加载器会负责这一部分,包括找到文件路径)回调函数才被执行。

注意,依赖组件和变量的顺序是一一对应的(例如,jquery->$, underscore->_)。

同时注意,我们可以用任意的变量名来表示依赖组件。假如我们把$改成$$,在函数体里面的所有对jQuery的引用都由$变成了$$。

还要注意,最重要的是你不能在回调函数外面引用变量$和_,因为它相对其它代码是独立的。这正是模块化的目的所在!

CommonJS

如果你用Node写过东西的话,你可能会熟悉CommonJS的风格(node使用的格式与之相差无几)。因为有Browserify,它也一直被前端界广泛认同。

就像前面的格式一样,下面是用CommonJS规范实现的foo模块的写法:

JavaScript
 
1
2
3
4
5
6
7
8
//    文件名: foo.js
//    依赖
var $ = require('jquery');
//    方法
function myFunc(){};
 
//    暴露公共方法(一个)
module.exports = myFunc;

还有更复杂的例子,下面的代码依赖了多个组件并且暴露多个方法:

JavaScript
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//    文件名: foo.js
var $ = require('jquery');
var _ = require('underscore');
 
//    methods
function a(){};    //    私有方法,因为它没在module.exports中 (见下面)
function b(){};    //    公共方法,因为它在module.exports中定义了
function c(){};    //    公共方法,因为它在module.exports中定义了
 
//    暴露公共方法
module.exports = {
    b: b,
    c: c
};

UMD: 通用模块规范

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

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

JavaScript
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(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;
}));

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

JavaScript
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(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
    }
}));
 

1

http://blog.gejiawen.com/2015/11/03/what-is-amd-cmd-commonjs-umd/

http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/

https://www.zhihu.com/question/20351507

http://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs

阮一峰

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

 CommonJS规范

http://javascript.ruanyifeng.com/nodejs/module.html

https://www.npmjs.com/package/ranma

https://segmentfault.com/a/1190000004873947

http://hao.jser.com/archive/7865/

1

1

1

1

1

1

1

1

 

javascript module system all in one的更多相关文章

  1. Node.js & module system

    Node.js & module system Node.js v10.9.0 Documentation https://nodejs.org/api/modules.html#module ...

  2. JavaScript Module Pattern: In-Depth

    2010-03-12 JavaScript Module Pattern: In-Depth The module pattern is a common JavaScript coding patt ...

  3. JavaScript module pattern精髓

    JavaScript module pattern精髓 avaScript module pattern是一种常见的javascript编码模式.这种模式本身很好理解,但是有很多高级用法还没有得到大家 ...

  4. 玩转JavaScript module pattern精髓

    JavaScript module pattern是一种常见的javascript编码模式.这种模式本身很好理解,但是有很多高级用法还没有得到大家的注意.本文,我们将回顾这种设计模式,并且介绍一些高级 ...

  5. Node.Js的Module System 以及一些常用 Module

    Node.Js学习就按照这本书的流程来. 在第7章结束与第10章结束时分别自己出一个小项目练练手.Node.Js的入门学习计划是这样. 目录:, QQ:1045642972 欢迎来索书以及讨论Node ...

  6. ABP文档 :Overall - Module System

    模块介绍 ABP提供了构建模块并将这些模块组合起来创建应用的基础设施.一个模块可以依赖另一个模块.一般来说,一个程序集可以认为是一个模块.如果应用中有多个程序集,建议为每个程序集创建一个模块定义.模块 ...

  7. 在浏览器中高效使用JavaScript module(模块)

    在浏览器中也可以使用JavaScript modules(模块功能)了.目前支持这一特性的浏览器包括: Safari 10.1. 谷歌浏览器(Canary 60) – 需要在chrome:flags里 ...

  8. Understanding RequireJS for Effective JavaScript Module Loading

    Modular programming is used to break large applications into smaller blocks of manageable code. Modu ...

  9. Javascript Module pattern template. Shows a class with a constructor and public/private methods/properties. Also shows compatibility with CommonJS(eg Node.JS) and AMD (eg requireJS) as well as in a br

    /** * Created with JetBrains PhpStorm. * User: scotty * Date: 28/08/2013 * Time: 19:39 */ ;(function ...

随机推荐

  1. Android事件分发机制五:面试官你坐啊

    前言 很高兴遇见你~ 事件分发系列文章已经到最后一篇了,先来回顾一下前面四篇,也当个目录: Android事件分发机制一:事件是如何到达activity的? : 从window机制出发分析了事件分发的 ...

  2. 使用pushplus+python实现亚马逊到货消息推送微信

    xbox series和ps5发售以来,国内黄牛价格一直居高不下.虽然海外amazon上ps5补货很少而且基本撑不过一分钟,但是xbox series系列明显要好抢很多. 日亚.德亚的xbox ser ...

  3. 关于jmeter客户端实现中HttpClient4与Java的区别

    如上图:jmeter客户端实现方式有三种,一种是java,一种是httpclient4,还有一种默认,我们来看一下java与httpclient4的区别: Java:选择压测时,链接是复用的(代码中的 ...

  4. GStreamer各个包构建

    GStreamer按功能.维护的标准化程度.依赖库的版权差异等分了若干个包(package),如 gstreamer, gst-plugins-base, gst-plugins-good, gst- ...

  5. error Unexpected use of comma operator no-sequences解决过程

    error Unexpected use of comma operator no-sequences解决过程 报错内容: ERROR in ./pages/course/_id.vue friend ...

  6. Cognos软件介绍文档(原创)

    1. Cognos简介 Cognos是世界上最大的业务智能软件制造商,它能够帮助用户提取公司数据,然后分析并汇总得出报告.Cognos有许多产品,但最为著名的还是它的PowerPlay联机分析处理(o ...

  7. Share Memory By Communicating 一等公民

    Share Memory By Communicating - The Go Programming Language https://golang.google.cn/doc/codewalk/sh ...

  8. loj10008家庭作业

    题目描述 老师在开学第一天就把所有作业都布置了,每个作业如果在规定的时间内交上来的话才有学分.每个作业的截止日期和学分可能是不同的.例如如果一个作业学分为10 ,要求在6 天内交,那么要想拿到这 10 ...

  9. LOJ10076

    USACO 2006 Nov. Gold 贝茜把家搬到了一个小农场,但她常常回到 FJ 的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而 ...

  10. centos7 快速搭建redis集群环境

    本文主要是记录一下快速搭建redis集群环境的方式. 环境简介:centos 7  + redis-3.2.4 本次用两个服务6个节点来搭建:192.168.116.120  和  192.168.1 ...