$30 off During Our Annual Pro Sale. View Details »

SeaJS 与 Arale

lifesinger
September 17, 2012

SeaJS 与 Arale

lifesinger

September 17, 2012
Tweet

More Decks by lifesinger

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. 拆开后的烦恼
    拆开能缓解可维护性,但性能不佳:
           1)请求数太多
           2)同步阻塞
    Monday, September 17, 12

    View Slide


  12. 请求数太多的解决⽅方案:combo
    Monday, September 17, 12

    View Slide


  13. 请求数太多的解决⽅方案:combo
    Monday, September 17, 12

    View Slide


  14. 请求数太多的解决⽅方案:combo
    同步阻塞严重影响⽆无缓存时的⻚页⾯面打开速度!
    Monday, September 17, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  21. 版本“锁定”的苦恼
    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
    ⽼老代码多
    升级代价⼤大
    + 版本冲突
    资源不够
    时间紧张
    ...
    = 决定在旧版本
    上继续开发
    依赖旧版本的代码更多
    Monday, September 17, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. CMD  模块
    define(function(require,  exports,  module)  {
           var  $  =  require(‘jquery’)
           var  math  =  require(‘./math’)
           exports.doSomething  =  ...
    })
    Monday, September 17, 12

    View Slide

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

    View Slide

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

    View Slide

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

    <br/>seajs.use(‘./init’);<br/>
    • ⼀一个模块⼀一个⽂文件
    • 使⽤用  define  定义模块
    • 使⽤用  use  使⽤用模块
    基本⽤用法
    Monday, September 17, 12

    View Slide

  37. 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
    Monday, September 17, 12

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  48. Monday, September 17, 12

    View Slide

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

    View Slide

  50. Monday, September 17, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  63. ⼯工具
    jquery
    handlebars
    underscore
    json
    cookie
    position
    iframe-shim
    moment
    async
    store
    ⼯工具是可以直接拿来⽤用的
    Monday, September 17, 12

    View Slide

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

    View Slide

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

    View Slide

  66. Attributes
    Methods
    Events
    Who  am  I?
    What  can  I  do?
    +    Properties
    Config
    Monday, September 17, 12

    View Slide

  67. 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
    Monday, September 17, 12

    View Slide

  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

    View Slide

  69. Properties
    this.element
    this.triggers
    this.panels
    ...
    property  ~=  frequently  used  attribute
    Monday, September 17, 12

    View Slide

  70. Events
    events:  {
           ‘click  [data-­‐role=date]’:    ‘_selectDate’,
           ‘click  [data-­‐role=month]’:    ‘_selectMonth’
    }
    Events  Delegate
    Monday, September 17, 12

    View Slide

  71. Methods
    Attribute  is  fine,  
    and  method  is  convenient.
    this.set(‘visible’,  true);
    this.show();
    Monday, September 17, 12

    View Slide

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

    View Slide

  73. 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)
    Monday, September 17, 12

    View Slide

  74. data-­‐attr  API
    Widget.autoRenderAll();

    ...
    ...

    Monday, September 17, 12

    View Slide

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

    View Slide

  76. Monday, September 17, 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide