seajs - 跨环境模块化开发实践
Post on 28-Jan-2015
199 Views
Preview:
DESCRIPTION
TRANSCRIPT
SeaJS - 跨环境模块化开发实践
玉伯2011/05/14
Saturday, May 14, 2011
I、从脚本引入说起
Saturday, May 14, 2011
JavaScript The Definitive Guide 6th Edition
这是权威指南推荐的脚本引入方式，对于简单页面来说，这样做的确足够了。
Saturday, May 14, 2011
view-source:http://www.apple.com/
漂亮简洁的苹果网站背后，丑陋的脚本引入代码。
Saturday, May 14, 2011
http://httparchive.org/viewsite.php?pageid=198326
Saturday, May 14, 2011
view-source:http://www.yahoo.com/
YAHOO 解决了该问题，但方式不那么优雅。可维护性上也不够方便。
Saturday, May 14, 2011
脚本加载，我们如何才能更优雅的解决？
Saturday, May 14, 2011
II、node.JS & Modules
Saturday, May 14, 2011
require(‘what you want’)
Saturday, May 14, 2011
exports.what_you_provide = ...
Saturday, May 14, 2011
Saturday, May 14, 2011
Modules/1.0 核心
一个文件就是一个模块
require 引入依赖模块
exports 向外提供接口
module 存储模块元信息
Saturday, May 14, 2011
https://github.com/joyent/node/blob/master/lib/module.js
node.JS 的内部实现
Saturday, May 14, 2011
当 node 的模块遇上浏览器
Saturday, May 14, 2011
硝烟弥漫的浏览器
同步阻塞式加载是性能杀手
考虑跨域，将脚本的下载和执行分开是个问题
没有妥当可靠的 runInNewContext
浏览器的兼容性
依赖的模块不仅仅是 JS 文件，还可能有 CSS
……
Saturday, May 14, 2011
CommonJS Modules/1.0 模块，无法直接运行于浏览器环境！
Saturday, May 14, 2011
Wes Garland: Modules/2.0 - BravoJS
James Burke: Modules/AMD - RequireJS
Kevin H. Smith: Modules/Wrappings - FlyScript
...
CommonJS 社区的努力
Saturday, May 14, 2011
还处于蓝海 + 初期的百花齐放阶段
Saturday, May 14, 2011
等待 or 前行？
Saturday, May 14, 2011
III、SeaJS 的尝试
Saturday, May 14, 2011
SeaJS 的设计理念
保持简单
遵守规范
避免重复
Saturday, May 14, 2011
Module Authoring Format
http://seajs.com/docs/api/module-authoring-format.html
Saturday, May 14, 2011
SeaJS 是一个模块加载器。
遵循 CommonJS Modules/Wrappings 规范的 define 形式。
简单演示：http://seajs.com/docs/guide/hello-seajs.html
Saturday, May 14, 2011
实例演示
http://seajs.com/docs/demo/calculator/
Saturday, May 14, 2011
打包部署
http://seajs.com/docs/deployment.html
Saturday, May 14, 2011
世界上有很多聪明人，很多事情已经做得非常棒。有太多更需要投入的地方，的确不应该在别人已经做得很好的地方浪费时间了。
via 《大教堂与集市》
Saturday, May 14, 2011
Saturday, May 14, 2011
Saturday, May 14, 2011
将现有类库转化为 SeaJS 的模块
https://github.com/seajs/seajs/blob/master/modules/jquery/build.xml
Saturday, May 14, 2011
例：Jscex clock
http://seajs.com/docs/demo/jscex/clock.html
Saturday, May 14, 2011
例：给苹果首页提速
Saturday, May 14, 2011
让 SeaJS 模块运行于 node 环境
snode filename.js --base path/to/base
https://github.com/seajs/seajs/tree/master/tools/binSaturday, May 14, 2011
海纳百川、有容乃大
http://seajs.com/docs/recommended-modules.html
Saturday, May 14, 2011
Enjoy Modular Development
&
Write Once, Run Anywhere
Saturday, May 14, 2011
FAQ
http://lifesinger.org/http://seajs.com/
http://twitter.com/lifesinger
Saturday, May 14, 2011
top related