Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

API 快速参考 #266

Closed
lifesinger opened this issue Jul 10, 2012 · 83 comments
Closed

API 快速参考 #266

lifesinger opened this issue Jul 10, 2012 · 83 comments
Milestone

Comments

@lifesinger
Copy link
Member

API 快速参考

该页面列举了 Sea.js 的常用 API。只要掌握这些用法,就可以娴熟地进行模块化开发。


seajs.config

用来对 Sea.js 进行配置。

seajs.config({

  // 设置路径,方便跨目录调用
  paths: {
    'arale': 'https://a.alipayobjects.com/arale',
    'jquery': 'https://a.alipayobjects.com/jquery'
  },

  // 设置别名,方便调用
  alias: {
    'class': 'arale/class/1.0.0/class',
    'jquery': 'jquery/jquery/1.10.1/jquery'
  }

});

更多配置项请参考:#262

seajs.use

用来在页面中加载一个或多个模块。

// 加载一个模块
seajs.use('./a');

// 加载一个模块,在加载完成时,执行回调
seajs.use('./a', function(a) {
  a.doSomething();
});

// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

更多用法请参考:#260

define

用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:

define(function(require, exports, module) {

  // 模块代码

});

也可以手动指定模块 id 和依赖,详情请参考:#242
require, exportsmodule 三个参数可酌情省略,具体用法如下。

require

require 用来获取指定模块的接口。

define(function(require) {

  // 获取模块 a 的接口
  var a = require('./a');

  // 调用模块 a 的方法
  a.doSomething();
});

注意,require 只接受字符串直接量作为参数,详细约定请阅读:#259

require.async

用来在模块内部异步加载一个或多个模块。

define(function(require) {

  // 异步加载一个模块,在加载完成时,执行回调
  require.async('./b', function(b) {
    b.doSomething();
  });

  // 异步加载多个模块,在加载完成时,执行回调
  require.async(['./c', './d'], function(c, d) {
    c.doSomething();
    d.doSomething();
  });

});

详细说明请参考:#242

exports

用来在模块内部对外提供接口。

define(function(require, exports) {

  // 对外提供 foo 属性
  exports.foo = 'bar';

  // 对外提供 doSomething 方法
  exports.doSomething = function() {};

});

详细说明请参考:#242

module.exports

exports 类似,用来在模块内部对外提供接口。

define(function(require, exports, module) {

  // 对外提供接口
  module.exports = {
    name: 'a',
    doSomething: function() {};
  };

});

module.exportsexports 的区别,以及详细说明请参考:#242


以上 7 个接口是最常用的,要牢记于心。

这里提供一个不错的社区贡献的 API 文档:http://yslove.net/seajs/

@lifesinger
Copy link
Member Author

有任何问题,欢迎留言交流。
注意:已解决的问题,会在整理后删除掉。

@deng19891006
Copy link

