seaJs模块化开发简单入门

时间：2021-01-20 12:26:47

随着前端技术的日益成熟，功能越来越丰富强大，规范也越来越健全，在这样的背景环境下很快便有了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>

相关文章