• seaJs模块化开发简单入门


    随着前端技术的日益成熟,功能越来越丰富强大,规范也越来越健全,在这样的背景环境下很快便有了CommonJsAMDCMD等一系列规范,使前端发开趋向模块化、规范化。
    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
  • 相关阅读:
    Hashtable,挺爽的一个东西,大家都用烂了吧,我再画蛇添足一下。
    今天你写控件了吗?ASP.net控件开发系列(八)
    Attribute在运行期赋值?
    整几个题给大家玩玩,看看“下盘功夫”怎样
    当stringFormat碰上{和}
    一句SQL语句解决倒序数据分页提取
    C#扩展一般用于linq
    字符串转日期类型
    Dispatcher与UI线程交互
    圆形进度条
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12251337.html
Copyright © 2020-2023  润新知