模块化的使用

第一种：直接使用js实现

　　在index1.js中的代码：

var moduleA = (function () {
  // 导出的对象
  var obj = {}

  function sum(num1, num2) {
    return num1 + num2
  }

  var flag = true

  if (flag) {
    console.log(sum(10, 20));
  }


  obj.flag = flag;
  obj.sum = sum;

  return obj
})()

　　在index2.js中的代码：

var moduleB = (function () {
  var obj = {}


  var flag = false

  console.log(name);

  obj.flag = flag

  return obj
})()

　　如果你想在index3.js文件中想使用index1.js中的flag变量和sum函数：

(function () {
  // 1.想使用flag
  if (moduleA.flag) {
    console.log('小明是天才, 哈哈哈');
  }

  // 2.使用sum函数
  console.log(moduleA.sum(40, 50));
})()

　　如果你想在index3.js文件中想使用index2.js中的flag变量：

(function () {
  console.log(moduleB.flag);
})()

第二种：使用ES模块化的导入导出

　　1、简单的使用

　　首先先在index.html中引用的js文件加上：type="module"，

<script src="index1.js" type="module"></script>
<script src="index3.js" type="module"></script>

　　然后把index1.js中的代码导出：　　

   function sum(num1, num2) {
    return num1 + num2
  }

  var flag = true

  if (flag) {
    console.log(sum(10, 20));
  }
export{
  flag,sum      
}

然后在你想在index3.js使用index1.js中的变量或者方法时，则需要把它导入

import {flag, sum} from "./index1.js";

 注意：如果导入的时候数据太多可以使用 * 通配符

import * as str '引用js'  //str可以自定义命名

console.log(str.导出的方法或变量)