岁月如歌

用开放的心态,打造专业的人生。

发布 SeaJS v1.0.1 以及模块推荐与后续规划

with 12 comments

2011.08.11 Version 1.0.1 (stable)

loader 本身的修改不多:

  1. 增加了对页面中内嵌模块的支持:
    <script>
      define('~/init', null, function(require, exports, module) {
        var test = require('test');
        test.assertTrue('inline module is loaded.');
        test.done();
      });
    seajs.use('~/init');
    </script>
    

    具体请参考:#89

  2. 增加了 preload 配置:
    seajs.config({
      alias: {
        'json': 'json/1.0.0/json'
      },
      preload: [
        './config',
        this.JSON ? '' : 'json'
      ]
    });
    

    preload 模块会在所有其他模块加载之前提前加载并执行好。比如上面的配置,在没有原生 JSON 对象的环境下,会自动预加载好 json.js. 这样,在模块代码里就可以直接调用 JSON.parse 等方法了,就好像所有浏览器都原生支持一样。记录:#81

  3. 整理了社区的一些文章,推荐阅读:Community
  4. 原本打算实现 seajs.sub 方法,考虑到种种原因,暂不实现。有兴趣的可看下:#86

官方网站:http://seajs.com/
英文文档:http://seajs.com/docs/
中文文档:http://seajs.com/docs/zh-cn/

下载页面:release-notes.html

模块推荐

seajs 只是一个 loader, 是一个入口,是一个壳,前端应用里最重要的,除了业务模块,还有各种通用模块。seajs 鼓励用开放式模块来构建基础类库。目前 seajs 大项目收集整理的模块有:

  • es5-safejson, 这两个模块提供了 ES5 规范新增的部分功能。推荐如下配置:
    seajs.config({
      preload: [
        Function.prototype.bind ? '' : 'es5-safe/0.9.0/es5-safe',
        this.JSON ? '' : 'json/1.0.0/json'
      ]
    });
    

    这样配置好后,就可以在所有浏览器中使用 forEach / map / filter / some / ... / Date.now / JSON.parse 等方法了。

  • querystring 模块,提供了对 "foo=1&bar=2" 等参数字符串与 JSON 对象之间的转换方法。需要时,可直接 require 调用即可。
  • cookie 模块,提供 cookies 操作功能。

以上4个模块,是在调研现有类似模块后,重新实现的。所有模块的测试用例都比较齐备,质量上可以得到保证。这些模块统一放在 dew 项目中,定位是:调研现有类似模块后,如果发现有改进空间,或能实现得更好,反馈给原作者,原作者不想继续维护或有理念差异时,才重新造一个轮子,放在 dew 项目中统一维护。

dew 项目中的模块越少越好。大部分模块会直接来自社区,通过 transports 的转换定义文件和 spm 工具来转化。转化后的模块和 dew 项目的模块都存放在 modules 项目里。目前转换过来的模块有:

  • jQuery – 最好的 DOM 操作类库之一。
  • Underscore – 优秀的 JS 语言增强类库。
  • Backbone – 优秀的前端 MVC 框架。
  • Mustache – 简洁的模板操作类库。

目前只包括这些。使用时,建议直接下载 modules 项目,保留目录结构,直接部署到线上的 libs 目录。比如淘宝的:

http://a.tbcdn.cn/libs/seajs/1.0.1/sea.js
http://a.tbcdn.cn/libs/jquery/1.6.2/jquery.js
http://a.tbcdn.cn/libs/json/1.0.0/json.js
...

这样,在页面中引入 sea.js 后,seajs 的 base 目录会默认指向 http://a.tbcdn.cn/libs/. 项目中使用时,推荐在入口文件上统一配置:

/* main.js */
seajs.config({
  alias: {
    'es5-safe': 'es5-safe/0.9.0/es5-safe',
    'json': 'json/1.0.0/json',
    'jquery': 'jquery/1.6.2/jquery',
    'underscore': 'underscore/1.1.7/underscore',
    'backbone': 'backbone/0.5.3/backbone'
  },
  preload: [
    Function.prototype.bind ? '' : 'es5-safe',
    this.JSON ? '' : 'json'
  ]
});

这样,就能做到将一个应用中所用到的通用模块的配置都集中在一起。当某个模块有新版本、需要升级时,修改下配置文件中的版本号即可。还可以加入 map 和 debug 等配置来自由控制时间戳:在线本地调试大观

后续规划

seajs 本身将坚持往纯模块加载器的方向发展和完善,核心功能是模块书写格式和模块加载,其他都是辅助功能,坚持的原则是:如无必要,勿增实体。

