Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SeaJS 与 Arale
lifesinger
September 17, 2012
Technology
12
1.3k
SeaJS 与 Arale
lifesinger
September 17, 2012
Tweet
Share
More Decks by lifesinger
See All by lifesinger
前端的云时代
lifesinger
18
1k
基于 SeaJS 的调试实践
lifesinger
19
1.4k
SeaJS 从入门到精通
lifesinger
44
7.4k
小脚本大世界
lifesinger
10
830
Other Decks in Technology
See All in Technology
BFFとmicroservicesアーキテクチャ
hirac1220
0
110
[SRE NEXT 2022]組織に対してSREを適用するとはどういうことか
srenext
0
640
失敗を経験したあなたへ〜建設的なインシデントの振り返りを行うために実践するべきこと〜
nobuakikikuchi
0
220
信頼性の階層の一段目を積み上げる/Monitoring Dashboard
shonansurvivors
0
190
ソフトウェアテストで参考にしている67のモノ #scrumniigata / 67 things for software testing
kyonmm
PRO
1
850
プロダクトの理想と現実はなぜ乖離しがち?プロダクト作りに潜む問題を考える
suzukentaro
0
270
XRを取り巻く技術の正体と未来
kajiken_meson
0
210
toilを解消した話
asumaywy
0
220
ドキュメントの翻訳に必要なこと
mayukosawai
0
190
スポーツ・エンタメにおける映像伝送技術の実装と挑戦 〜車載カメラ、5G〜
mixi_engineers
PRO
1
160
runn is a package/tool for running operations following a scenario. / golang.tokyo #32
k1low
1
240
我々はなぜテストをするのか?
kawaguti
PRO
0
640
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
GitHub's CSS Performance
jonrohan
1020
410k
Side Projects
sachag
449
37k
Robots, Beer and Maslow
schacon
152
7.1k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
Embracing the Ebb and Flow
colly
73
3.3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Facilitating Awesome Meetings
lara
29
3.9k
Designing for Performance
lara
596
63k
Transcript
SeaJS 与 Arale ⽟玉伯 2012.9 Monday, September 17, 12
关于我 • ⺩王保平 / lifesinger / ⽟玉伯 • ⽀支付宝 -
前端开发部 • KISSY、SeaJS、Arale 2 …… • 微博:@⽟玉伯也叫射雕 Monday, September 17, 12
Topics I. 遇到的问题 II. SeaJS -‐ 更⾃自然的代码组织 III. Arale -‐
开放式类库构建 IV. 开源与未来 Monday, September 17, 12
I. 遇到的问题 Monday, September 17, 12
问题⼀一:脚本组织与加载 Monday, September 17, 12
⻚页⾯面中引⼊入 script Monday, September 17, 12
⻚页⾯面中引⼊入 script 这是犀⽜牛书⾥里推荐的写法, ⽤用来写写博客⺴⽹网站没什么问题。 Monday, September 17, 12
当单个 script 变⼤大时 Monday, September 17, 12
近8000⾏行的单⽂文件,多⼈人协作不⽅方便。 解决办法:拆。 当单个 script 变⼤大时 Monday, September 17, 12
拆开后的烦恼 Monday, September 17, 12
拆开后的烦恼 拆开能缓解可维护性,但性能不佳: 1)请求数太多 2)同步阻塞
Monday, September 17, 12
<script type="text/javascript" src="http://r.suc.itc.cn/ combo.action?v.11112401&r= /itoolbar/plugins/jquery-1.6.2.js| /itoolbar/core/passport.js| /itoolbar/core/base64.js| /itoolbar/core/jquery.cookie.js| /itoolbar/jquery.itoolbar.index.js &t=js&c=utf-8"
charset="utf-8"></script> 请求数太多的解决⽅方案:combo Monday, September 17, 12
<script type="text/javascript" src="http://r.suc.itc.cn/ combo.action?v.11112401&r= /itoolbar/plugins/jquery-1.6.2.js| /itoolbar/core/passport.js| /itoolbar/core/base64.js| /itoolbar/core/jquery.cookie.js| /itoolbar/jquery.itoolbar.index.js &t=js&c=utf-8"
charset="utf-8"></script> 请求数太多的解决⽅方案:combo Monday, September 17, 12
<script type="text/javascript" src="http://r.suc.itc.cn/ combo.action?v.11112401&r= /itoolbar/plugins/jquery-1.6.2.js| /itoolbar/core/passport.js| /itoolbar/core/base64.js| /itoolbar/core/jquery.cookie.js| /itoolbar/jquery.itoolbar.index.js &t=js&c=utf-8"
charset="utf-8"></script> 请求数太多的解决⽅方案:combo 同步阻塞严重影响⽆无缓存时的⻚页⾯面打开速度! Monday, September 17, 12
同步阻塞的解决⽅方案:loader Monday, September 17, 12
同步阻塞的解决⽅方案:loader 解决了同步阻塞,但需要配置,不够简洁。 同时带来了⼀一些新的问题。 Monday, September 17, 12
问题⼆二:命名与版本冲突 Monday, September 17, 12
全局变量 <script> var FP = ... var t = ...
</script> ... <script> var t = ... var alibaba_mm = ... </script> 在⼤大规模开发中,要⽤用好全局变量很难。 Monday, September 17, 12
命名空间 var YAHOO = {} YAHOO.util = {} YAHOO.util.DOM =
{} YAHOO.util.Event = {} ... 命名空间和域名⼀一样,是⼀一种稀缺资源 同时会增加⽤用户的记忆负担 Monday, September 17, 12
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 是另⼀一个“全局”变量!!! Monday, September 17, 12
版本“锁定”的苦恼 <script src=”http://a.tbcdn.cn/tbra/1.0/tbra-widgets.js”></script> <script src=”http://a.tbcdn.cn/yui/2.7.0/build/container/container-min.js”></script> <script src=”http://a.tbcdn.cn/kissy/1.0.8/ks-core-min.js”></script> YUI 2.7.0 KISSY
1.0.8 ⽼老代码多 升级代价⼤大 + 版本冲突 资源不够 时间紧张 ... = 决定在旧版本 上继续开发 依赖旧版本的代码更多 Monday, September 17, 12
问题三:组件共享 Monday, September 17, 12
总监:⼩小明,Apple 的这个效果不错,我们的营销⻚页⾯面也 整个,给你半⼩小时搞定上线。 ⼩小明:⽼老⼤大,这效果是基于 jQuery 的,我们⽤用的是 YUI,要重新开发啊,⾄至少要⼀一天…… 总监:不是很简单的事吗?想当年我都会写呀…… Monday,
September 17, 12
QueryString.parse(‘a=b&b=c’); //=> { a: ‘b’, b: ‘c’ } QueryString.stringify({ ‘foo’:
‘bar’ }); //=> ‘foo=bar’ 跨环境共享 这是⼀一个梦,但并不遥远。 Monday, September 17, 12
问题四:调试之痛 Monday, September 17, 12
#/etc/hosts 127.0.0.1 a.tbcdn.cn Proxy Willow 所有⽅方案都不够敏捷。 Monday, September 17, 12
核⼼心问题 • 可维护性 • 性能 • 共享 Monday, September 17,
12
II. SeaJS -‐ 更⾃自然的代码组织⽅方式 Monday, September 17, 12
A Module Loader for the Web SeaJS 是什么 Monday, September
17, 12
模块系统的基本问题 • 系统成员:模块是什么? • 系统通讯:模块之间如何交互? Monday, September 17, 12
模块定义规范 CommonJS Modules / 1.1 AMD CMD Node Modules
... Intel CommonJS Modules / 2.0 Modules / Wrappings 所有这些规范,都是为了解决 模块系统的两个基本问题。 Monday, September 17, 12
从 Server 到 Web • node_modules 查找不适合 Web 端 •
⽂文件的同步读取不适合 Web 端 • 跨域 • 性能 • 浏览器兼容性 Monday, September 17, 12
CMD 模块 define(function(require, exports, module) { var
$ = require(‘jquery’) var math = require(‘./math’) exports.doSomething = ... }) Monday, September 17, 12
依赖的回调树 a b c d e f g h Monday,
September 17, 12
循环依赖 a b c d e f g h Monday,
September 17, 12
define(function() { alert(‘Hello, world!’); }); init.js test.html <script src=”libs/seajs/1.2.0/sea.js”></script> <script>
seajs.use(‘./init’); </script> • ⼀一个模块⼀一个⽂文件 • 使⽤用 define 定义模块 • 使⽤用 use 使⽤用模块 基本⽤用法 Monday, September 17, 12
define(function(require, exports) { exports.message = ‘Hello, world!’; }); <script src=”libs/seajs/1.2.0/sea.js”></script>
<script> seajs.use(‘./init’, function(init) { alert(init.message); }); </script> • 使⽤用 exports 对外提供接⼝口 • 使⽤用 use 使⽤用加载的模块对象 基本⽤用法 init.js test.html Monday, September 17, 12
define(function(require, exports) { var weather = require(‘./weather’); var temperature =
weather.getTemperature(‘Beijing’); exports.message = ‘The temperature of Beijing is ’ + temperature; }); • 使⽤用 require 获取其他模块对象 • ⾃自动处理依赖 • 关注点分离:直接依赖的模块 + 向外提供的接⼝口 define(function(require, exports) { var io = require(‘./io’); ... exports.getTemperature = function(city) { ... }; }); 基本⽤用法 init.js weather.js Monday, September 17, 12
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): Monday, September 17, 12
SeaJS 的应⽤用场景 •SeaJS 是更⾃自然的代码组织⽅方式 •只要项⺫⽬目的 JS ⽂文件超过 3 个,就适合⽤用 •⽂文件越多,则越适合
Monday, September 17, 12
SeaJS ⽂文档 http://seajs.org/docs/#api 使⽤用⽂文档: http://seajs.org/docs/examples/ 更多例⼦子: 请仔细看例⼦子和⽂文档,阅读完这些⽂文档, SeaJS 就绝对⼊入⻔门了。 Monday,
September 17, 12
调试友好 http://seajs.org/docs/#api Monday, September 17, 12
插件开发 http://seajs.org/docs/#api Monday, September 17, 12
疯狂的测试⽤用例 http://seajs.org/test/runner.html PC、Mobile 理论上是个浏览器就应该可以跑 Monday, September 17, 12
期待你的参与 https://github.com/seajs/seajs Monday, September 17, 12
已有哪些公司在⽤用 Monday, September 17, 12
III. Arale -‐ 开放式类库构建 Monday, September 17, 12
Monday, September 17, 12
vs. ⼤大教堂 集市 Monday, September 17, 12
Monday, September 17, 12
aralejs.org Arale 是⼀一个开放、简单、易⽤用的前端基础类库 Monday, September 17, 12
1. 构建理念 Monday, September 17, 12
Open your minds 海纳百川、有容乃⼤大 Monday, September 17, 12
K.I.S.S 如⽆无必要、务增实体 Monday, September 17, 12
Easy to use ⼀一⺫⽬目了然、容易学习 Monday, September 17, 12
Moderate Flexibility 适度灵活 Monday, September 17, 12
Intentional Duplication 适量重复 Monday, September 17, 12
2. 整体设计 Monday, September 17, 12
开放式前端基础技术体系 Monday, September 17, 12
Arale 整体构成 Monday, September 17, 12
Arale 由三部分组成 基础 ⼯工具 组件 Monday, September 17, 12
基础 class base events widget Arale 的核⼼心 1. 规范了组件的写法 2.
提供实⽤用的功能⽅方便扩展 Monday, September 17, 12
⼯工具 jquery handlebars underscore json cookie position iframe-shim moment async
store ⼯工具是可以直接拿来⽤用的 Monday, September 17, 12
组件 提供⼀一套 UI 解决⽅方案 1. Arale 最终为精选集 2. 组件会有继承链 widget
switchable dialog overlay calendar popup xbox validator select tab slide Monday, September 17, 12
3. Widget 设计 Monday, September 17, 12
Attributes Methods Events Who am I? What can I do?
+ Properties Config Monday, September 17, 12
Config new Overlay({ width: 200, height: 300 }); userConfig <div
data-widget=”overlay” data-width=”200” data-height=”300”> ... </div> dataConfig var Overlay = Widget.extend({ attrs: { width: 100, height: 100 } }); inheritedConfig > > autoRender Monday, September 17, 12
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 Monday, September 17, 12
Properties this.element this.triggers this.panels ... property ~= frequently used attribute
Monday, September 17, 12
Events events: { ‘click [data-‐role=date]’: ‘_selectDate’,
‘click [data-‐role=month]’: ‘_selectMonth’ } Events Delegate Monday, September 17, 12
Methods Attribute is fine, and method is convenient. this.set(‘visible’,
true); this.show(); Monday, September 17, 12
Creation Lifecycle initAttrs parseElement initProps delegateEvents setup render Monday, September
17, 12
Template & Model Powed by the powerful Handlebars new MyWidget({
template: $(‘#my-tpl’).html(), model: { hasTitle: true, title: ‘foo’, content: ‘bar’ } }); <script id=”my-tpl” type=”text/handlebars-template”> <div> {{#if hasTitle}} <h3>{{title}}</h3> {{/if}} <div>{{content}}</div> </div> </script> renderPartial(selector) Monday, September 17, 12
data-‐attr API Widget.autoRenderAll(); <div data-widget=”slide” data-delay=”200” data-effect=”fade”> <ul data-role=”nav”>...</ul> <div
data-role=”content”>...</div> </div> Monday, September 17, 12
例⼦子:Overlay https://github.com/aralejs/overlay/blob/master/src/overlay.js Monday, September 17, 12
Monday, September 17, 12
IV. 开源与未来 Monday, September 17, 12
开源的⺫⽬目的 • 把好的东⻄西分享出来 • 让好的东⻄西变得更好 • 其他⼀一切皆是浮云 Monday, September 17,
12
开源中最重要的 • ⼀一个优秀、靠谱的想法 • 疯狂⽽而持久的坚持 开源项⺫⽬目起步时,梦想都很丰满,但现实都 很⾻骨感。很多⼈人等不到后天的太阳,经常离 开于明天的晚上。 Monday, September
17, 12
JavaScript ⽣生态圈 • ⻢马云:建⽴立新商业⽂文明 • 我们:构建 JavaScript 新⽣生态圈 Monday, September
17, 12
})( ‘Q & A’ ) ; Monday, September 17, 12
})( ‘Q & A’ ) Monday, September 17, 12
})( ‘Q & A’ ) Monday, September 17, 12