关于模块化的理解和规范

• 模块化的理解？

  • 把相同功能的封装为一个模块，提供向外的接口，以供使用，使得开发的时候，彼此互不影响！

• ESModule

  • es6模块化规范
  • 采用的是
  • import 导入
  • export 导出

• 特点：

  • 1：一个文件为一个模块，每一个模块只会加载一次，即使多次调用，还是加载一次，多次引入的时候，是从内存中获取
  • 2：导出和导入
    • import导入 import
    • export导出 export defalut {}
  • 3：import为静态的导入

• 导出

  let a = 10;
  let b = 20;

  function add(a, b) {
    return a + b;
  }
  let c = 30;

  function sub(a, b) {
    return a - b;
  }

  export {
    a,
    b,
    c,
    add
  }
  let d = 100;
  let e = 22;

  export default {
    d,
    e
  }; //注意点：就是export default 导出的只能是一个变量或者对象等等！

• 导入
• import XXX form “路径” => 这是对应 export let XXX 的格式

• import { } form “路径” => 这是对应 export {} 的格式
• import XX from “路径” => 这是对应 export default {} 的格式
• 注意点：就是export 导入的必须按照导出的名称来接受，如果重名了，那么使用 as 来修改别名
  • eg: import { d as dd} from "路径" 当d变量重名的时候，就把个导出为dd

import {
  a,
  b,
  c,
  add
} from "./js/01.es6的导入和导出.js";

• AMD

  • sea.js

• CMD

  • require.js

• commom.js

  • node语言的模块化规范

• 导出

var flag = true;
function getSum(num, num2) {
  return num + num2;
}
if (flag) {
  console.log('小明');
}
//这是common.js方式 导出 对象
module.exports = {
  flag,
  getSum
}

• 导入
  • 语法：let {flag,getSum} = require 路径"

//这是commom.js导入的语法
let aaa = require('./aaa');  // 从 aaa文件导入
let flag = aaa.flag;
let getSum = aaa.getSum;
// getSum(2, 90);
console.log(getSum(2, 90));