SeaJS

最新推荐文章于 2021-06-30 18:26:25 发布

花帜

最新推荐文章于 2021-06-30 18:26:25 发布

阅读量330

点赞数

分类专栏： JavaScript 文章标签：框架模块化 seajs javascript

本文链接：https://blog.csdn.net/Yana_li/article/details/52780750

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

SeaJS是一种遵循CMD规范的javascript模块加载框架，可以实现javascript的模块化开发及加载机制。

SeaJS的主要目的是令javascript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的javascript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。

下面来介绍一下SeaJS的用法：

我在下面直接定义了4个js文件，并且调用，根据代码解释

//test01.js--模块一
define(function(require,exports,module){
    //在我们自定义的js文件中，我们利用define来定义一个模块，define的第一个参数可以传递一个模块（可选），第二个参数是一个匿名函数，这个匿名函数中存在三个参数：
    //1.require--模块加载函数，用于记载依赖模块

    //module--模块的元数据
    var test02=require("test02");

    var test03=require("test03");
    //2.exports--接口点，将数据或方法定义在其上则将其暴露给外部使用

    //依赖jquery库
    exports.$=require("jquery-1.8.3");

    exports.data3=test02.data3;

    var data1="this is test01-data1";
    //data2定义为公开
    exports.data2="this is test01-data2";

    function fn1(){
        console.log("this is test01-fn1");
    }

    fn1();

    function fn2(){
        console.log("this is test01-fn2");
    }

    exports.fn3 = function(){
        console.log("this is test01-fn3");
    }
});

//test02.js--模块二
define(function(require,exports,module){
    var data1="this is test02-data1";
    //data2定义为公开
    exports.data2="this is test02-data2";

    exports.data3="this is test02-data3";

    function fn1(){
        console.log("this is test02-fn1");
    }

    fn1();

    function fn2(){
        console.log("this is test02-fn2");
    }

    exports.fn3 = function(){
        console.log("this is test02-fn3");
    }
});

//test03.js--模块三
define(function(require,exports,module){
    var data1="this is test03-data1";
    //data2定义为公开
    exports.data2="this is test03-data2";

    function fn1(){
        console.log("this is test03-fn1");
    }

    fn1();

    function fn2(){
        console.log("this is test03-fn2");
    }

    exports.fn3 = function(){
        console.log("this is test03-fn3");
    }

    function fn4(){
        console.log("this is test03-fn4");
    }

    fn4();
});

//test04--模块四
define(function(require,exports,module){

    var data1="this is test04-data1";
    //data2定义为公开
    exports.data2="this is test04-data2";

    function fn1(){
        console.log("this is test04-fn1");
    }

    fn1();

    function fn2(){
        console.log("this is test04-fn2");
    }

    exports.fn3 = function(){
        console.log("this is test04-fn3");
    }

    function fn4(){
        console.log("this is test04-fn4");
    }

    fn4();
});

//index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/sea.js" ></script>
        <script type="text/javascript">

//利用seajs.use()关联js代码           seajs.use(["test01","test03","test04"],function(t1,t3,t4){
                console.log(t1.data1);//data1属于test01.js内部的变量，调用不到
                console.log(t1.data2);//成功调用，data2是用了exports定义的，将变量公开了
                console.log(t1.data3);//成功调用

                t3.fn3();//成功调用

                $("map").css({"color":"red"});
            });
        </script>
    </head>
    <body>
        <map>i am liyanan ,hello,you!</map>
    </body>
</html>

此时代码的运行结果：

这里写图片描述

此时，因为在test01.js中用require依赖了test02.js,test03.js，所以在index.html中依赖test01.js时，test02.js，test03.js中的fn1函数会被调用。

下面我们根据代码来分析一下seajs提供的载入模块的三个API：

seajs.use：

主载入口，seajs从这里开始运行。

require：

在模块中调用模块时使用。

require.async:

seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js在用到时才下载，可以使用require.async。

require.async('/path/to/module/file', function(m) {
    //code of callback...
});

下面介绍SeaJS的全局配置：

SeaJS提供了一个seajs.config方法可以设置全局设置，接受一个表示全局配置的配置对象。

测试代码如下：

seajs.config({
    base: 'path/to/jslib/',
    alias: {
      'app': 'path/to/app/'
    },
    charset: 'utf-8',
    timeout: 20000,
    debug: false
});
//1.base：表示基址寻址时的基址路径
//2.alias：可以对较长的常用路径设置缩写（相当于给它重新命一个稍短一点的名字）。
//3.charset：表示下载js时script标签的charset属性
//4.timeout：表示下载文件的最大时长，以毫秒为单位。
//debug：表示是否工作在调试模式下。

花帜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SeaJS

SeaJS是一种遵循CMD规范的javascript模块加载框架，可以实现javascript的模块化开发及加载机制。SeaJS的主要目的是令javascript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的javascript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。下面来介绍一下SeaJS的用法：我在下面直接定义了4个js文件，并且调用，根据代码解释//test01.js-
复制链接

扫一扫

专栏目录