三方库方法的重写及应用场景.md

假设有我们有一个维护了多年的项目，在此期间用到了一些三方的组件库，比如elementui， ionic 或者一些其它的ui， 在做一些模态框时，通常我们会调用一些内置的方法，来实现换起弹层，但是当我们项目维护了很一段时间后，一个项目中有可能有数百处场景都用到了这个弹层，我们需要在这个弹层打开后处理一些公共的逻辑，此时，如果你手动的一个一个去写，就会出现很多弊端；

1. 场景太多，耗时多；
2. 测试起来也麻烦；
3. 假设好不容易代码改完了，测试测出了bug, 还需要每个场景都加一些统一的代码逻辑， 这种情况下，我想我们会崩溃掉了；

所以， 基上述引申出了新的解决思路，就是统一处理；

  // 三方的模态框弹层
  export class Modal {
    constructor() {
      
    }

    show() {
      console.log('show'); // 此处是三方弹层唤起弹层的逻辑处理；
    }
  }

// 重写Modal的show方法； app.component.ts
import { Modal } from 'modal'

Modal.prototype.originShow = Modal.prototype.show;

Moda.prototype.show = function(...arg){
  this.originShow(...arg);
  console.log('此处写统一的公共逻辑');
}

上述写法中，就可以解决这个问题，假设还有更高的要求，或者说，你自己想写一些库，可以用自定义事件暴露出来； 来让你的三方库扩展性更高, 那么上述的show方法重置会变成这样：

  const event = new CustomEvent('afterEvent', {
    detail: {
      a: 1,
      b: 2,  // 此处为自定义参数
    }
  });

  Modal.prototype.show = function(...arg){
    this.originShow(...arg);
    document.dispatchEvent(event)
  }

// 使用方法
// app.component.ts
document.addEventListen('afterEvent', e => {
  console.log(e.detail);  //  { a: 1, b: 2 } 
}