专栏首页前端儿SeaJS 模块化加载框架使用

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 条评论
登录 后参与评论

相关文章

  • RequireJS 模块化加载框架使用

    同样的,首先是下载好 require.js --> http://requirejs.org/docs/download.html#requirejs

    书童小二
  • Webpack编译结果浅析

    如今Webpack已经是一个不可或缺的前端构建工具,借助这个构建工具,我们可以使用比较新的技术(浏览器不能直接支持)来开发。

    书童小二
  • 括号配对问题

    输入第一行输入一个数N(0<N<=100),表示有N组测试数据。后面的N行输入多组输入数据,每组输入数据都是一个字符串S(S的长度小于10000,且S不是空串)...

    书童小二
  • 在SE37里批量执行ABAP函数

    在SE37里直接执行如下function module,对应的update module ZSQF不会被执行,因为缺少commit work。

    Jerry Wang
  • 一步一步学Vue(九)

    Jerremy
  • C++容器和算法

    容器:某一类型数据的集合。 C++标准顺序容器包括:vector,list,queue 容器初始化 vector<int> t; ...

    猿人谷
  • C++容器与算法

    容器:某一类型数据的集合。 C++标准顺序容器包括:vector,list,queue 容器初始化 vector<int> t; ...

    猿人谷
  • C++容器和算法

    容器:某一类型数据的集合。 C++标准顺序容器包括:vector,list,queue 容器初始化 vector<int> t; ...

    猿人谷
  • 大摩说Waymo值700亿美元,比特斯拉、通用汽车还要高

    李杉 编译自 CNBC 量子位 报道 | 公众号 QbitAI 摩根士丹利在周一发布的研报中表示,Alphabet旗下无人驾驶部门Waymo价值可达到700亿美...

    量子位
  • SalesForce白皮书:SaaS 初创公司成功的 7 个秘密(下)

    T客汇官网:tikehui.com 编译|徐婧欣 ? 秘密 6:建立高度规范的财务流程 由于 SaaS 公司在合同实施过程中获得收益而非提前获得,它们必须以...

    人称T客

扫码关注云+社区

领取腾讯云代金券