您的位置：首页 > Web前端 > JavaScript

010 - Seajs使用实例入门介绍

2017-07-10 13:05 267 查看

Seajs使用实例入门介绍

seajs是啥，可以看看这篇前端模块化（CommonJs,AMD和CMD）

文章来自于

本文所用例子的代码目录结构：

seajs example
|--sea-module       //存在依赖文件
|--jquery
|--jqeury.js
|--sea.js
|--static         //存放自定义模块js
|--main.js
|--index.html     //调用页面

seajs页面引入

下面开始，首先看下index：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs example</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<script src="sea-module/sea.js"></script>
<script>
seajs.use('./static/main.js');
</script>
</body>
</html>

首先引入sea.js文件，然后通过seajs.use加载main.js文件。我们再来看看main.js:

define(function(require,exports,module) {
var title= document.getElementById('title');
title.innerHTML = "yes it works"
})

define()用来定义模块文件，具体参数等介绍可以参考文章开头介绍的文章。此处，页面会输出
yes it works
,是main.js修改了id为title的标签的文本内容，并没有引用其他模块文件。

模块文件引入

我们自定一个模块changeText.js:

define(function (require, exports, module) {
var textContent = 'yes it works';
exports.text = textContent;
//or
//module.exports = {
//text: textContent
//}
})

changeText模块输出了一个text变量，然后我们在main中引用它：

define(function (require, exports, module) {
var changeText = require('../static/changeText.js');
var title = document.getElementById('title');
title.innerHTML = changeText.text;
})

我们通过require将changText模块的输出对象赋值给changeText变量，然后将对象的text属性赋值给节点的文本值,此时页面输出效果是一样的。

别名设置

引入一个模块要写他的相对路径，我们可以给它取个别名，在seajs.use()上面加入这一段代码：

<script>
seajs.config({
alias:{
'changeText':'../static/changeText.js'
}
});
seajs.use('./static/main.js');
</script>

通过config中alias给
'../static/changeText.js'
设置了别名
changeText
，现在main中引用changeText模块就可以直接写成这样了
var changeText = require('changeText')
。

模块调用

下面试着引入一个模块的方法，将changeText改为：

define(function (require, exports, module) {
var init= function() {
var textContent = [
'yes it works',
'seajs demo',
'it is a lucky day',
'wish this help you',
'thank you for reading'
];
var index = Math.floor(Math.random()*textContent.length);
return textContent[index];
}
module.exports = {
init:init
}
})

模块中定义了一个init方法，它随机返回数组中的一条。然后我们将main修改下：

define(function (require, exports, module) {
var changeText = require('changeText');
var title = document.getElementById('title');
title.innerHTML = changeText.init();
})

这时候我们每次刷新页面都会随机出现一条文字。

第三方文件引用

下载一个jquery源文件，按如下修改：

define(function (require, exports, module) {
jquery 源码
})

使其模块化，能被外部调用。

然后再设置别名：

seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'./static/main.js'
}
});
seajs.use('./static/main.
4000
js');

在main中引入jquery，并使用：

define(function (require, exports, module) {
var changeText = require('changeText');
var $ = require('jquery');
$('#title').text(changeText.init());
})

回调函数

seajs.use([module],callback),加载一个或多个模块，并执行回调函数。我们将main修改下：

define(function (require, exports, module) {
var changeText = require('changeText');
var $ = require('jquery');
var showText = function () {
$('#title').text(changeText.init());
}
exports.showText = showText;
})

然后增加回调函数：

seajs.use(['main','jquery'],function(main,$) {
$('#title').after('<button id="show">showText</button>');
$('#show').on('click',function() {
main.showText()
})
});

上述代码我们加载了两个模块，并把它们输出的对象传参给main和$变量,通过点击事件调用main中的showText方法，而showText方法调用了changeText中的init方法。

路径问题

我们先来搞清几个问题：

./
是表示当前目录；
../
是上级目录；
seajs.config
里
alias
的别名设置只是给路径取个别名，减少书写；
seajs里主要两个用到路径的地方：一个是seajs.use()；一个是require()。
base
路径是seajs文件所在目录，本例子为 
（file:///Users/linyuhua/code/seajs/sea-module/）

先来讲seajs.use()路径

seajs.use()调用模块文件的路径默认是seajs文件的父文件夹目录；以本例子来解释：

首先来回看下我们的目录结构：

seajs example
|--seajs
|--sea-module       //存在依赖文件
|--jquery
|--jqeury.js
|--sea.js
|--static         //存放自定义模块js
|--main.js
|--changeText.js
|--index.html     //调用页面

调用main可以通过以下路径：

seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'./static/main.js'
}
});
seajs.use(['main','jquery'],function(main,$) {
...
})
});
//  ./表示当前路径,seajs.use的默认路径是seajs文件的父文件夹的目录；即file:///Users/linyuhua/code/seajs/；
//  因此，此时main的调用路径为file:///Users/linyuhua/code/seajs/static/main.js

在举个例子来证明，这次我们使用../来设置路径：

seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'../seajs/static/main.js'
}
});
seajs.use(['main','jquery'],function(main,$) {
...
})
});
// ../表示上级目录，seajs.use()的目录为file:///Users/linyuhua/code/seajs/；
// 他的上级目录为file:///Users/linyuhua/code/，因此此时main的别名设置为../seajs/static/main.js;
// 合并之后就是file:///Users/linyuhua/code/seajs/static/main.js

最后再来看看jquery的调用，直接以文件名开头，在seajs中直接以文件名开头的路径是相对于base路径，也就是说当把jquery别名设置为
'jquery':'jquery/jquery',
时，他的调用路径为

base+‘jquery/jquery’（.js可以省略）；即
file:///Users/linyuhua/code/seajs/sea-module/+jquery/jquery
;

require()调用路径

下面我们来看看require调用的路径

首先是
./
和
../


在define(function (){ }), 则是相对于当前的js文件所在目录，还记得main中怎么调用changeText.js和jquery的吗：

//对照别名设置
seajs.config({
alias:{
'changeText':'../static/changeText.js',
'jquery':'jquery/jquery',
'main':'../seajs/static/main.js'
}
});

define(function (require, exports, module) {
var changeText = require('changeText');
var $ = require('jquery');
var showText = function () {
$('#title').text(changeText.init());
}
exports.showText = showText;
})

由于在define(function (){ }), 则是相对于当前的js文件所在目录，所以../表示changeText.js的上级目录即
file:///Users/linyuhua/code/seajs
，加上别名就是
file:///Users/linyuhua/code/seajs/static/changText.js
;

我们也可以直接
require('./changeText.js')
来调用，
./
表示当前目录，而
changeText.js
与
main.js
在同一个目录下;

如果路径以文件名开头则是相对base路径，与前面seajs.use()一样，
jquery:jqeury/jquery
就是相对base路径调用的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航