seajs和requirejs实现模块化开发

seajs模块化加载框架

---

5分钟入门

• 1: 引包
• 2: 启动 seajs.use("../static/lucky/src/main"); main.js可以省略后缀
  • 建议： seajs.use([]); 第一：建议传数组，第二：不管使用什么的时候，尽量省略.js
• 3: 不管是谁，首先你得自己是一个模块，然后还可以向模块导出数据
  • define(函数或者数组);
  • 建议掌握传递函数的方式，module.exports 可以用return 来替代
• 4: 你本身是一个模块，你可以引入模块，拿到返回值require('./data');
  • 如果不需要返回值。也可以require();
• 5: 如果需要返回值，也可以通过module.exports = xxxx来让外部获取
  • exports用来挂载属性,module.exports是通用

sea.js官网：http://seajs.org/docs/

define

• define如果不传function 那么传入的参数就是其返回值
• 可以传入的数据有：
  • 对象、数组、字符串、function
• define(function(require,exports,module){});

require

• require的参数只能是字符串
• require函数是我自己来实现，同样有没有必要加载多次
  • seajs中，加载第一次，就会放入到缓存中，接下来不需要读取文件
  • 缓存：指的就是当前模块执行后最终的module.exports，把其值保存起来
  • 多次获取module.exports的值只会有一个
• 异步的调用方式
  • require.async(模块)

use的使用

• seajs.use(数组,回调函数)
  • 回调函数的参数就是数组每个模块的返回值
  • 模块加载的顺序，和回调函数参数的顺序一定要一致
• use函数是异步的

高级配置（难点，了解）

seajs.config({
    base: "../sea-modules/", //基础目录
    alias: {  //设置别名
      "jquery": "jquery/jquery/1.10.1/jquery.js",
      "jquery-easing": "jquery/easing/1.3.0/easing.js"
    }
});

• base:属性是顶级目录，也可以理解为基础目录
  • 使用的方式，排除绝对路径和相对路径，直接写接下来的文件夹或者文件名，就ok
• 应用场景：
  • 1: 配置是一个大家都使用的目录，只要该目录发生改变，修改base值，其他的引用也会改变
  • 2: 使用相对路径使用，逐个修改太麻烦，base路径修改，做跨盘符更方便
  • 3: 解决目录层级过深的问题
• base目录默认是seajs的目录

几个属性的强调

• base、alias、paths ：使用只能是以非绝对路径和相对路径，既: 直接写名称 seajs.use('a')
• 如果是seajs.use('x'); 优先匹配alias 和 paths,匹配上了不匹配base
• alias和paths都能使用base
• 在seajs中叫paths 只能匹配文件夹，使用需要拼接
• 在requirejs中叫paths 可以是文件
• requirejs: base = baseUrl,alias = paths

requireJS基本使用

---

• 配置shim ：垫片

  • 1:配置一个别名，该别名指向具体的文件

  • 2:将该别名进行垫的操作,告诉requirejs,我们需要的是文件中的哪一个对象

    shim:{ 'jquery':{exports:'$'},[垫其他对象] }
    

  其他配置与seajs差不多

  require官方网站：http://requirejs.org/

  requirejs官方中文网：http://www.requirejs.cn/

总结：seajs 与 requirejs

---

基本步骤

• seajs
  • 步骤：1:引包、2:启动并指定入口模块、3:定义模块、4:引入模块、5：导出模块
    • 1:<script src> 2:seajs.use([xxx],回调) 3:define(function(require,exports,module){}) 4:var xxx = require(xxx) 5:module.exports = xxx
    • exports用来挂载属性简写,可以return
• requirejs
  • 步骤：1:引包、2:启动并指定入口模块、3:定义模块、4:引入模块、5：导出模块
    • 1:.. 2:requirejs([],回调) 3: define(id,[依赖],回调(参数)) 5:return

• requirejs也可以按照cmd的方式

  define(function(require,exports,module){})
  

• 第三方的问题

  • seajs中：找到对应文件处理amd的地方，模拟处理cmd
    • if(define typeof === 'function' && define.cmd){ define(function(){return 对象})}
  • requirejs:
    • 设置paths:{jquery:'路径'}
    • 垫片 shim:{'jquery':{exports:'$' dept:'依赖'} }
    • 使用 直接使用别名
    • 在使用前端模块化框架的时候，为了少踩坑，可以考虑2点：
      • 启动的时候能给数组给数组
      • 能不给.js就不给.js

区别

• AMD: async module define 异步模块定义
• CMD: common module define 同步模块定义（CMD规范是玉伯出的）
• 都可以进行异步加载 require.async
• 从代码的角度来看：
  • seajs 是加载滞后(什么时候用，什么时候加载)
    • 懒加载
  • requirejs 是加载前置(需要用到什么，提前加载)
    • 预加载
• 从官方加载机制的区别来看：
  • seajs 懒加载
  • require 提前加载
• 从案例的加载机制来说：
  • seajs是随需要的时候加载
  • requirejs 会优先检查需要依赖，然后先加载依赖