js中的模块化

为什么要用js模块化
随着前端的发展，web技术日趋成熟。项目用的js文件也就越来越多，代码量越来越多。之前一个项目可能一个页面只有一个js，但是随着js逐渐拆分，有两个问题需要我们解决。

1.变量名的冲突
2.引入关系:多个文件之间存在依赖关系，需要保证加载顺序的准确。

模块化：

类似于积木，模块化就是将大文件拆分成小单元的一种方式。

优点：

  1.提高代码的复用性
  2.提高代码的可维护性
  3.按需加载

模块化的解决方案：
1.闭包+自执行函数

  格式
    const 模块名 = (function(){
      return {
        //暴露的值
      }
    })(引入的模块)

实例
a.js

const modelA = (function () {
  //这个js文件是用于处理 拖拽的 
  let a = 1;
  let aStr = "a文件";
  let flag = true;
  return {
    a,
    aStr
  }
})()

b.js

//这个js文件是用于处理 轮播图的
const modelB = (function(modelA){

  let b = modelA.aStr + 2;
  let a = "b文件"
  return {a,b}
})(modelA)

c.js

//这个js文件是用于处理 日期格式的

const modelC = (function(){
  let c = b + 3;
  return {c};
})()

index.js

//这个js文件是 index.html页面的主逻辑
console.log("index:a="+a);
console.log("index:b="+b);
console.log("index:c="+c);

index.html

  <script src="js/a.js"></script>
  <script src="js/b.js"></script>
  <!-- <script src="js/c.js"></script> -->
  <!-- <script src="js/index.js"></script> -->
  <script>
    console.log(modelA.a);
    console.log(modelB.a);
    console.log(modelB.b);
  </script>

ES6模块化
用什么方式来暴露数据 ： export
用什么方式来导入数据 ： import

在服务器端运行HTML文件，在script标签中添加【type=‘module’】来表示该js文件是一个模块。

在模块中，如果要导出变量，则使用

  export let 变量名 = 变量值

这个方式可以导出多次，或者将多个变量一起导出

 export {
   变量1，变量2
 }

导入和导出时，变量名必须保持一致。
要修改变量名的话，则 import {原变量名 as 现变量名}
【原变量名一定要与导出时的变量名一致！！！】

实例
a.js

// export let myName = "wyz";
// export let myAge = 20;

let myName = "wyz";
let myAge = 20;
// export {
//   myName,
//   myAge
// }

export default {
  myName,
  myAge
}

b.js

//使用a中的myName
// import { myName as name,myAge } from "./a.js";


//默认导出
import obj from "./a.js";

console.log(obj.myName);
console.log(obj.myAge);
// console.log(myName);
// console.log(myAge);

index.html 引用模板

  <script src="js/a.js" type="module"></script>
  <script src="js/b.js" type="module"></script>