seajs 大项目(包括 spm, dew 等),会尝试通过社区的力量,构建出一个开放式前端类库。开放式的好处是:

  1. 任何模块都是可替换的。比如 Backbone 可以替换为 Spine 等,包括 seajs loader 本身也可替换,最关键的是想通过社区,将一些基本规范和编程理念推广开、普适化。很难、很漫长,但很值得去做。
  2. 模块的组合搭配很灵活。因为都是模块化的,这意味着你可以根据各种项目的实际需求,选择性组合需要的模块。虽然因为模块之间的依赖关系会导致选择的复杂性,但目前 dew 项目的一个策略是:适量重复。比如 querystring 和 cookie 两模块里,肯定有些代码是可以拎取出来的,但拎取出来的价值并不大,反而破坏了独立性。es5-safe 和 underscore 也是如此。个人觉得适量重复比零重复更能适应未来。
  3. 参与开发的成本更低。如今,要想给 YUI3 写个 UI 组件并不是件容易的事。你得先搞懂 YUI3 组件的基础构建。对于开放式类库来说,没有这么多前提条件和约定,自由地按照自己觉得最好的方式构建就好。参与的代价更低,整个社区的延展性和覆盖面会很广。当然,这也会带来问题,比如质量控制、文档的一致性等等。但有了 github 和 googlecode 这种社区,一个好的模块,经常 forked 和 watched 数不会太少。简单通过这两个数字,经常就可以帮助我们筛选出一批质量不错的模块来(也有关注度不高但质量很不错的组件,这种情况有,但不多)。

seajs 接来下会将主要精力放在 modules 的增加和 spm 工具的完善上,非常期待你的建议与参与!

最后,有任何想法,强烈推荐发送邮件到:seajs(at)googlegroups.com. 这份邮件列表里,活跃着一群充满热情的攻城师们。

Advertisements

Written by lifesinger

August 11, 2011 at 23:10

Posted in Articles

12 Responses

Subscribe to comments with RSS.

  1. 没理解预加载为什么还要配置预加载?
    不改配置,只改引用方法,写成这样不行吗?

    JK

    August 12, 2011 at 10:05

    • 要告诉 loader 预加载哪些模块,因此需要配置,否则就要内置了,感觉不妥。

      lifesinger

      August 12, 2011 at 10:09

  2. […] 发布 SeaJS v1.0.1 以及模块推荐与后续规划 Share this:Like this:LikeBe the first to like this post. […]

  3. 高手 敬仰!!!

    oem86

    August 16, 2011 at 17:43

  4. http://a.tbcdn.cn/libs/underscore/1.1.7/underscore.js 里的 seajs 定义方式有问题吗?
    define(‘underscore’, [], function(require, exports, module)

    seajs.config({
    alias: {
    ‘underscore’: ‘underscore/1.1.7/underscore’,
    }

    });

    define(function(require, exports, module) {
    var _ = require(‘underscore’);

    exports.init = function(){console.log(_)};
    });

    console.log 的结果是 null , underscore/1.1.6/underscore 没问题

    雕刻

    August 19, 2011 at 14:48

  5. 请教将 jquery 插件模块化的最佳解决方案。
    本人看了此插件模块化的解决方案 http://www.cnblogs.com/wangzhichao/archive/2011/05/31/2064337.html
    但发现存在问题,在该文下方也发表评论进行询问。
    但希望能够得到seajs官方的jquery插件模块化最佳解决方案,还请楼主赐教,谢谢!!!!

    Kidwind

    August 19, 2011 at 17:39

    • 感谢 Kidwind 反馈。看下这里:https://lifesinger.wordpress.com/2011/08/19/jquery-introduction-and-plugins-modulization/

      lifesinger

      August 19, 2011 at 22:53

  6. 请教两个关于seaJs的问题,1.如果每次打包发布完的时候,页面上只有2-3个Js(1个lib,1个是页面逻辑,lib是很多文件,但是压缩成一个了),是不是不用按需加载了,只有引入很多外部模块的时候才需要按需加载吗 2.存不存在这个问题,本来我引入的Js库就是打包压缩过的,每个页面都可以共用,如果我每个页面都按需加载,那不是页面之间共用不了了 谢谢

    ljgeneral

    September 18, 2011 at 18:40

    • @ligeneral:

      1. 对的,如果压缩成一个了,原来的使用习惯 require(xx) 保持不变即可,只是 http 链接变成一个了。
      2. 依旧可以共用的,只要引用的文件路径是一样的,就可以共用浏览器的缓存。

      lifesinger

      September 19, 2011 at 09:32

  7. 能否有像modernizr.js那样的特性侦测能力加入到seajs中?

    zicjin

    September 26, 2011 at 13:30

    • 可以直接把 Modernizr 作为一个模块加载进来。

      lifesinger

      September 26, 2011 at 15:17


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s