sea.js 快速上手

sea.js的基本使用,简单总结自官方文档的文字与实例,方便快速上手sea.js。

开始:要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。 下载完成后放到项目的相应位置,然后在页面中通过<script>标签引入,你就可以使用SeaJS了。

1. seajs.configsea.js进行配置

base为主路径,一般从网站的根目录写起(而不是 当前html文件的地址),如果不指定base,则base的默认值为sea.js的上一级(且base不会包含seajs/x.y.z字符串),例如:http://example.com/assets/sea.js,则base路径为:http://example.com/assets/ 。

paths为路径设置, 通过灵活的设置path可以在不影响base的情况下指定到某个目录。

alias为别名,配置之后可在模块中使用require调用 require(‘jquery’);

seajs.config({
	base: "/test/",
	paths: {
		'app': 'js/app',
		'lib': 'js/lib',
		'mod': 'js/mod'
	},
	alias: {
		'jquery': 'lib/jquery'
	}
})

2. 使用define来定义模块

SeaJS中使用“define”函数定义一个模块。
在只传递一个参数给define时(推荐写法),这个参数就是工厂函数,此时工厂函数的三个参数分别是:

require ——模块加载函数,用于记载依赖模块。
exports ——接口点,将数据或方法定义在其上则将其暴露给外部调用。
module ——模块的元数据。

define(function(require, exports, module)) {
    var $ = requier('jquery');
    var add = function(m, n) {
        return m + n;
    }
    return {
        add: add
    }
});

exports是一个对象,用于向外部提供接口

define(function(require, exports)) {
    //对外部提供 foo 属性
    exports.foo = 'bar';
    //对外提供 doSomething 方法
    exports.doSomething = function() {}
});

异步加载,在加载完毕之后执行回调:

require.async(['./c'], ['./d'], function(c, d) {
    c.doSomething();
    d.doSomething();
})

3.使用use来在页面加载一个或多个模块

使用use来在页面加载一个或多个模块,理论上只用于加载启动,SeaJS会顺着入口模块解析所有依赖模块并将它们加载。

如果入口模块只有一个,也可以通过给引入sea.jsscript标签加入”data-main”属性来省略seajs.use

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

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

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

4. 使用require来获取指定模块的接口

define(function(require) {
    var cal = require('mod/calculate');
    console.log(cal.add(1, 2));
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注