SeaJS 与 Arale

SeaJS 与 Arale
⽟玉伯
2012.9
Monday, September 17, 12

View Slide

关于我
• ⺩王保平 / lifesinger / ⽟玉伯
• ⽀支付宝 - 前端开发部
• KISSY、SeaJS、Arale 2 ……
• 微博：@⽟玉伯也叫射雕

View Slide

Topics
I. 遇到的问题
II. SeaJS -‐ 更⾃自然的代码组织
III. Arale -‐ 开放式类库构建
IV. 开源与未来

View Slide

I. 遇到的问题

View Slide

问题⼀一：脚本组织与加载

View Slide

⻚页⾯面中引⼊入 script

View Slide

⻚页⾯面中引⼊入 script
这是犀⽜牛书⾥里推荐的写法，
⽤用来写写博客⺴⽹网站没什么问题。

View Slide

当单个 script 变⼤大时

View Slide

近8000⾏行的单⽂文件，多⼈人协作不⽅方便。
解决办法：拆。
当单个 script 变⼤大时

View Slide

拆开后的烦恼

View Slide

拆开后的烦恼
拆开能缓解可维护性，但性能不佳：
1）请求数太多
2）同步阻塞

View Slide

请求数太多的解决⽅方案：combo

View Slide

请求数太多的解决⽅方案：combo
同步阻塞严重影响⽆无缓存时的⻚页⾯面打开速度！

View Slide

同步阻塞的解决⽅方案：loader

View Slide

同步阻塞的解决⽅方案：loader
解决了同步阻塞，但需要配置，不够简洁。
同时带来了⼀一些新的问题。

View Slide

问题⼆二：命名与版本冲突

View Slide

全局变量
<br/>var FP = ...<br/>var t = ...<br/>
...
<br/>var t = ...<br/>var alibaba_mm = ...<br/>
在⼤大规模开发中，要⽤用好全局变量很难。

View Slide

命名空间
var YAHOO = {}
YAHOO.util = {}
YAHOO.util.DOM = {}
YAHOO.util.Event = {}
...
命名空间和域名⼀一样，是⼀一种稀缺资源
同时会增加⽤用户的记忆负担

View Slide

YUI 的命名空间困局
YUI().use(“io-base”, “mod-a”, “mod-b”, function(Y) {
// Y.on 是 mod-a 添加的、还是 mod-b 添加的？
// 如果都往 Y 上添加 on ⽅方法，会出现什么问题？
Y.on(...);
// io-base 在 Y 上添加了 io ⽅方法。
// 是怎么知道的呢？查⽂文档？为什么不是 “Y.IO” ？
var request = Y.io(...);
});
Y 是另⼀一个“全局”变量！！！

View Slide

版本“锁定”的苦恼
src=”http://a.tbcdn.cn/tbra/1.0/tbra-widgets.js”>
src=”http://a.tbcdn.cn/yui/2.7.0/build/container/container-min.js”>
src=”http://a.tbcdn.cn/kissy/1.0.8/ks-core-min.js”>
YUI 2.7.0
KISSY 1.0.8
⽼老代码多
升级代价⼤大
+ 版本冲突
资源不够
时间紧张
...
= 决定在旧版本
上继续开发
依赖旧版本的代码更多

View Slide

问题三：组件共享

View Slide

总监：⼩小明，Apple 的这个效果不错，我们的营销⻚页⾯面也
整个，给你半⼩小时搞定上线。
⼩小明：⽼老⼤大，这效果是基于 jQuery 的，我们⽤用的是
YUI，要重新开发啊，⾄至少要⼀一天……
总监：不是很简单的事吗？想当年我都会写呀……

View Slide

QueryString.parse(‘a=b&b=c’);
//=> { a: ‘b’, b: ‘c’ }
QueryString.stringify({ ‘foo’: ‘bar’ });
//=> ‘foo=bar’
跨环境共享
这是⼀一个梦，但并不遥远。

