seaJs模块化开发简单入门

Posted lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了seaJs模块化开发简单入门相关的知识，希望对你有一定的参考价值。

随着前端技术的日益成熟，功能越来越丰富强大，规范也越来越健全，在这样的背景环境下很快便有了CommonJs、AMD、CMD等一系列规范，使前端发开趋向模块化、规范化。
CMD模块化的代表之一就是国内开发的seaJs，它有很多优点：

  • 遵从CMD规范，代码模块化
  • 中文文档通俗易懂，入门上手简单
  • 兼容性好、配置简洁明了、提供插件接口

seajs模块化基本流程：

  1. 引入sea.js库
  2. define定义模块
  3. exports暴露模块
  4. require导入模块

安装

  1. npm安装
    npm i seajs
  2. bower安装
    bower i seajs
  3. 官网下载：http://seajs.org/docs/#downloads

定义模块

  • main.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    define(function(require,exports,module){        
        // 引用test.js
        //require('./test.js')
        /*
        * 如果地址是一个模块，那么require的返回值就是模块中的exports
        */
        function (){
            alert(require('./test.js').num);
        };
        // 向外暴露模块接口
        exports.alert = alert;
    })

  • 1） exports : 对外的接口
    2） require : 依赖的接口

  • test.js

    1
    2
    3
    4
    define(function(require,exports,module){
        var num = 10;
        exports.num = num;
    });

调用模块

  • html页面中引入seajs和使用use方法请求入口文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    大专栏  seaJs模块化开发简单入门iv class="line"><html>
    <head>
        <meta charset="UTF-8">
        <title>seaJs</title>
    </head>
    <body>
    <script src="sea.js"></script>
    <script>
        /*
         * seajs.use方法：
         * 页面去调用模块，
         * 第一个参数：模块的地址
         * 第二个参数：地址加载成功后的回调函数
         * seajs的默认目录：sea.js所在的目录
         * */
        seajs.use('./js/main.js',function(exports){
            // 回调的参数，就是模块中的exports
            exports.alert();
        });
        // 加载多个文件
        /*
        seajs.use(['./main.js','./main2.js'],function(ex1,ex2){
            操作
        })*/
    </script>
    </body>
    </html>

  • 加载多个入口文件

    1
    2
    3
    4
    5
    seajs.use(['./main.js','./main2.js'],function(ex1,ex2){
        // 模块加载完成时执行回调操作
        ex1.fn();   // 调用ex1的方法
        ex2.fn();   // 调用ex2的方法
    })

有些js文件可能是在某些事件触发后才会被加载使用，因此没有必要在页面刚访问时，就加在所有资源文件，这样也可以减少客户端与服务器端的请求时间，提高用户体验。

  • seaja对于此便提供了一个async异步请求的方法：
    1
    2
    3
    require.async('./test2.js',function(ex){    // 异步请求
        ex.fn();
    })
  1. http://seajs.org/docs/#docs
  2. http://www.antcome.com/myfaq/SeaJS.html

以上是关于seaJs模块化开发简单入门的主要内容，如果未能解决你的问题，请参考以下文章

seajs入门实例

seajs入门使用

Seajs使用实例入门介绍

使用模块化管理工具seajs实现简单动画效果

Sea.js学习笔记

seaJs的简单应用