前端模块化

// 定义math.js
var basicNum = 0;
function add(a, b) {
  return a + b;
}
module.exports = {
  add: add,
  basicNum: basicNum,
};
 
// 引用自定义的模块时，参数包含路径，可省略.js
var math = require('./math.js');
math.add(2, 4);

(function (exports, require, module, __filename, __dirname) {
  const sayName = require('./hello.js');
  module.exports = function say() {
    return {
      name: sayName(),
      author: '我不是外星人',
    };
  };
});
// 在 Commonjs 规范下模块中，会形成一个包装函数，我们写的代码将作为包装函数的执行上下文，使用的 require ，exports ，module 本质上是通过形参的方式传递到包装函数中的

// 包装函数本质
function wrapper(script) {
  return (
    '(function (exports, require, module, __filename, __dirname) {' +
    script +
    '\n})'
  );
}
// 包装函数执行
const modulefunction = wrapper(`
  const sayName = require('./hello.js')
    module.exports = function say(){
        return {
            name:sayName(),
            author:'author'
        }
    }
`);
// 如上模拟了一个包装函数功能， script 为我们在 js 模块中写的内容，最后返回的就是如上包装之后的函数。当然这个函数暂且是一个字符串
 
runInThisContext(modulefunction)(module.exports, require, module, __filename, __dirname)
// 在模块加载的时候，会通过 runInThisContext (可以理解成 eval ) 执行 modulefunction ，传入require ，exports ，module 等参数。最终我们写的 nodejs 文件就这么执行了

const fs =      require('fs')      // 核心模块
const sayName = require('./hello.js')  // 文件模块
const crypto =  require('crypto-js')   // 第三方自定义模块

// id 为路径标识符
function require(id) {
  // 查找  Module 上有没有已经加载的 js  对象
  // Module 整个系统运行之后，会用 Module 缓存每一个模块加载的信息
  const cachedModule = Module._cache[id];
  // 如果已经加载了那么直接取走缓存的 exports 对象
  if (cachedModule) {
    return cachedModule.exports;
  }
 
  // 创建当前模块的module
  const module = { exports: {}, loaded: false }
  // 将module缓存到Module的缓存属性中，路径标识符作为id
  Module._cache[id] = module
  // 加载文件
  runInThisContext(wrapper('module.exports = "123"'))(module.exports, require, module, __filename, __dirname)
  // 加载完成
  module.loaded = true 
  /* 返回值 */
  return module.exports
}

// a.js
const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){
    const message = getMes()
    console.log(message)
}
// b.js
const say = require('./a')
const  object = {
   name:'《React进阶实践指南》',
}
console.log('我是 b 文件')
module.exports = function(){
    return object
}
// 主文件 main.js
const a = require('./a')
const b = require('./b')
 
console.log('node 入口文件')

// 用 require 动态加载 b.js 模块
console.log('我是 a 文件')
exports.say = function(){
    const getMes = require('./b')
    const message = getMes()
    console.log(message)
}

// a.js
exports.name = `《React进阶实践指南》`
exports.say = function (){
    console.log(666)
}
// main.js
const a = require('./a')
console.log(a)
// 打印结果
{name: '《React进阶实践指南》', say: [Function]}

<!-- 网页中引入require.js及main.js -->
<script src="js/require.js" data-main="js/main"></script>
<!-- main.js 入口文件/主模块 -->
<!-- 首先用config()指定各模块路径和引用名 -->
<script>
  require.config({
    baseUrl: 'js/lib',
    paths: {
      jquery: 'jquery.min', //实际路径为js/lib/jquery.min.js
      underscore: 'underscore.min',
    },
  });
  // 执行基本操作
  require(['jquery', 'underscore'], function ($, _) {
    // some code here
  });
</script>

// 定义math.js
define(function () {
  var basicNum = 0;
  var add = function (x, y) {
    return x + y;
  };
  return {
    add: add,
    basicNum: basicNum,
  };
});
// 定义一个依赖underscore.js的模块
define(['underscore'], function () {
  var classify = function (list) {
    _.countBy(list, function (num) {
      return num > 30 ? 'old' : 'young';
    });
  };
  return {
    classify: classify,
  };
});
 
// 引用模块，将模块放在[]内
require(['jquery', 'math'], function ($, math) {
  var sum = math.add(10, 20);
  $('#sum').html(sum);
});

define(['a', 'b', 'c', 'd', 'e', 'f'], function (a, b, c, d, e, f) {
  // 等于在最前面声明并初始化了要用到的所有模块
  if (false) {
    // 即便没用到某个模块 b，但 b 还是提前执行了
    b.foo();
  }
});

/** AMD写法 **/
define(['a', 'b', 'c', 'd', 'e', 'f'], function (a, b, c, d, e, f) {
  // 等于在最前面声明并初始化了要用到的所有模块
  a.doSomething();
  if (false) {
    // 即便没用到某个模块 b，但 b 还是提前执行了
    b.doSomething();
  }
});
 
/** CMD写法 **/
define(function (require, exports, module) {
  var a = require('./a'); //在需要时申明
  a.doSomething();
  if (false) {
    var b = require('./b');
    b.doSomething();
  }
});
 
/** sea.js **/
// 定义模块 math.js
define(function (require, exports, module) {
  var $ = require('jquery.js');
  var add = function (a, b) {
    return a + b;
  };
  exports.add = add;
});
// 加载模块
seajs.use(['math.js'], function (math) {
  var sum = math.add(1 + 2);
});

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
  return a + b;
};
export { basicNum, add };
 
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
  ele.textContent = add(99 + basicNum);
}

/** export default **/
//定义输出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
  ele.textContent = math.add(99 + math.basicNum);
}

// `export` 正常导出，`import` 导入
const name = '《React进阶实践指南》' 
const author = '我不是外星人'
export { name, author }
export const say = function (){
    console.log('hello , world')
}

// name , author , say 对应 a.js 中的  name , author , say
import { name, author, say } from './a.js'

const name = '《React进阶实践指南》'
const say = function (){
    console.log('hello , world')
}
export default {
    name,
    say
} 

import mes from './a.js'
console.log(mes) //{ name: '《React进阶实践指南》', say: Function }

export const name = '《React进阶实践指南》'
export const author = '2222'
 
export default function say (){
  console.log('hello , world')
}

// 第一种：
import theSay, { name, author as bookAuthor } from './a.js'
console.log(
    theSay,     // ƒ say() {console.log('hello , world') }
    name,       // "《React进阶实践指南》"
    bookAuthor  // "2222"
)
// 第二种：
import theSay, * as mes from './a'
console.log(
    theSay, // ƒ say() { console.log('hello , world') }
    mes // { name:'《React进阶实践指南》' , author: "2222" ，default:  ƒ say() { console.log('hello , world') } }
)