View Slide

问题四：调试之痛

View Slide

#/etc/hosts
127.0.0.1 a.tbcdn.cn
Proxy
Willow
所有⽅方案都不够敏捷。

View Slide

核⼼心问题
• 可维护性
• 性能
• 共享

View Slide

II. SeaJS -‐ 更⾃自然的代码组织⽅方式

View Slide

A Module Loader for the Web
SeaJS 是什么

View Slide

模块系统的基本问题
• 系统成员：模块是什么？
• 系统通讯：模块之间如何交互？

View Slide

模块定义规范
CommonJS
Modules / 1.1
AMD
CMD
Node Modules ...
Intel
CommonJS
Modules / 2.0
Modules /
Wrappings
所有这些规范，都是为了解决
模块系统的两个基本问题。

View Slide

从 Server 到 Web
• node_modules 查找不适合 Web 端
• ⽂文件的同步读取不适合 Web 端
• 跨域
• 性能
• 浏览器兼容性

View Slide

CMD 模块
deﬁne(function(require, exports, module) {
var $ = require(‘jquery’)
var math = require(‘./math’)
exports.doSomething = ...
})

View Slide

依赖的回调树
a
b c
d
e f
g
h

View Slide

循环依赖
a
b c
d
e
f
g
h

View Slide

define(function() {
alert(‘Hello, world!’);
});
init.js
test.html

<br/>seajs.use(‘./init’);<br/>
• ⼀一个模块⼀一个⽂文件
• 使⽤用 deﬁne 定义模块
• 使⽤用 use 使⽤用模块
基本⽤用法

View Slide

define(function(require, exports) {
exports.message = ‘Hello, world!’;
});

<br/>seajs.use(‘./init’, function(init) {<br/>alert(init.message);<br/>});<br/>
• 使⽤用 exports 对外提供接⼝口
• 使⽤用 use 使⽤用加载的模块对象
基本⽤用法
init.js
test.html

View Slide

var weather = require(‘./weather’);
var temperature = weather.getTemperature(‘Beijing’);
exports.message = ‘The temperature of Beijing is ’ +
temperature;
});
• 使⽤用 require 获取其他模块对象
• ⾃自动处理依赖
• 关注点分离：直接依赖的模块 + 向外提供的接⼝口
var io = require(‘./io’);
...
exports.getTemperature = function(city) { ... };
});
基本⽤用法
init.js
weather.js

View Slide

define(function(require, exports, module) {
var a = require(‘./a’);
...
exports.x = ... ;
});
基本⽤用法
seajs.use(‘./init’, function(init) {
...
});
模块的定义：
模块的使⽤用：
https://github.com/seajs/seajs/issues/266
快速参考（最常⽤用的 7 个 API）：

View Slide

SeaJS 的应⽤用场景
•SeaJS 是更⾃自然的代码组织⽅方式
•只要项⺫⽬目的 JS ⽂文件超过 3 个，就适合⽤用
•⽂文件越多，则越适合

View Slide

SeaJS ⽂文档
http://seajs.org/docs/#api
使⽤用⽂文档：
http://seajs.org/docs/examples/
更多例⼦子：
请仔细看例⼦子和⽂文档，阅读完这些⽂文档，
SeaJS 就绝对⼊入⻔门了。

View Slide

调试友好

View Slide

插件开发

View Slide

疯狂的测试⽤用例
http://seajs.org/test/runner.html
PC、Mobile
理论上是个浏览器就应该可以跑

View Slide

期待你的参与
https://github.com/seajs/seajs

View Slide

已有哪些公司在⽤用

View Slide

III. Arale -‐ 开放式类库构建

View Slide


View Slide

vs.
⼤大教堂集市

View Slide


View Slide

aralejs.org
Arale 是⼀一个开放、简单、易⽤用的前端基础类库

View Slide

1. 构建理念

