SeaJS 模块化加载框架使用

SeaJS 是一个遵循 CMD 规范的模块化加载框架

CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用。

如果你有使用过nodejs ,那么理解起来就容易多了。

我们通过sea.js来加载我们定义的模块(这会儿遵循CMD规范)并使用相应的数据。

首先,当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包,解压后 在 /dist/目录下可以 找到 sea.js

CMD规范是懒加载,按需加载,也就是在require的时候相应的模块才会被加载进来。

基本用法为:

define(function(require, exports, module) {

  // The module code goes here
 // require ..


});

CMD详细用法见此

举个例子:(为了简单说明,暂时先直接置于同一目录)

index.html是主界面,main.js这里充当了主模块文件(一般需要 seajs.use('.main') 的方式来加载主模块),然后主模块main又调用main1,main2小模块,理解执行过程。

index.html:

首先包含资源sea.js ,再包含主模块,这里因为要执行主模块中返回的数据,所以使用了回调函数的处理

<!DOCTYPE html>
<html>
<head>
    <title>Seajs</title>
    <style type="text/css">
    </style>
</head>
<body>

<script type="text/javascript" src="./sea.js"></script>
<script type="text/javascript">
//加载入口文件main.js,默认后缀js自动匹配
    seajs.use('./main',function(main){ 
        console.log(main.say());
    });
</script>
</body>
</html>

main.js:

这里,main.js定义了一个模块main.js ,在其中又require其他模块进行处理,然后返回一个对象。

返回的时候可以直接使用return,类型会自动判断,也可以module.exports = 

比如想返回 ‘w' ,可以直接 return ’w'; 或 module.exports = 'w'; index那里相应做一下修改就行。

define(function(require,exports,module){ 
    console.log('module of main:');
    var main1 = require('main1');
    main1.say();
    var main2 = require('main2');
    main2.say();

    return { 
        say: function(){ 
            console.log('main--hello');
        }
    };

});

main1.js:

define(function(require,exports,module){ 
    console.log('module of main1:');

    module.exports = { 
        say: function(){ 
            console.log('main1--hello');
        }
    };
});

main2.js:

define(function(require,exports,module){ 
    console.log('module of main2:');

    return { 
        say: function(){ 
            console.log('main2--hello');
        }
    };
});

ok 浏览器访问index.html 即可看到执行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ASP.NET MVC5 后台权限管理系统

.Net 转战 Android 4.4 日常笔记(5)--新软件Android Studio 0.5.8安装与配置及问题解决

说真心话,Eclipse跟我们.net的VS比起来就是屌丝比高富帅,一切都是那么的难用,速度慢得我无法忍受 于是想试试Google钦点的Android Stud...

20670
来自专栏云计算教程系列

如何在Ubuntu 16.04上安装Git

现代软件开发中不可或缺的工具是某种版本控制系统。版本控制系统允许您在源级别跟踪软件。您可以跟踪更改,还原到以前的阶段,然后分支以创建文件和目录的备用版本。

1K70
来自专栏张戈的专栏

Linux:10个实用的网络和监控命令

本文列出了 10 个基础的每个 Linux 用户都应该知道的网络和监控命令。网络和监控命令类似于这些: hostname, ping, ifconfig, iw...

43930
来自专栏魏艾斯博客www.vpsss.net

开启 CDN 后 wordpress 后台打不开的解决办法

59750
来自专栏java一日一条

Git常用命令使用大全

目前开发的新项目使用的版本控制工具基本用的都是Git,老项目用的还是Svn,网上Git资源也很多,多而杂。我整理了一份关于Git的学习资料,希望能帮助到正在学习...

10710
来自专栏康中良的专栏

crontab在一秒内刷新多次导致部分脚本不生效的问题分析

stat为系统函数调用,该函数取得的结构体的`st_mtime`的单位为秒。今天ob在几台DB上发现crontab中的监控任务,从来没有执行。但操作一下cron...

3.5K00
来自专栏cnblogs

vue、rollup、sass、requirejs组成的vueManager

近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择...

27660
来自专栏linux驱动个人学习

高通GPIO驱动(DTS方式)

gpio调试的方式有很多,linux3.0以上ARM架构的处理器基本上都采用了DTS的方式,在linux3.0可以通过获取sysfs的方式来获取gpio状态; ...

59740
来自专栏前端知识分享

第106天:Ajax中同步请求和异步请求

用户填写所有信息后,提交给服务器,等待服务器的回应(检验数据),是一次性的。信息错误又要重新填写!

15020
来自专栏云计算教程系列

如何在Ubuntu 16.04上安装Node.js

Node.js是一个用于通用编程的JavaScript平台,允许用户快速构建网络应用程序。通过在前端和后端利用JavaScript,开发可以更加一致并在同一系统...

1.1K60

扫码关注云+社区

领取腾讯云代金券