Seajs使用实例入门介绍

参考：https://www.jianshu.com/p/ebdf2233e3fe

1. seajs页面引入

index.html

思路：首先引入sea.js文件，然后通过seajs.use加载main.js文件

<!doctype html>
<html>
<head><meta charset="utf-8"><title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<h1 id="content">I am content</h1>
<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
<script>seajs.use('./main.js');//同级目录
// seajs.use('../main.js');//不同级目录
</script>
</body>
</html>

main.js

思路：define()用来定义模块文件。用main.js修改id为title的标签的文本内容

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

页面输出：yes it works

2.模块文件引入

新建change.js

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

修改main.js

思路：change模块输出一个text变量，在main中引用

define(function (require, exports, module) {var change = require('./change.js'); //同级目录，通过require将change模块的输出对象赋值给change变量var title = document.getElementById('title');title.innerHTML = change.text; //将对象的text属性赋值给节点的文本值
)}

页面输出：yes it works

3.别名设置

修改index.html

思路：引入一个模块要写他的相对路径，可以给它取个别名，在seajs.use()上面加入一段代码，通过config中alias给'./change.js'设置别名change，现在main中引用change模块就可以直接写成这样了var change = require('change')

<!doctype html>
<html>
<head><meta charset="utf-8"><title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<h1 id="content">I am content</h1>
<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
<script>seajs.config({alias:{'change':'./change.js'//同级目录}});seajs.use('./main.js');//同级目录// seajs.use('../main.js');//不同级目录
</script>
</body>
</html>

4.模块调用

修改change.js

思路：模块中定义了一个init方法，随机返回数组中的一条

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}
})

修改main.js

思路：因为index.html已经用了别名设置，所以require里直接用别名即可

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

5.第三方文件引用

jQuery.js

思路：下载一个jq源文件，把代码复制到以下源码处，另其模块化，能被外部调用

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

修改index.html

思路：设置别名，使其他地方可以使用

<!doctype html>
<html>
<head><meta charset="utf-8"><title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<!--<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>-->
<script src="seajs/2.2.0/sea.js"></script>
<script>seajs.config({alias:{'change':'./change.js','jquery':'./jq.js'}});seajs.use('./main.js');//同级目录// seajs.use('../main.js');//不同级目录
</script>
</body>
</html>

修改main.js

思路：在main里引入jq代码并且使用

define(function (require, exports, module) {var change = require('change');// var title = document.getElementById('title');// title.innerHTML = change.init();var $ = require('jquery');$('#title').text(change.init());
})

6.回调函数

修改main.js

思路：另seajs.use([module],callback),加载一个或多个模块，并执行回调函数

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

修改index.html

思路：增加回调函数。加载两个模块（main、jQuery），把他们的输出对象传给main和$变量，通过点击事件，调用main中的showText方法，showText方法调用change 的init方法

<!doctype html>
<html>
<head><meta charset="utf-8"><title>Hello</title>
</head>
<body>
<h1 id="title">seajs demo</h1>
<!--<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>-->
<script src="seajs/2.2.0/sea.js"></script>
<script>seajs.config({alias:{'change':'./change.js','jquery':'./jq.js'}});// seajs.use('./main.js');//同级目录// seajs.use('../main.js');//不同级目录seajs.use(['main','jquery'],function(main,$) {$('#title').after('<button id="show">showText</button>');$('#show').on('click',function() {main.showText()})});
</script>
</body>
</html>

7.路径问题

· ./是表示当前目录；../是上级目录；

· seajs.config 里alias的别名设置只是给路径取个别名，减少书写；

· seajs里主要两个用到路径的地方：一个是seajs.use()；一个是require()。

· base路径是seajs文件所在目录