javascript module system all in one
javascript module system all in one
AMD & CMD
https://github.com/amdjs/amdjs-api/wiki/AMD
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
AMD、CMD、UMD 模块的写法
2015/03/24 · JavaScript · AMD, CMD, UMD
分享到:原文出处: David Calhoun 译文出处:奇舞团 - hxl简介
最近几年,我们可以选择的Javascript组件的生态系统一直在稳步增长。虽然陡增的选择范围是极好的,但当组件混合匹配使用时就会出现很尴尬的局面。开发新手们会很快发现不是所有组件都能彼此“和平相处”。
为了解决这个问题,两种竞争关系的模块规范AMD和CommonJS问世了,它们允许开发者遵照一种约定的沙箱化和模块化的方式来写代码,这样就能避免“污染生态系统”。
AMD
随着RequireJS成为最流行的实现方式,异步模块规范(AMD)在前端界已经被广泛认同。
下面是只依赖jquery的模块foo的代码:
JavaScript
12345678 // 文件名: foo.jsdefine(['jquery'], function ($) {// 方法function myFunc(){};// 暴露公共方法return myFunc;});还有稍微复杂点的例子,下面的代码依赖了多个组件并且暴露多个方法:
JavaScript
123456789101112 // 文件名: foo.jsdefine(['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
12345678 // 文件名: foo.js// 依赖var $ = require('jquery');// 方法function myFunc(){};// 暴露公共方法(一个)module.exports = myFunc;还有更复杂的例子,下面的代码依赖了多个组件并且暴露多个方法:
JavaScript
1234567891011121314 // 文件名: foo.jsvar $ = require('jquery');var _ = require('underscore');// methodsfunction a(){}; // 私有方法,因为它没在module.exports中 (见下面)function b(){}; // 公共方法,因为它在module.exports中定义了function c(){}; // 公共方法,因为它在module.exports中定义了// 暴露公共方法module.exports = {b: b,c: c};UMD: 通用模块规范
既然CommonJs和AMD风格一样流行,似乎缺少一个统一的规范。所以人们产生了这样的需求,希望有支持两种风格的“通用”模式,于是通用模块规范(UMD)诞生了。
不得不承认,这个模式略难看,但是它兼容了AMD和CommonJS,同时还支持老式的“全局”变量规范:
JavaScript
123456789101112131415161718 (function (root, factory) {if (typeof define === 'function' && define.amd) {// AMDdefine(['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
1234567891011121314151617181920212223 (function (root, factory) {if (typeof define === 'function' && define.amd) {// AMDdefine(['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的更多相关文章
- Node.js & module system
Node.js & module system Node.js v10.9.0 Documentation https://nodejs.org/api/modules.html#module ...
- JavaScript Module Pattern: In-Depth
2010-03-12 JavaScript Module Pattern: In-Depth The module pattern is a common JavaScript coding patt ...
- JavaScript module pattern精髓
JavaScript module pattern精髓 avaScript module pattern是一种常见的javascript编码模式.这种模式本身很好理解,但是有很多高级用法还没有得到大家 ...
- 玩转JavaScript module pattern精髓
JavaScript module pattern是一种常见的javascript编码模式.这种模式本身很好理解,但是有很多高级用法还没有得到大家的注意.本文,我们将回顾这种设计模式,并且介绍一些高级 ...
- Node.Js的Module System 以及一些常用 Module
Node.Js学习就按照这本书的流程来. 在第7章结束与第10章结束时分别自己出一个小项目练练手.Node.Js的入门学习计划是这样. 目录:, QQ:1045642972 欢迎来索书以及讨论Node ...
- ABP文档 :Overall - Module System
模块介绍 ABP提供了构建模块并将这些模块组合起来创建应用的基础设施.一个模块可以依赖另一个模块.一般来说,一个程序集可以认为是一个模块.如果应用中有多个程序集,建议为每个程序集创建一个模块定义.模块 ...
- 在浏览器中高效使用JavaScript module(模块)
在浏览器中也可以使用JavaScript modules(模块功能)了.目前支持这一特性的浏览器包括: Safari 10.1. 谷歌浏览器(Canary 60) – 需要在chrome:flags里 ...
- Understanding RequireJS for Effective JavaScript Module Loading
Modular programming is used to break large applications into smaller blocks of manageable code. Modu ...
- 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 ...
随机推荐
- Android事件分发机制五:面试官你坐啊
前言 很高兴遇见你~ 事件分发系列文章已经到最后一篇了,先来回顾一下前面四篇,也当个目录: Android事件分发机制一:事件是如何到达activity的? : 从window机制出发分析了事件分发的 ...
- 使用pushplus+python实现亚马逊到货消息推送微信
xbox series和ps5发售以来,国内黄牛价格一直居高不下.虽然海外amazon上ps5补货很少而且基本撑不过一分钟,但是xbox series系列明显要好抢很多. 日亚.德亚的xbox ser ...
- 关于jmeter客户端实现中HttpClient4与Java的区别
如上图:jmeter客户端实现方式有三种,一种是java,一种是httpclient4,还有一种默认,我们来看一下java与httpclient4的区别: Java:选择压测时,链接是复用的(代码中的 ...
- GStreamer各个包构建
GStreamer按功能.维护的标准化程度.依赖库的版权差异等分了若干个包(package),如 gstreamer, gst-plugins-base, gst-plugins-good, gst- ...
- error Unexpected use of comma operator no-sequences解决过程
error Unexpected use of comma operator no-sequences解决过程 报错内容: ERROR in ./pages/course/_id.vue friend ...
- Cognos软件介绍文档(原创)
1. Cognos简介 Cognos是世界上最大的业务智能软件制造商,它能够帮助用户提取公司数据,然后分析并汇总得出报告.Cognos有许多产品,但最为著名的还是它的PowerPlay联机分析处理(o ...
- Share Memory By Communicating 一等公民
Share Memory By Communicating - The Go Programming Language https://golang.google.cn/doc/codewalk/sh ...
- loj10008家庭作业
题目描述 老师在开学第一天就把所有作业都布置了,每个作业如果在规定的时间内交上来的话才有学分.每个作业的截止日期和学分可能是不同的.例如如果一个作业学分为10 ,要求在6 天内交,那么要想拿到这 10 ...
- LOJ10076
USACO 2006 Nov. Gold 贝茜把家搬到了一个小农场,但她常常回到 FJ 的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而 ...
- centos7 快速搭建redis集群环境
本文主要是记录一下快速搭建redis集群环境的方式. 环境简介:centos 7 + redis-3.2.4 本次用两个服务6个节点来搭建:192.168.116.120 和 192.168.1 ...