模块化开发 CMD seajs

概述

基于CMD标准的web模块化开发语言
当页面上加载js库，超过3个时候，可以使用，便于项目后期维护

官网
下载地址
CMD规范

快速上手杂记 ( Sea.js 3.0.3 | seajs.org/LICENSE.md - 最新版本)

1.创建项目，引入seajs
如 index.html

<script src='sea_3.0.3.js'></script>

2.添加入口文件,main.js
js类型文件敏感，后缀名可以省略

<script>
  seajs.use('module/js/main');
</script>

3.定义模块与引入模块
路径module/js/ - 新建main.js与modA.js
main.js

define(function(require,exports,module){
    var sumFn = require('module/js/modA').sumFn;
    console.log(sumFn(1,2)); 
});

4.导出模块
modA.js

define(function(require,exports,module){
  function sumFn(a,b){
    return a+b;
  }

  module.exports.sumFn = sumFn;
});

补充与细节

1.定义与返回模块

通过define来定义模块，其中define接收3个参数

define('id', [], function(require, exports, module) {
...
});

默认如果不加ID，没有引用，则直接可以定义第三个参数
第三个参数，如果定义非function，则为返回值
如：

define(123);
define('hello');
define(true);
...

如果定义模块为函数形，需要返回值，如果没有返回值，则为null
返回值的方式：
1-1. exports方式

define(function(require,exports,module){
  module.exports.a = xxx;
  module.exports.b = xxx;
});

1-2

define(function(require,exports,module){
  function fn1(){
    ...
  };

  return fn1;
});

注： 所有模块的引用路径，都是相对sea.js文件，而非html文件

2.模块添加有ID的模块时候

导出

define(‘模块的ID名'’,function(require,exports,module){
  module.exports = 'xxxxxx';
});

引用

define(['被引用模块路径'], function(require,exports,module){
  var txtMes = require('模块的ID名');
  console.log(txtMes); //xxxxxx
});

3.异步引入模块

define(function(require){
    require.async(['路径'],function(){
        console.log(arguments);
    })
});

4. 各种TIPS

1. exports 是 module.exports的一个引用，如果要导出，需要对module.exports进行挂载属性或者赋值
2. 不可以直接对exports进行赋值，这样会打乱引用关系
3. 条件判断中 在非中使用require会加载，但是使用require.async则不会加载

seajs配置

1. alias 别名使用

seajs.config({
    alias:{
        'jquery':'/xxx/xxx/jquery'
    }
});

2. path 批量路径修改
   区别与alias，path会将所有aaa/bbb的路径替换为'js'

seajs.config({
    path:{
        'js':'aaa/bbb'  
    }
});

3.map 简化文件路径 - 是一种映射关系
map对应一个二维数组，每一个子数组，第一项是简化之后的字符串，第二项是被简化的字符串
例如：
将module/js/a.js 简化为 a

seajs.config({
    map:[
        [ 'a','module/js/a' ]
    ]
});

插件

1. 引入seajs-css.js，通过script标签方式
   就可以通过引入的方式加载css文件了，seajs只对js文件敏感，其他类型文件不得省略后缀名
   如

<script src="sea.js"></script>
<script src="seajs-css.js"></script>
<script>
    seajs.use('css/style.css');
</script>

2.预加载插件
通过script标签引入 seajs-preload.js

seajs.config({
  preload: ['js/jquery-3.4.1'];
});

//通过seajs.use来触发preload
//且会先加载preload里的内容，再加载真正内容，如 `js./a.js`
seajs.use('js/a');