Seajs使用实例入门介绍

seajs是啥,可以看看这篇前端模块化(CommonJs,AMD和CMD)
点我点我--项目源码地址:https://github.com/linwalker/seajs-demo

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

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.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方法。

路径问题

我们先来搞清几个问题:

  1. ./是表示当前目录;../是上级目录;
  2. seajs.configalias的别名设置只是给路径取个别名,减少书写;
  3. seajs里主要两个用到路径的地方:一个是seajs.use();一个是require()。
  4. 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.jsmain.js在同一个目录下;

如果路径以文件名开头则是相对base路径,与前面seajs.use()一样,jquery:jqeury/jquery就是相对base路径调用的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容