a glance of Javascript module
•Download as KEY, PDF•
1 like•1,264 views
CJS Module AMD UMD ES harmony
Recommended
More Related Content
Similar to a glance of Javascript module
Similar to a glance of Javascript module (20)
a glance of Javascript module
- 1. JavaScript模块一览 qiaofu@taobao.com
- 2. 模块化 • 回顾 - 于模块化 • JavaScript主流的几 模块规范
- 3. 大纲 • CommonJS Module • AMD • UMD • ES Harmony Module
- 5. CommonJS 目标：CommonJS旨在建立一个服务器 端， 面端，命令行以及浏览器上面的生 态环境。
- 6. CJS 规范 目前的产出 • 模块规范 • 包规范(Package) • JSGI • promises • ...
- 7. CJS未来的计 • Language and Runtime Services(提供语言 级和编译器的API) • Logging(调试打log的标准化) • Relational database interface( 系型数据 库的接口) • ResultSets (collections of data maybe from RDBMS, maybe from other sources)(数据 库或其他来源的结果集)
- 8. CJS未来的计 • Language and Runtime Services(提供语言 级和编译器的API) • Logging(调试打log的标准化) • Relational database interface( 系型数据 库的接口) • ResultSets (collections of data maybe from RDBMS, maybe from other sources)(数据 库或其他来源的结果集)
- 9. • Logging(调试打log的标准化) • Relational database interface( 系型数据 CJS未来的计 库的接口) • ResultSets (collections of data maybe from RDBMS, maybe from other sources)(数据 库或其他来源的结果集) • Concurrency(http://wiki.commonjs.org/ wiki/Concurrency)(并发) • C unified API to our Target Platforms(为目 标平台的C统一接口)
- 10. wiki/Concurrency)(并发) CJS未来的计 • C unified API to our Target Platforms(为目 标平台的C统一接口) • Subprocesses (popen)(子进程之间的通信) • HTTP 客户端API • Email • Jabber(XMPP)(即时通讯) • 国际化(本地语言支持)
- 11. CJS 模块
- 12. CJS 模块
- 13. CJS 模块 • 1.0 - Node.js • 1.1 - Narwhal 0.2,SproutCore1.1 • 1.1.1 - SeaJs,CourchDB
- 16. AMD Api • define(id?, dependencies?, factory);
- 17. AMD Api define("overlay",["base","dom","uibase"],function() { return { init: function(source, target) {...} }; });
- 19. AMD的一点妥协 define(function(require, exports, module) { var base = require('base'); exports.show = function() { // todo with module base } });
- 21. UMD
- 22. UMD
- 23. ES Harmony模块 • ES Harmony - 下一代的EMCAScript • ES Harmony 模块
- 24. ES 模块的定义 module math { export function sum(x, y) { return x + y; } export var pi = 3.141593; }
- 25. ES 模块的使用 • 使用import 键字导入 的模块 import {sum, pi} from math; alert("2π = " + sum(pi, pi)); import * from math; alert("2π = " + sum(pi, pi)); http://wiki.ecmascript.org/doku.php?id=harmony:modules
- 26. • 使用import 键字导入 的模块 ES 模块的使用 import {sum, pi} from math; alert("2π = " + sum(pi, pi)); import * from math; alert("2π = " + sum(pi, pi)); module M = math; alert("2π = " + M.sum(M.pi, M.pi)); http://wiki.ecmascript.org/doku.php?id=harmony:modules
- 27. ES Harmony • 语法和之前的js语法有一些不一样 • 模块规范没有做向前兼容，在低级浏览 器中没有支持。
- 28. The End
Editor's Notes
- \n
- 之前说过一次模块化的JavaScript，主要是围绕顽兔项目对于kissy模块的一些方式的说明，解释了一些模块的特性，模块中的常用设计模式。\n今天主要说一下，KISSY1.2 loader背后隐含的一些模块规范(为什么kissy的模块会这样写法)，还有哪些主流的模块的框架？\n
- 目前大家所熟知的主要有几种JavaScript模块规范，差不多有四种，第一种和第四种之所以有一些标灰，是因为，CommonJS和ES Harmony本身并不只是一个模块的规范。模块只是其规范定义的一部分。\n
- \n
- \n
- 包规范关注的是模块(包)的文件组织和文件包的描述语法.大家可能见过node程序会有自己的一个程序依赖的配置文件(package.json)，那个就是基于这个包规范编写的。\n\nJSGI 则是一个通过js在web服务器上面直接提供应用程序接口，类似CGI那样的实现。\n\nPromises为异步返回的结果对象(这个对象不确定是否在固定的时候有值)需要引发的交互提供了一个友好的接口。通过这样的接口统一，不同的组件可以对异步动作的结果进行处理，对可预见的结果进行响应。Promises还可以提供更方便的语言扩展，来协助异步的操作。\n\n
- \n
- \n
- \n
- 我们可以看到它很像我们之前写的nodejs的模块，使用了require和exports，还有一个明显的特点，模块的输出始终是一个对象的形式。\n
- Narwhal 0.2版本 - 一个跨平台，多编译器的JavaScript平台，旨在提供一个浏览器环境之前的构建JavaScript应用的基础。\n
- 比如有人建议是否加入python式语法的模块，有人建议使用安全模块(已在1.1规范中被加入)，模块的includeOnce问题等等，比如还有cjs的组织再考虑使用module.setExports(exports)的方式输出模块。\n
- 浏览器环境不同于服务器端，它的模块有一个HTTP请求过程。这个请求过程多数使用script tag，script tag默认的异步性导致很难实现与NodeJS一模一样的模块格式。\n\n虽然有人使用wrapping的规范使得开发者感觉是在使用cjs的方式在进行开发。\n\n但NodeJS终究是服务器端的JavaScript，没有必要把这些条条框框放到浏览器JavaScript环境中。这时候有人设计了amd这种形式的规范。\n这是专门针对浏览器设计的一个模块规范。\n
- id标识了模块名，可以省略.\n\ndependencies标识了模块的依赖，是一个依赖名组成的数组，表示当前的模块的依赖列表。如果不存在依赖也可以省略。\n\nfactory是用来初始化模块的一个函数或者仅仅是一个模块对象，如果是函数的话，它在依赖圈应该只执行一次，如果是一个对象，那么这个对象就作为模块的返回进行输出。\n\namd的模块返回不像cjs的模块那样只局限于一个对象的形式。\n
- \n
- 规范保留了全局变量"define"用来申明模块和包的异步元数据的定义，并且也为未来的CommonJS API做了预留。因此模块加载器不应该添加额外的方法到这个函数上面。\n\n规范还保留了全局的"require"用来充当模块的加载器。模块加载器可以在适合的时候自由使用。使用者可以添加属性和方法到这这个变量上面用于模块加载的特殊需要。他们也可以不用require。\n
- \n
- UMD的实现很简单，先判断是否支持NodeJS模块格式（exports是否存在），存在则使用NodeJS模块格式。\n再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。前两个都不存在，则将模块公开到全局（window或global）\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n