在开发阶段时候,我们是一个js文件代表一个模块,然后在demo页面上通过seajs.use([],function(){}很容易的做出测试案例。
问题:开发阶段是通过use()参数配置模块,我用grunt部署后压缩合并成一个文件后怎么去找到每个模块ID呢(已经成功的通过transport抽出模块ID)?我在您的seajs官网上没看到类似的案例,这里麻烦您了...

@lifesinger
Copy link
Member Author

@deng19891006 直接用 transport 后的模块 id 加载模块就好,比如

seajs.use('path/to/a+b+c.js', function() {

  var a = seajs.require('a')
  var b = seajs.require('b')

  ...
})

或者通过命名空间来做

combo.js

define(function(require, exports) {
  exports.a = require('./a')
  exports.b = require('./b')
  exports.c = require('./c')
})
seajs.use('combo', function(combo) {

  var a = combo.a
  var b = combo.b
  var c = combo.c

  // ...
})

@panxuepeng
Copy link

SeaJS 组件库,http://panxuepeng.github.io/seajslib/

@w3cpress
Copy link

<script src="xxx/sea.js" id="seajsnode" data-main="abc"></script>

这种使用方式在2.1版本里面去掉了么?怎么abc的模块找不到呢?

@w3cpress
Copy link

src="assets/scripts/seajs/sea.js" id="seajsnode" data-main="application/dist/abc"

@lizzie
Copy link
Member

lizzie commented Aug 26, 2013

@lovexiaobai seajs 2.1.0 已经去除 data-main 的支持. 请看相关 issue: #753#813

@onmouseover
Copy link

上面说到concat后.入口模块的调用.我发现如果我将主模块的id命名为concat后的文件名称的话是可以执行的。我用transport提取,并且用concat打包。最后需要到a+b+c.js中取修改我的主模块id为a+b+c。我觉得很痛苦。有没有其他方法?

@lifesinger
Copy link
Member Author

@onmouseover 也可以这样,比如 concat 后的文件名是 combo.js,里面有

define('a', ...)
define('b', ...)
define('c', ...)

然后通过下面的方式可调用到

seajs.use('path/to/combo', function(){

  // 这样来拿已经下载好的模块
  var a = seajs.require('a')

})

@onmouseover
Copy link

@lifesinger 但是这样的话,我拿到的模块是null,模块的状态是2.就是说还没有被seajs执行.对象也没有暴露出去。比较纠结。

@lifesinger
Copy link
Member Author

这样

seajs.use('path/to/combo', function(){

  // 执行已下载的模块
  seajs.use(['a', 'b', 'c'])

  // 拿模块接口
  var a = seajs.require('a')

})

最好的方式还是,保持 id 和 uri 的一致哦。

@onmouseover
Copy link

@lifesinger 其实这样还是不能用,我尝试了使用seajs2.1.在2.1中玉伯重新加入了define(id,factory);的写法,于是我在定义入口函数之初就将我的模块id定义为打包后的文件名称(即path/a+b+c)。这样可以解决问题,但是我使用的提取插件是"grunt-cmd-transport":"0.1.1"。不支持手写id的时候提取依赖.于是我修改了作者的插件代码.在有id的情况下继续依赖.可以解决我说的不执行的问题。不过也因此从seajs2.0升级为2.1.

@hhm1999
Copy link

hhm1999 commented Sep 11, 2013

为什么我用了seajs之后它会发起一个/seajs/sea.js.map的文件请求?

@lizzie
Copy link
Member

lizzie commented Sep 11, 2013

@huanghm

原因:

这是 Chrome 等浏览器对 sourceMap 调试的支持.

解决办法:

在 Chrome 开发者工具的配置里,关闭掉 sourceMap 支持。如下图

pastedgraphic-1

将 Sources 栏下 Enable source maps 前面的勾去掉。

这个错误不会影响线上环境下的普通用户。

@beijingme
Copy link

请问,seajs是否支持原版的第三方插件,比如jquery,如果我不模块化是否可以?目前我看到的都是模块化的;如果是jquery.ui 或者是 knockout.mapping这类插件,我该怎么做?

@lizzie
Copy link
Member

lizzie commented Sep 18, 2013

@beijingme 需要模块化的. 具体如何模块话, 请看 这里 的封装例子. PS: 如果就只是依赖 jquery 的话, 基本上按格式:

define(function(require, exports) {
    var $ = require("jquery");
    // 替换 全局 jquery 为 $
});

就可以了.

@daiwei
Copy link

daiwei commented Oct 29, 2013

我自己开发的模块中使用了socketio,所以我在模块开始的部位进行了require操作
var io = require('http://localhost:8000/socket.io/socket.io.js');
不过在使用的时候却报错了
socket = io.connect(url);
Uncaught TypeError: Cannot call method 'connect' of null
请问require支持socket.io吗?
谢谢

@afc163
Copy link
Member

afc163 commented Oct 29, 2013

socket.io 文件长啥样?

@daiwei
Copy link

daiwei commented Oct 29, 2013

是直接npm install的,nodejs做server建在8000端口上

@afc163
Copy link
Member

afc163 commented Oct 29, 2013

你的文件格式需要符合 CMD 规范才行。#242

@edokeh
Copy link
Contributor

edokeh commented Oct 29, 2013

socket.io 的 JS 文件是由他的 npm 包提供的,所以不能自己修改(除非你拷贝出来)
建议就不要 CMD 化了

@daiwei
Copy link

daiwei commented Oct 29, 2013

@edokeh 我现在是拷贝一份出来的,有什么好的方法可以在我的模块中引入socketio呢?谢谢

@afc163
Copy link
Member

afc163 commented Jan 15, 2014

@rebornvip #930

@hooray
Copy link

hooray commented Mar 22, 2014

exports是用来在模块内部对外提供接口,那有没有什么是用在在模块外部提供的接口?
比如我原先有个function a(){},在模块内部会使用,在模块外部也会使用,比如在页面里有个iframe,iframe里通过window.parent.a()调用,但改用seajs之后,在iframe里要如何调用到这个方法

@lifesinger
Copy link
Member Author

@hooray 需要时,暴露全局变量就好,该怎么调还怎么调

@sbfkcel
Copy link

sbfkcel commented Mar 25, 2014

//require放在判断内无效?
if(false){
    require('./test');  //test会被引入
    seajs.use('./test');    //test不会被引入
}

@army8735
Copy link
Member

require是依赖,加载时会分析。虽然引入但没有被初始化。
use是入口,不分析依赖,false更不会进入加载逻辑。

@afc163
Copy link
Member

afc163 commented Mar 26, 2014

@sbfkcel #1143

@ekinwei
Copy link

ekinwei commented Jul 22, 2014

seajs.use和seajs.require,use是用在页面里,require是用在模块定义里,还有什么别的区别吗。?

@chinakids
Copy link

require引入css输出路径是.css.js?

@wxlworkhard
Copy link

【代码段1】
define(function(require) {
// 获取模块 a 的接口
var a = require('./a');
// 调用模块 a 的方法
a.doSomething();
});
这里require是请求a.js文件(代码不继续执行,等a.js文件加载并且执行完了之后,才继续下一行代码的执行),所以a的doSomething()方法不会报错(如:没定义)!
既然是这样那么
【代码段2】
require.async('./b', function(b) {
b.doSomething();
});代码段1和代码段2的效果一样的,那require.async这个方法有什么意义?

@wxlworkhard
Copy link

1.require()是同步加载js文件,同步加载就是同步阻塞加载,加载执行完成之后才执行下一行代码。
2.
require('jquery');
require('bootstrap');
是“同时”去加载两个js文件,这俩文件是同时加载,谁先加载完谁先执行。
3.所以问:为什么说require()是同步加载?
同步是阻塞加载,这里根本没阻塞。
难道是说这里的“同步”和一般的引入js文件方式的“同步”不是一个意思?

@afc163
Copy link
Member

afc163 commented Aug 16, 2014

require 不是同步加载。

@afc163
Copy link
Member

afc163 commented Aug 16, 2014

require.async 是在运行时异步加载异步执行。

require 是提前异步加载,同步执行。

@wxlworkhard
Copy link

异步执行??是用了多个线程吗???
require.async('./b', function(b) {
b.doSomething();
});如果异步执行,那b的方法doSomething();在调用时很可能出现没定义的情况

@afc163
Copy link
Member

afc163 commented Aug 17, 2014

不要想当然,建议研究下 seajs 和 requirejs 的源码。

@MissZhou12345
Copy link

@lifesinger

var follow1 = null;
seajs.use(['jquery','follow'],function($,follow1){
var config = {
'list_id':'#v-follow-users',
'type':'{$vals.type}'
};
follow1 = new follow1(config);
follow1.getFollow();

});

var follow2 = null;
seajs.use(['jquery','follow'],function($,follow2){
var config = {
'list_id':'#v-follow-shops',
'type':'{$vals.type}'
};
follow2 = new follow2(config);
follow2.getFollow();

});

Follow.prototype.getFollow = function(){
var _this = this;
var $data = {};
console.log(_this.config);//这个地方能把配置打印出来,不同的
$.ajax({
type:'POST',
url:U('Home/Public/followInfo'),
data:$data,
dataType:"html",
success: function(content, textStatus, errorThrown){
console.log(_this.config);//这个地方就是最后一次配置信息
$(_this.config.list_id).html(content);
},
error: function(xhr, ajaxOptions, thrownError){
vthink.ajaxError(xhr, ajaxOptions, thrownError,null);
}
});
};
是作用域的问题吗????
我像其他js对象一样在构造函数里面增加配置
但是在getFollow方法里面总是最后一次配置
我用了new的啊

@hongxiyu
Copy link

hongxiyu commented Nov 7, 2014

我觉得官方文档可以有 导航 之类的,方便速查。

@Jack-Lo
Copy link

Jack-Lo commented Jan 29, 2015

还是希望能够提供一些其他的压缩合并代码方案,比如提供一些api,结合后台(java/php)实现线上动态压缩。在本地实现压缩再迁移到服务器上,比较适合那些改动少且由个人维护的网站,对于改动频繁或者多人协作的的网站,这一操作实在是无法忍受。毕竟不是所有项目都是跑在nodejs下的,如果能够提供一套java/php下的压缩方案,对seajs的推广应该是很有帮助的。

@mozackye
Copy link

我按模块化jquery的方法模块化 zepto 会出现undefined is not a function的问题
define(function () {
//zepto源码
return $.noConflict();
}); 并且如果引入的第三方js插件都要手动模块化 是不是太繁琐 能写个通用方法解决不

@zouchengzhuo
Copy link

有个建议,在文档里边能否注明一下各个配置生效的版本? 我们的项目以前用的是2.2.1,paths配置就无法使用。这个配置到2.3.0才可以用吧。 担心还遇到其他的这样的问题,给开发者看文档造成困扰...

@JohnsonHuang94
Copy link

调用某个模块后不能立即得到其属性,可是为什么可以立即执行其函数

@ericyin168
Copy link

看着官网的5分钟入门,我居然真的信了,但是接下来花费的不仅仅是一个5分钟,而是成百上千的5分钟!下载的案例看起来千奇百怪,我就不明白为什么不能用一个简单的功能来做案例,里面放的文件一层嵌套一层,以至于找不到自己想要的。而且并没有考虑不是所有人都能熟练的或者编写过NODE,往上搜索到的教程也是千奇百怪,好像拥有各种写法,然后让人无从下手,特别是官网的文档,根本就不清楚需要表达什么内容。并不是不尊敬大神,初学者本身就没接触过这个东西,案例还做得那么复杂,又没有比较清晰明了的说明,真的感觉无从下手

@SorrowX
Copy link

SorrowX commented Jul 20, 2016

大神,我另一个js页面使用了这段代码

@SorrowX
Copy link

SorrowX commented Jul 20, 2016

//载入手势
var Hamme = require('./hamm');
var hamObj = new Hamme();

@SorrowX
Copy link

SorrowX commented Jul 20, 2016

页面就白屏了

@SorrowX
Copy link

SorrowX commented Jul 20, 2016

被调用的js页面是把一个类抛出去了
module.exports = Hamm;

@SorrowX
Copy link

SorrowX commented Jul 20, 2016

然后另一个js页面载入
Uploading image.png…
就白屏了,除非不引人,就好了

@gonmin
Copy link

gonmin commented Dec 22, 2016

var $ = require('jquery');
  var Spinning = require('./spinning');

引入模块时,什么有时候是直接require+名称就可以了,什么时候要加./ @lifesinger

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests