职责链模式（Chain of Responsibility）:解决请求的发送者与请求的接收者之间的耦合，通过职责链上的多个对象对分解请求流程，实现请求在多个对象之间的传递，直到最后一个对象完成请求的处理。 对于一个用户信息提交表单的“半成品”需求，在需求不确定时，可以将需求独立出一个个的模块对象去处理，让模块分工协作来完成整体功能，例如绑定事件是第一部分，有的是keyup，有的是change事件，第二部分是创建XHR对象进行异步请求获取数据，第三部分对适配响应数据，将接收到的数据格式化成可处理的形式，最后一部分向组件创建其中传入响应数据生成组件，将需求颗粒化，即使某一需求不确定，其他模块也可以...

策略模式(Strategy)：将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定独立性，不会随客户端变化而变化。结构上与状态模式类似，在内部封装一个对象，然后通过返回的接口对象实现对内部对象的调用，不同的是策略模式不需要管理状态、状态间没有依赖关策略之间可以相互替换、在策略对象内部保存的都是相互独立的一些算法。 //价格策略对象 var PriceStrategy = function(){ //判断结果保存在内部状态中 var stragtegy = { //每种状态作为一种独立方法保存 return30 : function(price){ return +price + ...

状态模式（State）：当一个对象的内部状态发生改变时，会导致其行为的改变，看起来像是改变了对象。当代码中的条件判断语句多而复杂，可以使用状态模式，将被一种条件作为一种状态，面对不同的判断结果，其他就是选择对象内的一种状态。 //投票结果状态对象 var ResultState = function(){ //判断结果保存在内部状态中 var State = { //每种状态作为一种独立方法保存 state0 : function(){ console.log('这是第1种情况') }, state1 : function(){ console.log('这是第2种情况') }, state2...

var Observer = (function () { //防止消息队列被暴漏而被篡改所以将消息容器作为静态私有变量保存 var __messages = {}; return { //注册信息接口 regist: function (type, fn) { //如果消息不存在则创建一个该消息类型 if (typeof __message[type] === 'undefined') { //将动作推入到该消息对应的动作执行队列中 __messages[type] = [fn]; } else { __messages[type].push(fn); } }, //发布信息接口 fire:...

观察者模式（Observer）：又被称作发布-订阅者模式或消息机制，定义了一种依赖关系，解决了主题对象与观察者之间的功能的耦合。 创建观察者对象，有一个消息容器，三个方法：订阅消息方法，取消订阅方法，发送订阅的消息方法 // 将观察者放在闭包中，当页面加载就立即执行 var Observer = (function(){ //防止消息队列被暴漏而被篡改所以将消息容器作为静态私有变量保存 var __messages = {}; return { //注册信息接口 regist :function(){}, //发布信息接口 fire : function(){}, //移除信息接口 remov...

//简单版 function debounce(fn) { let isExecuted = false; return function () { if (!isExecuted) { isExecuted = true; new Promise((resolve, reject) => { fn(); resolve(); }).then(() => { isExecuted = false; }) } } } //考虑fn带参数及fn可能有返回值情况 function debounce(fn) { let isExecuted = false; return function...

https://blog.csdn.net/mongo__/article/details/72810338https://juejin.cn/post/6844904033312833550https://www.cnblogs.com/xxcanghai/p/5189353.htmljs Foo.getName()

不同的对象在底层都表示为二进制，再js中二进制的前三位都为0的时候会被判断为object类型，null的二进制表示是全0，所以前三位也是0，执行typeof时会返回“object”。这个bug是第一版js留下来的，在这个版本，数值以32字节存储，由标志位（1~3个字节）和数值组成。

模板方法模式（Template Method）：父类中定义一组操作算法骨架，而将一些实现步骤延迟到子类中，使得子类可以不改变父类的算法结构的同时可重新定义算法中某些实现步骤。模板方法模式就是将多个模型抽象化归一，从中抽象提取出来一个最基本的模板，这个模块可作为实体对象也可以作为抽象对象，其他模块只需要继承这个模板方法，也可以拓展某些方法。假设设计一个提示框的基类，其他框类只需要在继承的基础上，拓展自己所需，日后需求变动再修改基类，其他所有的继承的子类也会统一变化。模板方法模式不仅仅在我们归一化组件使用，有时候创建页面时也很常用。模板方法的核心在于对方法的宠用，将核心方法封装在基类中，让子类继承...

享元模式（Flyweight）：运用共享技术有效地支持大量的细粒度的对象，避免对象间拥有相同内容造成多余的开销。享元模式主要对数据、方法共享分离，它将数据和方法分成内部数据、内部方法和外部数据、外部方法。内部方法和内部数据指的是相似或者共有的数据和方法，所以将这一部分提取出来减少开销，以提高性能。 例如一个新闻页面的分页效果 //创建一个享元对象 var Flyweight =function(){ //已创建的元素 var created = []; //创建一个新闻包装容器 function create(){ var dom = document.createElement('div')...

https://www.cnblogs.com/LangZ-/p/12703858.html

共同点：他们都会让元素隐藏；区别： 结构 display:none会让元素完全从渲染树中消失，渲染时不再占据任何空间，不能点击；visibilty:hidden不会让元素从渲染树上消失，渲染元素继续占据空间，只是内容不可见，不能点击；opacity:0不会让元素在渲染树中消失，渲染元素继续占据空间，只是内容不可见，可以点击；继承 display:none和opacity:0：是非继承属性，子孙节点消失由于子元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibilty:hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibilty:visible；可以让子元素...

1.减少渲染堵塞解决办法：①将script放在body后面②给script加 defer 属性（值） 2.减少head里的css资源由于css必须要放在head里（否则页面加载会出问题，比如加载完成后又进行DOM重绘），但是css太多，在head里又会阻塞页面渲染，所以我们要尽可能减少css代码量。①.对css压缩和缓存②.不要放太多图片，要是放图片可以进行优化，比如懒加载 3.http2已经席卷而来，而且其有一个强大的优势，在于对于一个域只进行一次tcp连接，使用多路复用，传输多个资源（同时加载） 4.代码优化：代码优化 ：HTML不要嵌套太多层（否则会加重页面layout的压力），css选...