seajs/seajs

A Module Loader for the Web

A Module Loader for the Web

Sea.js is a module loader for the web. It is designed to change the way that you organize JavaScript. With Sea.js, it is pleasure to build scalable web applications.

The official site: https://seajs.github.io/seajs/

Questions?

If you have any questions, please feel free to ask through New Issue.

Reporting an Issue

Make sure the problem you're addressing is reproducible. Use http://jsbin.com/ or http://jsfiddle.net/ to provide a test page. Indicate what browsers the issue can be reproduced in. What version of Sea.js is the issue reproducible in. Is it reproducible after updating to the latest version?

License

Sea.js is available under the terms of the MIT License.

seajs's Issues

Promotion for SeaJS

近期

1. 博文系列：《SeaJS 从入门到精通》。并借此机会，全面修订甚至重构一次文档。
2. Velocity 2011:《基于 SeaJS 的高性能网站开发和优化实践》

长期

1. 英文版 introduction slide, 放到 seajs.com 首页
2. 在 commonjs, jsmentors 社区推广
3. 在 dailyjs, reddit, ajaxian, sitepen 等社区推广
4. 等有一定量的 jquery 模块后，推广到 jQuery 社区
5. 提交到 microjs.com
6. 给 InfoQ 写稿

release v0.9.0pre

module id can contain file extension.

module.load('./a') 等价 module.load('./a.js')

当模块对应的文件名后缀不为 js 时，可以写上后缀：

module.load('./a.json');
module.load('./b.php');

require 类似。

sbuild bug for json define

家昊 曹 [email protected] wrote:

define({
name: 'data',
data: []
});

使用 sbuild 打包后 还是 define({name:"data",data:[]});

对chrome的支持好像有问题。

总是不间断地出现加载失败，其他浏览器没有同样的现象。

很多时候 require('filename') 无效，改为 require('filename.js') 有效

rtrtrt

perfect documents

1. 检查已有文档的完备和合理性。
2. 根据源码，检查是否有遗漏功能未在文档中体现。

async bootstrap is failed in old IE

<script>
window.seajs = 1;
</script>

<script>
var seajs = { _seajs: this.seajs }; // WRONG!
</script>

should change to:
<script>
this.seajs = { _seajs: this.seajs }; // RIGHT!
</script>

remove seajs.alias method

保持简单，不提供单独的 alias 方法，可以让配置更集中，有利于项目维护。

add jasmine test for querystring module

now don't support IE9

add js order plugin

src/test/runner.html can not go on in Opera when linked script is not loaded.

很诡异，先记录下，还没找到原因。

require('id') in comments should be ignored.

Firefox 里，fn.toString() 会自动过滤掉注释信息。但其他浏览器不会。因此在 fn-define.js parseDependencies() 里，要用正则将注释先过滤掉。

lets module.declare only exposing in script file context.

---

from limu:

接下来说说我对于约定以及当前seajs这些约定的看法.
最近工作原因深入了解了下RoR,约定很多,敏捷开发那本书看下去非常顺畅,但是遇到一个问题,当我回过头来回忆的时候,却发现自己根本记不住几项约定,需要不断的翻书寻找才能使用下去.
我发现看seajs文档遇到同样的问题,一节节看下去很通畅,但当昨天我做10个seajs的测试用例时,遇到了同样的问题,拿不准约定,要反反复复回去翻文档.
所以从整个约定层面来看,我觉得不一定越多越好,现在看起来约定最成功的是完全改变了前端写法的jquery,但其实jquery的约定并不多(操作结果集,可以链式调用,如何添加工具函数,如何扩展结果集)

---

from yubo:

非常同意，一起努力，来寻找 seajs 的最佳约定。

---

from limu:

seajs海纳百川,我觉得更要亲民一些,让各个层次的开发者顺畅的使用.declare,load,exports,module,require已经不少了.我觉得最难上手的是下面这个约定:
/*** a.js 的 module.declare 里 ***/
module.load('./b');
// => http://cdn.com/path/to/js/b.js

     /*** test.html ***/
     module.load('./b');
   // => http://example.com/path/to/html/b.js

