010 - Seajs使用实例入门介绍
2017-07-10 13:05
323 查看
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路径调用的。
相关文章推荐
- Javascript WebSocket使用实例介绍(简明入门教程)
- Javascript WebSocket使用实例介绍(简明入门教程)
- Javascript WebSocket使用实例介绍(简明入门教程)
- Javascript WebSocket使用实例介绍(简明入门教程)
- Seajs使用实例入门
- 最近整理的SqlHelper入门使用实例分享给大家
- 最近整理的SqlHelper入门使用实例分享给大家
- js入门·循环与判断/利用函数的简单实例/使用对象/列举对象属性的名称
- Ajax入门实例第一篇 (Ajax.NET组件使用第一篇)
- myeclipse下hibernate入门实例介绍
- maven使用入门介绍
- Ibatis2.0使用说明(一)——入门实例篇
- Photoshop入门与进阶实例:1.9 滤镜效果的使用
- WSockExpert0.6 beta 1工具介绍和使用实例
- myeclipse下hibernate入门实例介绍
- JDK5的ProcessBuilder介绍和使用实例
- Ibatis2.0使用说明(一)——入门实例篇
- myeclipse下hibernate入门实例介绍
- Photoshop入门与进阶实例:1.6 路径的使用
- Webwork使用Freemarker入门实例