AMD / CMD 模块化开发

AMD 先下载 require AMD开发模块包

1. 同一文件夹下有  a.js   b.js  c.js    index.html     require.js包

a.js

// 文件名 : a.js
let a = 10;

define('moduleA',function(){
  return a
})
// 语法 
// define('模块名',执行函数)
// 执行函数中使用对应的逻辑语法  ，最后函数中使用return 抛出变量

b.js

//b .js

let b = 20;


defind('moudleB',['moudleA'],function(mouduleA){

console.log(moduleA)   //10

return { b,mouduleA}

 })

c.js

require(['moduleA','moudleB'],function(){
     
      console.log(moduleA,moudleB) 
})

/ requirejs 语法
// 第一步 引入requirejs
//第二步： 使用define('模块名',[依赖的模块1，依赖的模块2，。。。]，function(依赖的模块1,依赖的模块2){
// 模块1 就是该模块return 的值
// 模块2 就是该模块return 的值
// })

// 特点：不用考虑文件的引入顺序了,因为requirejs 把依赖关系定义到代码里了

CMD模块化

1 同一文件夹下有  a.js   b.js  c.js    index.html     sea.js包

a.js

// 语法
// define('模块名',funciton(require，exports，module){
// require引入其他模块时使用
// exports 抛出变量时使用
// module 抛出变量时使用
// })
define('moduleA', function (require, exports, module) {
    let a = 10
    // 抛出 a 变量  exports为对象
    exports.a = a
})

b.js

define('moduleB', function (require, exports, module) {
    let b = 20
    // 引入a
    let a = require('moduleA')
    // 抛出 a,b
    module.exports = {
        a,
        b
    }
})

c.js

seajs.use(['moduleA', 'moduleB'], function (moduleA, moduleB) {
    console.log(moduleA, moduleB);
})

// 语法：
// seajs.use(['moduleA', 'moduleB'], function (moduleA, moduleB) {
// console.log(moduleA, moduleB);
// moduleA，moduleB 分别时依赖进来的模块
// })

// 特点：
// 什么时候使用其他变量，什么时候require 进来
// c.js 文件就是最终执行的文件，他没有再被其他模块依赖了