JS和css不一样,JS一直是行内脚本和外链脚本没有任何区别,把行内脚本迁移到外链脚本文件中,或反过来都不需要做任何调整.这相当于浏览器对JS的约定.

---

from yubo:

这是一个很好的问题，至今 CommonJS 社区也无很好的解决方案。因为 require 接受 relative id，这势必导致和 context 相关。也就是说，在独立js页面和内嵌到页面，context 会发生变化，从而语义有变。

在 FlyScript 里，为了避免这一问题，甚至强制使得 module.declare 仅能在 js 文件里才能
调用，在页面里，将这个接口隐藏掉了。也就是增强一个强约定：

模块代码必须写在独立文件里！

让 relative id 和 context 相关的好处是：关注点分离，让js模块开发者不必关心页面环境，只要关注自身即可。比如：

sub/sub/a.js
sub/sub/b.js

无论 a.js 和 b.js 放在什么目录，只要保持同级，在 a.js 里调用 b.js 时，都是：

require('./b')

在打包、移动等各种情况下，无需修改代码。

有利有弊，或许 seajs 应该和 flyscript 一样，使得 module.declare 仅能在 js 脚本里调用？
如果要内嵌，则需要去掉包裹层以及修改 require, exports 等代码？

CommonJS 1.0 的模块，也只能是以文件形式存在，直接内嵌，exports 互相覆盖，也明显有问题。

两难的问题，必须取舍。我倾向于让 module.declare 只能在 js 文件里出现。

内嵌只在特殊页面做性能优化时需求，这种情况下，就不推荐用模块方式组织，直接裸写。

---

from limu:

seajs引入了上面这个约定之后,情况发生了变化,而且这个变化挑战了常规想法.比如我在测试的时候想在html页面内先declare,然后load直接使用,却不知道如何做.
<script>
module.declare("./a",function(require,exports,module){
});
module.load("./a",function(a){
});
</script>
上面这段脚本,load还是会去请求.a.js. 可能我的写法不对,但是文档中没有相关的交代.换句话说,如果我在要求js全部内联的首页,该如何去做.
其实这个还可以回到约定和配置的问题,如果seajs提供了完善的配置方案能够代替这个约定的话,即使选择了seajs,但团队内也会要求大家不采用这个约定,

---

from yubo:

上面已经讨论，纠结。或许页面中就不应该出现 module.declare

alias bug in seajs.use

李牧 (2011-05-18 15:16:54):
seajs.config({
debug: true,
alias: {
'backbone': 'backbone-debug',
'underscore': 'underscore-debug',
'jquery': 'jquery-debug',
'app': '/git/simba/app',
'config': '/git/simba/config',
'libs': '/git/simba/libs'
},
charset: 'utf-8',
timeout: 20000
});
window.onload = function(){
seajs.use(['libs/simba/main', 'config/global', 'app/resources/init'], function(main, config, resource){
main(config, resource);
});
};
app=>/git/simba/app use时候app被替换过一次,在provide的时候app又被替换了一次.
李牧 (2011-05-18 15:28:17):
if(id.indexOf("http://")!==0){
id = parseAlias(id);
}
我暂时这么搞了下 等你解决问题.
李牧 (2011-05-18 15:41:18):
debug=true的时候 toplevel模块不会load,未压缩版本 我现在是做alias, 有没有其他办法

adjust the default value of base path

原来默认指向 sea.js 所在目录
现在因为存放结构变成了：

dir-name/
  -- jquery
      -- 1.6.1
              -- jquery.js
              -- jquery-debug.js
  -- seajs
      -- 0.9.2
              -- sea.js
              -- sea-debug.js

因此将默认 base 调整为指向 sea.js 所在目录的 ../../

感觉还是在走YUI3的老路，某些需求会变成死结

