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 模块与模块之间
   // 引入Seajs
  

导出成员的方式

  • 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')使用别名

  
                    
                    

你可能感兴趣的:(SeaJS)