seajs - 跨环境模块化开发实践

SeaJS - 跨环境模块化开发实践

玉伯2011/05/14

Saturday, May 14, 2011

I、从脚本引入说起


JavaScript The Definitive Guide 6th Edition

这是权威指南推荐的脚本引入方式，对于简单页面来说，这样做的确足够了。


view-source:http://www.apple.com/

漂亮简洁的苹果网站背后，丑陋的脚本引入代码。


http://www.apple.com

http://www.apple.com

http://httparchive.org/viewsite.php?pageid=198326




view-source:http://www.yahoo.com/

YAHOO 解决了该问题，但方式不那么优雅。可维护性上也不够方便。


http://www.yahoo.com

http://www.yahoo.com

脚本加载，我们如何才能更优雅的解决？


II、node.JS & Modules


require(‘what you want’)


exports.what_you_provide = ...


Modules/1.0 核心

一个文件就是一个模块

require 引入依赖模块

exports 向外提供接口

module 存储模块元信息


https://github.com/joyent/node/blob/master/lib/module.js

node.JS 的内部实现




当 node 的模块遇上浏览器


硝烟弥漫的浏览器

同步阻塞式加载是性能杀手

考虑跨域，将脚本的下载和执行分开是个问题

没有妥当可靠的 runInNewContext

浏览器的兼容性

依赖的模块不仅仅是 JS 文件，还可能有 CSS

……


CommonJS Modules/1.0 模块，无法直接运行于浏览器环境！


Wes Garland: Modules/2.0 - BravoJS

James Burke: Modules/AMD - RequireJS

Kevin H. Smith: Modules/Wrappings - FlyScript

...

CommonJS 社区的努力


还处于蓝海 + 初期的百花齐放阶段


等待 or 前行？


III、SeaJS 的尝试


SeaJS 的设计理念

保持简单

遵守规范

避免重复


Module Authoring Format

http://seajs.com/docs/api/module-authoring-format.html




SeaJS 是一个模块加载器。

遵循 CommonJS Modules/Wrappings 规范的 define 形式。

简单演示：http://seajs.com/docs/guide/hello-seajs.html


http://seajs.com/docs/guide/hello-seajs.html






实例演示

http://seajs.com/docs/demo/calculator/




打包部署

http://seajs.com/docs/deployment.html




世界上有很多聪明人，很多事情已经做得非常棒。有太多更需要投入的地方，的确不应该在别人已经做得很好的地方浪费时间了。

via 《大教堂与集市》


将现有类库转化为 SeaJS 的模块

https://github.com/seajs/seajs/blob/master/modules/jquery/build.xml




例：Jscex clock

http://seajs.com/docs/demo/jscex/clock.html




例：给苹果首页提速


让 SeaJS 模块运行于 node 环境

snode filename.js --base path/to/base

https://github.com/seajs/seajs/tree/master/tools/binSaturday, May 14, 2011

https://github.com/seajs/seajs/tree/master/tools/bin

https://github.com/seajs/seajs/tree/master/tools/bin

海纳百川、有容乃大

http://seajs.com/docs/recommended-modules.html




Enjoy Modular Development

&

Write Once, Run Anywhere


FAQ

http://lifesinger.org/http://seajs.com/

http://twitter.com/lifesinger


http://lifesinger.org

http://lifesinger.org

http://seajs.com

http://seajs.com



seajs - 跨环境模块化开发实践

Technology