如在某篇blog里所提到的：
YUI在各个模块的js里进行add，有好处，也有坏处。
好处就是多了个沙箱机制，沙箱理论看起来很严谨，可以满足YUI的严谨性洁癖----其实我一直没有理解它对实用者都有啥好处。
而坏处，也有很多。例如：
1。需要模块的代码来适应他的加载机制。----例如，jQuery也可以算是个模块，凭什么要让独立的jquery来改代码？----seajs通过build来打补丁。无言以对。如果再引入一个jquery的组件会怎么办？
2。假设我改了jQuery的代码来适应这loader，那是不是也损失了jQuery的原来的用法，即预加载模式用法（在HTML的Header里引用jquery.js，在页面直接用。
3。例如use('Editor',function(){})时，其实由于依赖关系，会按需加载YouaCore,Drag,Panel,Editor四个 js，因为依赖关系是在各自的js里，理论上无法将四个请求合并成一个请求，也无法在请求editor.js时就并行请求drag.js。
4。如果客户端缓存了js，我们更新Editor.js后，use('Editor',function(){})无法知道是否需要在editor.js后添加版本号。
5。如果有复合模块，例如core_dom_youa_lazy.js其实是同时拥有很多小模块功能的一个js，那在drap.js里如何定义依赖？

另：requirejs在服务端，或许还有些意义，把它搬到浏览器，好像就是对别人的一种误导，让别人走上绝路。。。

add google analytics for docs

error-handle for asynchronously operations

涉及异步操作的错误处理,这块我一直没有时间系统的去思考,在tanx的单页ajax应用中积压了这个问题.seajs做完整的异步模块体系支撑要考虑下这个,给出一些范例最佳实践.
附件是我做的10个相关测试,主要是我在开发kslite时后关注的若干问题.没有通过的用例名字中有"!",页面上也有写注释,不过大多数上面我都提到过了.

compile & build tools

1. 依赖关系的自动分析
2. 文件合并

打算用 node.js 来实现。

[bug] seajs config base and etc.

seajs中的一个bug

当使用base配置时，可以正常加载js，但是use中加载模块有问题，
use的模块无法执行。
目录结构如下:

assets/
  js/
    libs/
      seajs.js
      jquery.js
      mustache.js
      backbone.js
      …
    init.js
    hello.js
  css/

在init.js中初始化程序

seajs.config({
    base : 'assets/js/'
});
seajs.use('hello',function(hello){
    console.log(hello);//null
});

把seajs上移一个目录则没有问题。

module.exports 的一个问题

在其他模块中load时返回的exports对象会有延迟大约50ms，所以
直接操作exports对象回报错，需要delay执行代码，感觉还是直接用require好。

define(function (require, exports, module) {
    module.load(['jquery','backbone'], function ($,Backbone) {
        var Uri = Backbone.Controller.extend({
            //code
        });
        module.exports = new Uri();
    });
});

module.js itself can be loaded asynchronously

from 李牧：

seajs不支持module.js异步载入,这个我觉得按照bravojs和kslite现在的解决办法,加一点约定就可以解决掉. 我的建议是使用kslite的方法,给script节点增加一个非id属性.

我觉得seajs应该可以以任何方式(内联,外链,静态,动态,包含在别的文件中等等)且引入页面后立即生效. 而且一个页面可以不同的方式引入多次,如果未来seajs是一个极轻量级的模块化平台,很可能网站本身和网站使用的第三方分别引入seajs作为运行支撑.

为了异步载入,还应该提供moduleOnLoad事件,可以看下kslite的处理. kslite载入之前KSLITEonLoad是一个简单数组,待执行fn,push进去,在kslite载入后, KSLITEonLoad是一个对象,具有push方法,对push进来的内容立即执行.

move modules to git submodule

.gitmodules

[submodule "modules"]
path = modules
url = git://github.com/seajs/modules.git

support local file

支持本地文件打开

add package support

package 支持的设计和完善

add best practice for sub module

用循环依赖方式实现的子模块机制

util-helper.js#L158 直接用正则好像更快一些

Benchmark = require 'benchmark'
suite = new Benchmark.Suite

s = './a/./b/../c'

suite.add 'replace with str & substring', ->
  ('/' + s).replace('/./', '/').substring(1)
