SeaJS

安装与使用
通过npm install seajs安装

使用步骤：

• 引入seajs文件
• 定义主模块文件
• 主模块文件通过define定义模块，导出公共成员
• 页面脚本通过seajs.use('path',fn)使用模块
• 回调函数的参数传过来的就是模块中导出的成员

定义模块
通过以下来定义模块

define(function(require, exports, module) {
 // 此处是模块的私有空间
  // 定义模块的私有成员
  // 载入01-convertor模块
  var convertor = require('./01-convertor.js');
  function add(a, b) {
    return convertor.convertToNumber(a) + convertor.convertToNumber(b);
  }
  // 暴露模块的公共成员
  exports.add = add;
});

使用模块

• seajs.use 一般用于入口模块，一般只会使用一次
• require 模块与模块之间

  <script src="node_modules/seajs/dist/sea.js"></script> // 引入Seajs
  <script>
    // 在Seajs中模块的引入需要相对路径完整写法
    seajs.use('./01-calculator.js', function(calculator) {
      var ta = document.getElementById('txt_a');
      btn.onclick = function() {
        switch (op.value) {
          case '+':
            tres.value = calculator.add(ta.value, tb.value);
            break;
        }
      };
    });
  </script>

导出成员的方式

• module.exports
• exports.xxx
• return

console.log(module.exports === exports);输出为true。

  // exports是module.exports的快捷方式，指向的任然是原本的地址
  exports.name = 'hello';
  // module.exports优先级第二，此时module.exports 指向的是一个新的地址
  module.exports = { name: 'hello' };
  // return 的优先级最高
  return { name: 'world' };

异步调用
如下调用会等require执行完后再往下执行

  console.log('module1 ---- start');
  // require 必须执行完成过后（./module2.js加载完成）才可以拿到返回值
  var module2 = require('./03-module2.js'); // 阻塞代码执行
  // JS中的阻塞会有卡顿的情况出现
  console.log('module1 ---- end');

使用require.async异步调用，首先加载03-module2.js文件，加载完后执行function回调函数

  console.log('module1 ---- start');
  require.async('./03-module2.js', function(module2) {

  }); // 此处不会阻塞代码执行
  console.log('module1 ---- end');

** 使用第三方依赖（jQuery）**
jquery默认支持AMD规范，当使用define函数时，不会去往全局挂载jquery对象由于CMD是国产货，jquery默认不支持。
可以通过以下改造

// 适配CMD
if (typeof define === "function" && !define.amd) {
  // 当前有define函数，并且不是AMD的情况
  // jquery在新版本中如果使用AMD或CMD方式，不会去往全局挂载jquery对象
  define(function() {
    return jQuery.noConflict(true);
  });
}

Seajs配置
配置参考
在seajs.config中配置，如下当calc.js路径发生变化时，只需修改别名中内容，代码中路径通过seajs.use('calc')使用别名

  <script>
    seajs.config({
      alias: {
        calc: './modules/calc.js',
      }
    });
    seajs.use('calc');