View Slide

Open your minds
海纳百川、有容乃⼤大

View Slide

K.I.S.S
如⽆无必要、务增实体

View Slide

Easy to use
⼀一⺫⽬目了然、容易学习

View Slide

Moderate
Flexibility
适度灵活

View Slide

Intentional
Duplication
适量重复

View Slide

2. 整体设计

View Slide

开放式前端基础技术体系

View Slide

Arale 整体构成

View Slide

Arale 由三部分组成
基础⼯工具组件

View Slide

基础
class base
events widget
Arale 的核⼼心
1. 规范了组件的写法
2. 提供实⽤用的功能⽅方便扩展

View Slide

⼯工具
jquery
handlebars
underscore
json
cookie
position
iframe-shim
moment
async
store
⼯工具是可以直接拿来⽤用的

View Slide

组件
提供⼀一套 UI 解决⽅方案
1. Arale 最终为精选集
2. 组件会有继承链
widget
switchable
dialog
overlay
calendar
popup
xbox
validator
select
tab slide

View Slide

3. Widget 设计

View Slide

Attributes
Methods
Events
Who am I?
What can I do?
+ Properties
Conﬁg

View Slide

Config
new Overlay({
width: 200,
height: 300
});
userConfig
data-widget=”overlay”
data-width=”200”
data-height=”300”>
...

dataConfig
var Overlay = Widget.extend({
attrs: {
width: 100,
height: 100
}
});
inheritedConfig
> >
autoRender

View Slide

Attribute
this.set(‘width’, 300);
var width = this.get(‘width’);
this.on(‘change:width’, callback);
_onRenderWidth: function(val) {
this.element.css(‘width’, val);
}
Events & Render Binding
var Overlay = Widget.extend({
attrs: {
width: {
value: 100,
getter: function(val) {
return parseFloat(val);
}
}
}
});
getter / setter

View Slide

Properties
this.element
this.triggers
this.panels
...
property ~= frequently used attribute

View Slide

Events
events: {
‘click [data-‐role=date]’: ‘_selectDate’,
‘click [data-‐role=month]’: ‘_selectMonth’
}
Events Delegate

View Slide

Methods
Attribute is ﬁne,
and method is convenient.
this.set(‘visible’, true);
this.show();

View Slide

Creation Lifecycle
initAttrs
parseElement
initProps
delegateEvents
setup
render

View Slide

Template & Model
Powed by the powerful Handlebars
new MyWidget({
template: $(‘#my-tpl’).html(),
model: {
hasTitle: true,
title: ‘foo’,
content: ‘bar’
}
});
<br/><div><br/>{{#if hasTitle}}<br/><h3>{{title}}</h3><br/>{{/if}}<br/><div>{{content}}</div><br/></div><br/>
renderPartial(selector)

View Slide

data-‐attr API
Widget.autoRenderAll();

...
...


View Slide

例⼦子：Overlay
https://github.com/aralejs/overlay/blob/master/src/overlay.js

View Slide


View Slide

IV. 开源与未来

View Slide

开源的⺫⽬目的
• 把好的东⻄西分享出来
• 让好的东⻄西变得更好
• 其他⼀一切皆是浮云

View Slide

开源中最重要的
• ⼀一个优秀、靠谱的想法
• 疯狂⽽而持久的坚持
开源项⺫⽬目起步时，梦想都很丰满，但现实都
很⾻骨感。很多⼈人等不到后天的太阳，经常离
开于明天的晚上。

View Slide

JavaScript ⽣生态圈
• ⻢马云：建⽴立新商业⽂文明
• 我们：构建 JavaScript 新⽣生态圈

View Slide

})(
‘Q & A’
) ;

View Slide

})(
‘Q & A’
)

View Slide

SeaJS 与 Arale

SeaJS 与 Arale

lifesinger

More Decks by lifesinger

Other Decks in Technology

Featured

Transcript