codingmeup

--- 观察者模式-设计模式 --- 观察者模式 ===== [第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/25) 观察者模式又不同于发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。 使用观察者模式的好处： 1. 支持简单的广播通信，自动通知所有已经订阅过的对象。 1. 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。 1. 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。 ### 代码 ````js var observer = { //订阅 addSubscriber: function (callback) { this.subscribers[this.subscribers.length] =...

--- 原型模式-设计模式 --- 语言之魂--原型模式（Prototype） === 用原型实例指向创建对象的类，使用于创建新的对象的类共享原型对象的属性以及方法。 场景：创建复杂的对象时，对于那些需求一直在变化而导致对象结构不停地改变时，将那些比较稳定的属性与方法共用而提取的继承实现。 ````js var LoopImages=function(imgArr,container){ this.images=imgArr; this.container=container; } LoopImages.prototype={ createImage : function(){ console.log('create'); }, changeImage : function(){ console.log('changeImage'); } } var SlideLoopImg=function(imgArr,container){ LoopImages.call(this,imgArr,container); //private this.arrow='private';...

--- 代理模式-设计模式 --- 代理模式 Proxy ========== 一个对象不能直接引用另一个对象，所以需要通过代理对象在这两个对象之间起到中介的作用。  ### 案例分析 假如ABC要送酸奶小妹玫瑰花，却不知道她的联系方式或者不好意思，想委托C去送这些玫瑰. ````js // 先声明美女对象 var girl = function (name) { this.name = name; }; // 这是ABC var abc =...

--- 简单工厂模式-设计模式 --- 简单工厂模式（Simple Factory） === 由一个工厂对象决定创建出哪一种产品类的实例. 专门定义一个类来负责创建其他类的实例，被创建的实例常常具有共同的父类.  ### 场景 创建单一的对象 *** ````js //alert var LoginAlert=(function(){ class LoginAlert { constructor(text) { this.text = text; }; show(){ //do console.log(this.text);...

--- 单例模式（Singleton）-设计模式 --- 单例模式（Singleton） === 只允许实例化一次的对象类 ````js //全名空间的方式 var Tool={ Ajax:{ get:function(){}, post:function(){} }, Util:{ method1:function(){} } } ```` ````js //惰性 var LazySingle=(function(){ var _instance=null; function Single(){ //公共方法与属性 return {...

--- 状态模式-设计模式 --- 状态模式 ==== 当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象 ### 最简单的状态对象的实现 当我们发现我们的代码有很多的if时，可以考虑 ````js function showResult(result){ if(result === 0){ consol.log(0); }else if(result === 1){ consol.log(1); }else if(result === 2){ consol.log(2); }else if(result === 3){...

--- 策划模式-设计模式 --- 策划模式 ==== 将定义的一组算法封装起来，使其相互之间可以替换。封装的算法具有一定的独立性，不会随客户端变化而变化。 ###代码 折扣 ````js var PriceStrategy=function(){ var Strategy ={ return30:function(price){ return +price + parseInt(price / 100)*30; }, return50:function(price){ return +price + parseInt(price / 100)*50; },...

--- 节流模式与去抖-设计模式 --- 节流模式与去抖 === 对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。 ### throttler 1. 鼠标移动，mousemove 事件 1. DOM 元素动态定位，window对象的resize和scroll 事件 ### debounce 1. 文本输入keydown 事件，keyup 事件，例如做autocomplete ### throttler&& debounce ````js /* * 频率控制 返回函数连续调用时，fn 执行频率限定为每多少时间执行一次...

### Worker线程数据通讯方式 Worker 与其主页面之间的通信是通过 onmessage 事件和 postMessage() 方法实现的。 在主页面与 Worker 之间传递的数据是通过拷贝，而不是共享来完成的。传递给 Worker 的对象需要经过序列化，接下来在另一端还需要反序列化。页面与 Worker 不会共享同一个实例，最终的结果就是在每次通信结束时生成了数据的一个副本。 也就是说，Worker 与其主页面之间只能单纯的传递数据，不能传递复杂的引用类型：如通过构造函数创建的对象等。并且，传递的数据也是经过拷贝生成的一个副本，在一端对数据进行修改不会影响另一端。 ```js var myTask = ` onmessage = function (e) { var data =...

### Worker上下文 Worker执行的上下文，与主页面执行时的上下文并不相同，**最顶层的对象并不是window**，而是个一个叫做**WorkerGlobalScope**的东东，所以**无法访问window、以及与window相关的DOM API，但是可以与setTimeout、setInterval等协作**。 WorkerGlobalScope作用域下的常用属性、方法如下： 1、self 我们可以使用 WorkerGlobalScope 的 self 属性来或者这个对象本身的引用 2、location 　　location 属性返回当线程被创建出来的时候与之关联的 WorkerLocation 对象，它表示用于初始化这个工作线程的脚步资源的绝对 URL，即使页面被多次重定向后，这个 URL 资源位置也不会改变。 3、close 　　关闭当前线程 4、importScripts 　　我们可以通过importScripts()方法通过url在worker中加载库函数 5、XMLHttpRequest 　　有了它，才能发出Ajax请求 6、setTimeout/setInterval以及addEventListener/postMessage Worker 中提供了 WorkerNavigator 和...