模块化

  1. 模块内部有独立的命名空间
  2. 简单划分：变量污染
  3. 自执行函数，不够灵活
  4. 独立命名空间，引用非常复杂 ```javascript //设置script的type为module

//引用 模块 import ‘./a.js’; //引入a模块 import {fn} from ‘./a.js’ //引入a模块里边的fn函数

//导出 export let a=10; //导出a=10; export {fn} //导出fn函数 //导出和导入变量名称要对应

export default obj; //导出当前页面boj对象 //obj对应的是export default 导出的内容，{}是export里导出的内容

//通配符接收所有export和export default的内容 inmort* as obj from’./a.js’ //接收a模块里所有的

//懒加载模块 document.querySelector(‘button’).onclick = function(){ //点击按钮再加载模块 import(‘./b.js’).then(res=>{ console.log(res); //提供一个import函数，按需加载 }) }

  1. <a name="bBiDb"></a>
  2. ## 异步以及回调
  4. 1. js是单线程，同一时刻只干一件事
  5. 2. 同步任务依次执行，异步任务不按顺序
  7. <a name="cNw1P"></a>
  8. ### 回调地狱
  10. 1. 回调函数出现层层嵌套
  11. 2. 可读性差，可维护性差
  12. 3. 如果有错误，没发定位及捕捉
  13. 4. 解决回调地狱的问题 1.观察者模式 2，promise
  14. <a name="FpIOT"></a>
  15. ## 观察者模式
  16. ```javascript
  17. //两个对象之间，一个对象改变会自动通知给另一个对象，可以是一对多的关系
  18.         let btn = document.querySelector("button");
  19.         let obj = {
  20.             name:"我是obj",
  21.             fn(){
  22.                 console.log("fn");
  23.             }
  24.         }
  25.         let obj2 = {
  26.             fn2(){
  27.                 console.log("fn2");
  28.             }
  29.         }
  30.         btn.addEventListener("click",obj.fn);
  32.         btn.addEventListener("click",obj2.fn2);
  33. //点击时，同时响应fn fn2
  1.  // 改造成类 
  2.         // 和自定义事件有关的内容 都在这个类里；
  3.         class MyEvent {
  4.             constructor() {
  5.                 this.eventObj = {};
  6.             }
  7.             addEvent(eventName, fn) {
  8.                 // 把多个事件名称 和多个事件函数 保存起来
  9.                 // 第一次绑定的时候 把 事件名初始化成一个数组
  10.                 if (typeof this.eventObj[eventName] === "undefined") {
  11.                     this.eventObj[eventName] = [];
  12.                 }
  13.                 // 保存事件 
  14.                 this.eventObj[eventName].push(fn);
  15.             }
  16.             trigger(eventName) {
  17.                 // 把之前保存的函数 取出来执行就可以了
  18.                 if (typeof this.eventObj[eventName] !== "undefined") {
  19.                     this.eventObj[eventName].forEach(fn => {
  20.                         fn();
  21.                     })
  22.                 } else {
  23.                     throw Error("参数传递错误");
  24.                 }
  25.             }
  26.         }
  28.         let myevent = new MyEvent();
  29.         // 绑定添加事件
  30.         myevent.addEvent("myevent",function(){
  31.             console.log(1111);
  32.         })
  34.         myevent.addEvent("myevent",function(){
  35.             console.log(2222);
  36.         })
  39.         // 触发事件
  40.         setTimeout(() => {
  41.             myevent.trigger("myevent"); 
  42.         }, 2000);