Seajs使用实例入门介绍

时间 2019-11-13

标签 seajs 使用实例入门介绍繁體版

原文原文链接

seajs是啥，能够看看这篇前端模块化（CommonJs,AMD和CMD）javascript

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

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:java

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

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

模块文件引入

咱们自定一个模块changeText.js:面试

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

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

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()上面加入这一段代码：less

<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')。dom

模块调用

下面试着引入一个模块的方法，将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.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路径调用的。