mosaic&Bernie

今日，项目程序出现异常，后发现跟冒泡事件有关，利用此机会探索一下利用Javascript捕获和冒泡事件。一、要探究捕获和冒泡事件，首先要知道什么是事件的捕获和冒泡，所以呢，先从概念入手；事件的冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象

一、原理：缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前的一致，则可以直接返回前面存储的运算结果，提供效率以及节省开销。二、实例：var mult = function(){ console.log('开始计算乘机'); var a = 1; for(var i = 0, l = arguments.length;i < l;...

一、策略模式：定义一系列的算法，把它们一个个封装起来，并且使之可以相互替换。二、实例：var S = function( salary ){ return salary * 4;};var A = function( salary ){ return salary * 3;};var B = function( salary ){ return salary *...

一、适配器模式：是为了解决软件实体间的接口不兼容的问题。适配器的别名是包装器（wrapper）；二、首先，假设我们已经有如下代码：var googleMap = { show: function(){ console.log( '开始渲染谷歌地图' ); }};var baiduMap = { show: function(){ conso...

一、状态模式定义：允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。二、状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。三、如下有一个比较好的实例，代码如下：var delegate = function(client, delegation){ return{ buttonWasPressed: function(...

一、职责链的定义：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。二、实例场景说明：某公司对公司产品-手机进行促销活动，有以下政策：在正式购买时，已经支付过500元定金的用户会收到100元的商城优惠卷，交200元定金的用户可以收到50元的优惠卷，而之前没有支付定金的用户只能进入普通购买模式，也就是没有优...

一、享元模式是一种用于性能优化的模式，主要优化方式为，若系统中因为创建了大量类似的对象而导致内存占用过高，则可以考虑使用享元模式实现。二、实例说明：如果在浏览器中上传文件，若使用常规写法， 每上传一个文件，就会创建一个实例对象；如果上传2000个文件，那就有2000个对象，浏览器很可能出现假死状态。这种情况下，我们考虑适应享元模式。三、实例：var Upload = function( uploa...

一、前提介绍：某些函数是用户主动调用的，但因为一些客观的原因，这些函数会严重影响页面的性能。二、应用场景：在短时间内往页面中大量添加DOM节点显然会让浏览器吃不消，往往会导致浏览器的卡顿甚至假死。三、解决方案：以上述添加节点的例子来说明问题，我们将创建节点的工作分批进行，比如把1秒钟创建1000个节点，改为每隔200毫秒创建8个节点。四、实现代码如下：var timeChunk = functio...

一、模板方法模式：一种只需使用继承就可以实现的非常简单的模式。二、模板方法模式由两部分组成，第一部分是抽象父类，第二部分是具体的实现子类。三、以设计模式中的Coffee or Tea来说明模板方法模式：1、模板Brverage，代码如下：var Beverage = function(){};Beverage.prototype.boilWater = function(){ consol...

var CreateDiv = function(html){ this.html = html; this.init();};CreateDiv.prototype = function(){ var div = document.createElement( 'div' ); div.innerHTML = this.html; document.body....

一、单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。二、单例模式实现原理：用一个变量来标识当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象。三、实现代码如下：var SingleTon = function(name){ //创建一个对象 this.name = name; this.instance = null;};...

这两个方法不经常用，但是在某些特殊场合中是非常有用的，下面主要说下它们的区别：1、首先，JavaScript是一门面向对象的语言，也就是说它有this的概念。而且JavaScript是一门动态类型语言，为什么说它是动态类型语言呢？因为JavaScript在编译时没有类型检查的过程，不会去检查创建的对象类型，也不会去检查传递的参数类型，所以它的变量类型在运行期间是可以改变的。2、要知道call和ap...

1、发布/订阅模式也是诸多设计模式当中的一种；2、这种方式可以在es5下相当优雅地处理异步操作；3、什么是发布/订阅呢？我们举个栗子：假设fn1，fn2，fn3都可以视作一个事件的发布者，执行它，就会发布一个事件。这个时候，我们可以通过一个事件的订阅者去批量订阅并处理这些事件，包括它们的先后顺序。增加一个消息订阅者的方法：class AsyncFunArr { constructor (......