.add 'replace with RegExp', ->
  s.replace(/^\.\//, '')
.on 'cycle', (bench) ->
  console.log String(bench)
.on 'complete', ->
  console.log 'Fastest is ' + @filter('fastest').pluck('name')
.run(yes)

$ coffee b.coffee

replace with str & substring x 366,691 ops/sec ±1.78% (77 runs sampled)
replace with RegExp x 1,066,190 ops/sec ±0.90% (78 runs sampled)
Fastest is replace with RegExp

more flexible timestamp mechanism.

详细考虑时间戳、缓存更新机制。

compare module.js with BravoJS, FlyScript, RequireJS, YY etc.

采百家之长，去芜存菁。

perfect debug mode

1. add util.console (info/log/error/warn) trasport methods.
2. add seajs_debug in location.search to turn on debug mode.
3. add more debug info.

prepare for release version 0.9.0

1. 检查文档
2. 生成 zip 包
3. tag
4. 发布日志和 change log
5. 推广

seajs.noConflict()

李牧 (10:53:29):
现在inf.js有二十亿流量每天 如果这个里边都有seajs的话 会不会和页面上其他应用引入的seajs冲突?
玉伯 (10:59:24):
我建议还是做个简单的封装，seajs 再提供一个 noConflict 接口
李牧 (11:00:00):
那就还是用kslite包一下seajs吧.
玉伯 (11:00:18):
在inf.js上，用类似 _inf_loader.use(); _inf_loader.define()
var _inf_loader = seajs.noConflit();
类似这种封装
我记录下，原来还想着这事的，呵呵

perfect tests

1. add unit test for inner functions using jasmine.
2. test performance.
3. tell in all Grade-A browsers.

nodejs version

make modules compatible with seajs can run in nodejs environment.

add css support

release seajs version 0.9.0rc

完善打包部署的文档

seajs-v0.9.0rc.zip 里含：

lib
bin
examples
readme.txt

add onerror event mechanism

2.约定 > 配置这个我非常赞同,但是针对我的应用,现在seajs只有约定不满足要求,却没有提供完善的配置机制.
我觉得我们需要一个可扩展的配置读取机制,比如全局的且可扩充的perfix.
针对我的应用,似乎必须要有一个kslite内置的pkg,pkgroot相关配置功能.
而且我觉得,从代码逻辑的优先级上来看,这个配置应该优先于约定.
因为我们不能按约定走,当发现404之后,再按配置走.
因为任何情况下不应该出现页面一定会发生404的情形.而且seajs使用者的404很可能发生redirect到html响应,抛出错误.
解决了如上两个问题,我就可以把kslite切换至seajs了.

周末将 module.prefix 去掉了，目前的方式是：用 module.config 来配置全局 prefix, 去掉了对局部 prefix 的支持（使用场景很有限）。
文档：http://seajs.com/docs/api/global-configuration.html

404 时的自动 fallback ，我感觉我还是没有理解真正的业务需求，木头能再详细解释下并配上demo 吗？

我目前的想法是，给 module.load 和 require 增加 failure 事件，当 404 等错误发生时，调用者
可自行给 failure 添加 handler（比如 fallback）

这样能保证 seajs 的纯粹性，同时增加接口让外部可定制。木头看这样能满足需求不？

add querystring module

support css file

希望能增加一个require css的方法，因为很多组件都是依赖css的
seajs能很方便的引用一个js模块，但是如果还需要另外在页面中引用依赖的css就感觉有点繁琐了

modules project

提供一个页面工具：

1. 用户上传 js 文件
2. 利用 google closure compiler 等工具分析出暴露的全局变量
3. 自动 wrap
4. 将自动 wrap 好的源码生成文件提供给用户下载

有了这个工具，src 里面，只要保留 seajs 原创性模块即可。

port kissy components

switchable
datalazyload
...

add timeout, nocache to global configuration

module.config({

timeout: 5000,

nocache: true

});

sbuild for win32

https://groups.google.com/forum/#!topic/seajs/gNLm6YysfRw

http://node-js.prcn.co.cc/

english version documents

add module.config to support global configurations

module.config({
base: 'path/to/seajs/',
prefix: {
'biz': 'path/to/biz/directory/'
}
});

remove module.prefix function.

snode project

https://groups.google.com/forum/#!topic/seajs/K4WBD01aqGc

sbuild project

现在已基本够用，但当有 alias 时，sbuild 未能处理 alias

测试用例：

cd path/to/seajs/src/test/modules/alias
sbuild --combo program.js

can not derive module.uri when the module file is cached in IE

require('a.css') bug in sbuild

for skyblue:

build工具貌似没有区分css文件 如果有require css ,build的时候报错.