SeaJS 与 Arale

Transcript

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

2. 关于我 • ⺩王保平 / lifesinger / ⽟玉伯 • ⽀支付宝 -

   前端开发部 • KISSY、SeaJS、Arale 2 …… • 微博：@⽟玉伯也叫射雕 Monday, September 17, 12

3. Topics I. 遇到的问题 II. SeaJS  -­‐  更⾃自然的代码组织 III. Arale  -­‐

    开放式类库构建 IV. 开源与未来 Monday, September 17, 12

4. I.  遇到的问题 Monday, September 17, 12

5. 问题⼀一：脚本组织与加载 Monday, September 17, 12

6. ⻚页⾯面中引⼊入  script Monday, September 17, 12

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

8. 当单个  script  变⼤大时 Monday, September 17, 12

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

10. 拆开后的烦恼 Monday, September 17, 12

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

    Monday, September 17, 12

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

13. <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

14. <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

15. 同步阻塞的解决⽅方案：loader Monday, September 17, 12

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

17. 问题⼆二：命名与版本冲突 Monday, September 17, 12

18. 全局变量 <script> var FP = ... var t = ...

    </script> ... <script> var t = ... var alibaba_mm = ... </script> 在⼤大规模开发中，要⽤用好全局变量很难。 Monday, September 17, 12

19. 命名空间 var YAHOO = {} YAHOO.util = {} YAHOO.util.DOM =

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

20. 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

21. 版本“锁定”的苦恼 <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

22. 问题三：组件共享 Monday, September 17, 12

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

    September 17, 12

24. QueryString.parse(‘a=b&b=c’); //=> { a: ‘b’, b: ‘c’ } QueryString.stringify({ ‘foo’:

    ‘bar’ }); //=> ‘foo=bar’ 跨环境共享 这是⼀一个梦，但并不遥远。 Monday, September 17, 12

25. 问题四：调试之痛 Monday, September 17, 12

26. #/etc/hosts 127.0.0.1 a.tbcdn.cn Proxy Willow 所有⽅方案都不够敏捷。 Monday, September 17, 12

27. 核⼼心问题 • 可维护性 • 性能 • 共享 Monday, September 17,

    12

28. II.  SeaJS  -­‐  更⾃自然的代码组织⽅方式 Monday, September 17, 12

29. A  Module  Loader  for  the  Web SeaJS  是什么 Monday, September

    17, 12

30. 模块系统的基本问题 • 系统成员：模块是什么？ • 系统通讯：模块之间如何交互？ Monday, September 17, 12

31. 模块定义规范 CommonJS   Modules  /  1.1 AMD CMD Node  Modules

    ... Intel CommonJS   Modules  /  2.0 Modules  /   Wrappings 所有这些规范，都是为了解决 模块系统的两个基本问题。 Monday, September 17, 12

32. 从  Server  到  Web • node_modules 查找不适合 Web 端 •

    ⽂文件的同步读取不适合 Web 端 • 跨域 • 性能 • 浏览器兼容性 Monday, September 17, 12

33. CMD  模块 define(function(require,  exports,  module)  {        var

     $  =  require(‘jquery’)        var  math  =  require(‘./math’)        exports.doSomething  =  ... }) Monday, September 17, 12

34. 依赖的回调树 a b c d e f g h Monday,

    September 17, 12

35. 循环依赖 a b c d e f g h Monday,

    September 17, 12

36. 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

37. 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

38. 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

39. 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

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

    Monday, September 17, 12

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

    September 17, 12

42. 调试友好 http://seajs.org/docs/#api Monday, September 17, 12

43. 插件开发 http://seajs.org/docs/#api Monday, September 17, 12

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

45. 期待你的参与 https://github.com/seajs/seajs Monday, September 17, 12

46. 已有哪些公司在⽤用 Monday, September 17, 12

47. III.  Arale  -­‐  开放式类库构建 Monday, September 17, 12

48. Monday, September 17, 12

49. vs. ⼤大教堂 集市 Monday, September 17, 12

50. Monday, September 17, 12

51. aralejs.org Arale  是⼀一个开放、简单、易⽤用的前端基础类库 Monday, September 17, 12

52. 1.  构建理念 Monday, September 17, 12

53. Open  your  minds 海纳百川、有容乃⼤大 Monday, September 17, 12

54. K.I.S.S 如⽆无必要、务增实体 Monday, September 17, 12

55. Easy  to  use ⼀一⺫⽬目了然、容易学习 Monday, September 17, 12

56. Moderate Flexibility 适度灵活 Monday, September 17, 12

57. Intentional Duplication 适量重复 Monday, September 17, 12

58. 2.  整体设计 Monday, September 17, 12

59. 开放式前端基础技术体系 Monday, September 17, 12

60. Arale  整体构成 Monday, September 17, 12

61. Arale 由三部分组成 基础 ⼯工具 组件 Monday, September 17, 12

62. 基础 class base events widget Arale 的核⼼心 1. 规范了组件的写法 2.

    提供实⽤用的功能⽅方便扩展 Monday, September 17, 12

63. ⼯工具 jquery handlebars underscore json cookie position iframe-shim moment async

    store ⼯工具是可以直接拿来⽤用的 Monday, September 17, 12

64. 组件 提供⼀一套 UI 解决⽅方案 1. Arale 最终为精选集 2. 组件会有继承链 widget

    switchable dialog overlay calendar popup xbox validator select tab slide Monday, September 17, 12

65. 3.  Widget  设计 Monday, September 17, 12

66. Attributes Methods Events Who  am  I? What  can  I  do?

    +    Properties Config Monday, September 17, 12

67. 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

68. 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

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

    Monday, September 17, 12

70. Events events:  {        ‘click  [data-­‐role=date]’:    ‘_selectDate’,

           ‘click  [data-­‐role=month]’:    ‘_selectMonth’ } Events  Delegate Monday, September 17, 12

71. Methods Attribute  is  fine,   and  method  is  convenient. this.set(‘visible’,

     true); this.show(); Monday, September 17, 12

72. Creation  Lifecycle initAttrs parseElement initProps delegateEvents setup render Monday, September

    17, 12

73. 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

74. 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

75. 例⼦子：Overlay https://github.com/aralejs/overlay/blob/master/src/overlay.js Monday, September 17, 12

76. Monday, September 17, 12

77. IV.  开源与未来 Monday, September 17, 12

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

    12

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

    17, 12

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

    17, 12

81. })( ‘Q  &  A’ ) ; Monday, September 17, 12

82. })( ‘Q  &  A’ ) Monday, September 17, 12

83. })( ‘Q  &  A’ ) Monday, September 17, 12