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

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.config 里alias的别名设置只是给路径取个别名,减少书写;
  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路径调用的。

Seajs使用实例入门介绍的更多相关文章

  1. C# BackgroundWorker组件学习入门介绍

    C# BackgroundWorker组件学习入门介绍 一个程序中需要进行大量的运算,并且需要在运算过程中支持用户一定的交互,为了获得更好的用户体验,使用BackgroundWorker来完成这一功能 ...

  2. Kafka入门介绍

    1. Kafka入门介绍 1.1 Apache Kafka是一个分布式的流平台.这到底意味着什么? 我们认为,一个流平台具有三个关键能力: ① 发布和订阅消息.在这方面,它类似一个消息队列或企业消息系 ...

  3. Python 基于python操纵redis入门介绍

    基于python操纵redis入门介绍 by:授客  QQ:1033553122 测试环境 redis-3.0.7 CentOS 6.5-x86_64 python 3.3.2 基于Python操作R ...

  4. 学习Mysql过程中拓展的其他技术栈:Docker入门介绍

    一.Docker的介绍和安装 1. Docker是什么 百度百科的介绍: Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linu ...

  5. Google-Guice入门介绍

    原地址:http://blog.csdn.net/derekjiang/article/details/7231490 一. 概述 Guice是一个轻量级的DI框架.本文对Guice的基本用法作以介绍 ...

  6. Redis(二):Redis入门介绍

    Redis入门介绍目录导航: 入门概述 VMWare + VMTools千里之行始于足下 Redis的安装 Redis启动后杂项基础知识讲解 入门概述 是什么 Redis:REmote DIction ...

  7. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  8. 【原创】React实例入门教程(1)基础API,JSX语法--hello world

    前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...

  9. 【转帖】Kafka入门介绍

    Kafka入门介绍 https://www.cnblogs.com/swordfall/p/8251700.html 最近在看hdoop的hdfs 以及看了下kafka的底层存储,发现分布式的技术基本 ...

随机推荐

  1. 《JAVASCRIPT高级程序设计》第二章

    把javascript应用在网页中,需要涉及web的核心语言-html:如何让javascript既能与html共存,又不影响页面的显示效果,经过长时间的讨论.试错,最终的决定是为web增加统一的脚本 ...

  2. StringUtils工具类常用方法介绍(持续更新)

    StringUtils方法的操作对象是java.lang.String类型的对象,是JDK提供的String类型操作方法的补充,并且是null安全的(即如果输入参数String为null则不会抛出Nu ...

  3. 2017年试试Web组件化框架Omi

    Open and modern framework for building user interfaces. Omi的Github地址https://github.com/AlloyTeam/omi ...

  4. 《JavaScript DOM 编程艺术 》 笔记

    一:这本书由几个案列带入知识点,通俗易懂.最大的收获莫过于作者多次提到的逐渐增强和平稳退化. "渐进增强"指的是给所用用户同等的基本使用体验,再根据用户终端的级别给予更高级的用户更 ...

  5. Jmeter生成html格式测试报告

    使用jmeter进行性能测试,运行完毕后生成html格式的测试报告,需要进行如下操作: 1.在C:\apache-jmeter-3.0\bin文件夹下的user.properties文本中添加如下信息 ...

  6. 传输控制协议TCP

    TCP主要特点: (1)面向连接 (2)只能是点到点 (3)可靠的传输协议 (4)全双工通信,各自各自的读写缓冲区,应用层吧数据交给发送缓冲区,tcp合适就发送了,接受的时候tcp写入接受缓冲区,应用 ...

  7. Omi教程-生命周期和事件处理

    生命周期 名称 含义 时机 constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完成,HTML已经插入页面 ...

  8. 我的JS 中级学习篇

    在codefordream上进入中级学习后,感觉立马从js的基础学习往前跳了好远,上面的东西好像都是第一次看到一样.这时候才发现,说来也曾接触过js,但是这时候才发现对js的认识就停在知道两点:js中 ...

  9. mybatis的动态sql中collection与assoction

    User.java, Role.java,address.java为三个类 public class User { .....//user自己的属性//association一对一 private R ...

  10. Android 反射-换一种方式编程

    Android 反射-换一种方式编程 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/59109933 本文出自[赵彦军的博客] 上一 ...