随笔分类 - JavaScript
1995年由Netscape公司的Brendan Eich最初设计的一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。
摘要：首先，在拖动 div 时，判断当前容器 div 是否有滚动条，如果没有，则禁止整个 div 拖动，例： const list_dom: any = document.querySelector(".list"); list_dom.addEventListener("touchmove",(ev)
阅读全文
摘要：history.pushState(null, null, document.URL) window.addEventListener('popstate',() => { history.pushState(null, null, document.URL) // TODO somthing },
阅读全文
摘要：官网提供的按需引入方法为全量按需引入，在打包分离中，仍旧存在使用不到的图表被打包进去。 例如：组件A使用了折线图、柱状图，组件B只用到了折线图，但是打包组件B的时候，柱状图也会被打包进去。 本文提供一种动态按需引入的思路，使得只用到折线图的组件B，打包的时候只打包折线图，不会将组件A用到的柱状图也打
阅读全文
摘要：// 处理报错 ResizeObserver loop completed with undelivered notifications. export const handlerResizeObserverError = () => { const debounce = (callback: (.
阅读全文
摘要：核心是使用v-if控制列的显隐 <template> <div> <div v-for="(item, index) in tables" :key="index"> <el-table :data="item.data" @filter-change="value => filterChange(
阅读全文
摘要：访问者模式(Visitor Pattern) 定义：使用一个访问者类，改变元素类的执行算法。通过这种方式，元素的执行算法可以随着访问者改变而改变。目的：将数据结构与数据操作分离。场景：您在朋友家做客，您是访问者，朋友接受您的访问，您通过朋友的描述，然后对朋友的描述做出一个判断，这就是访问者模式。 /
阅读全文
摘要：解释器模式(Interpreter Pattern) 定义：提供了评估语言的语法或表达式的方式。目的：对于一些固定文法构建一个解释句子的解释器。场景：编译器、运算表达式计算。 // 定义对于语法的断言 class TerminalExpression { constructor (data) { t
阅读全文
摘要：中介者模式(Mediator Pattern) 定义：用来降低多个对象和类之间的通信复杂性。目的：用一个中介对象来封装一系列的对象交互，中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。场景：MVC框架中的控制器C就是模型M和识图V的中介者。 let media
阅读全文
摘要：职责链模式(Chain of Responsibility Pattern) 定义：为请求创建了一个接收者对象的链。 目的：避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象连接成一条链，并且沿着这条链传递请求，直到有对象处理它为止。 场景：红楼梦中的"击鼓传花"。 // 采购
阅读全文
摘要：命令模式(Command Pattern) 定义：请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的合适的对象，并把该命令传给相应的对象，该对象执行命令。目的：将一个请求封装成一个对象，从而使您可以用不同的请求对客户进行参数化。场景：在一个快餐店，用户向服务员点餐。服务员将用
阅读全文
摘要：迭代器模式(Itrator Pattern) 定义：用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。目的：提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。场景：$.each() for..of。 let each = (arr, callBack) => { f
阅读全文
摘要：备忘录模式(Memento Pattern) 定义：保存一个对象的某个状态，以便在适当的时候恢复对象。目的：在不破坏封装性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。场景：数据缓存。 let getPageData = (() => { let cache = {} return
阅读全文
摘要：状态模式(State Pattern) 定义：创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。目的：允许对象在内部状态发生改变时改变它的行为，对象看起来好像修改了它的类。场景：游戏角色有跳跃、移动、射击、蹲下等状态设定，如果用if-else或者switch来进行判断，
阅读全文
摘要：观察者模式(Observer Pattern) 定义：当一个对象被修改时，则会自动通知它的依赖对象。目的：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。场景：一个对象（目标对象）的状态发生改变，所有的依赖对象（观察者对象）都将得到通知，进行广
阅读全文
摘要：模板方法模式(Template Method Pattern) 定义：一个抽象类公开定义了执行它的方法的方式/模板。它的子类可以按需要重写方法实现，但调用将以抽象类中定义的方式进行。目的：一些方法通用，却在每一个子类都重新写了这一方法。场景：在造房子的时候，地基、走线、水管都一样，只有在建筑的后期才
阅读全文
摘要：享元模式(Flyweight Pattern) 定义：减少创建对象的数量，以减少内存占用和提高性能。目的：用共享技术有效地支持大量细粒度的对象。场景：系统中有大量对象。 // 构建享元对象 class Modal { constructor (id, gender) { this.gender =
阅读全文
摘要：外观模式(Facade Pattern) 定义：隐藏系统的复杂性，并向客户端提供了一个客户端可以访问系统的接口。 目的：为子系统中的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。 场景：客户端不需要知道系统内部的复杂联系，整个系统只需提供一个"接待员"即
阅读全文
摘要：组合模式(Composite Pattern) 定义：又叫部分整体模式，是用于把一组相似的对象当作一个单一的对象。目的：将对象组合成树形结构以表示"部分-整体"的层次结构。场景：您想表示对象的部分-整体层次结构(树形结构),如：文件系统。 // 指令 let directive = { eat: {
阅读全文
摘要：桥接模式(Bridge Pattern) 定义：是用于把抽象化与实现化解耦，使得二者可以独立变化。 目的：将抽象部分与实现部分分离，使它们都可以独立的变化。 场景：实现系统可能有多个角度分类，每一种角度都可能变化。 let each = (arr, fn) => { for (let i = 0;
阅读全文
摘要：适配器模式(Adapter Pattern) 定义：将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类能一起工作。目的：主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。场景：系统需要使用现有的类，而此类的接口
阅读全文
