JavaScript
文章平均质量分 73
安歌的博客
向内认知,向外行走
展开
-
设计模式-职责链模式
职责链模式职责链模式定义职责链模式实例小结职责链模式优点职责链模式缺点职责链模式定义职责链模式是指解决请求发送者和请求的接受者之间的耦合,通过职责链上的多个对象对分解请求流程,实现请求在多个对象之间的传递,直到最后一个对象完成请求的处理。职责链模式通过对需求的分解,把每件事情独立出一个模块对象去处理,这样完整的需求就被分解成一部分一部分相互独立的模块需求,通过这些对象的分工协作,每个对象只做与自己份内的事,无关的事传到下一个对象中去做,直到需求完成。职责链模式实例小结职责链模式优点解耦了请求原创 2021-12-13 21:36:31 · 513 阅读 · 0 评论 -
设计模式-装饰者模式
装饰者模式装饰者模式定义AOPAOP装饰函数Function.prototype.beforeFunction.prototype.afterAOP应用小结装饰者模式VS继承装饰者模式定义装饰者模式是指在不改变原对象的基础上,通过对其进行包装拓展(添加属性或方法)使原有对象可以满足客户更复杂的需求。在开发过程中,有时候想要为函数添加一些功能,最简单粗暴的方法就是直接改写该函数,但这是最差的方法,违反了开放-封闭原则。而且,很多时候我们不想去修改原函数,比如我们想给window.onload事件绑定一个原创 2021-11-16 10:00:53 · 222 阅读 · 0 评论 -
设计模式-代理模式
代理模式代理模式定义代理模式应用跨域代理图片预加载防抖代理缓存代理代理模式定义代理模式是指当两个对象之间不能直接引用时,需要通过代理对象在这两个对象间起到中介的作用。代理可以代替其本体被实例化,并且使其可被远程访问。它还可以把本体实例化推迟到真正需要的时候,对于实例化比较费时的本体,或者尺寸较大处理起来耗时的类都可以使用代理。代理模式包含虚拟代理、远程代理和保护代理。代理类型说明虚拟代理虚拟代理是指用来代替巨大对象,确保它在需要的时候才被创建。在JavaScript中应用较多。原创 2021-11-12 16:53:17 · 1140 阅读 · 0 评论 -
设计模式-适配器模式
适配器模式适配器模式定义适配器模式的应用1.异类库适配2.数据适配2.1 参数适配2.2 适配后端接口数据3.computed小结1.适配器vs外观模式适配器模式定义适配器模式的作用是解决现有接口之间不兼容的问题,通过将一个对象或者类的方法属性转化成另外一个对象或者类的方法属性,以满足客户的使用需求。例如,当我们有GDMap和BJMap两个对象var GDMap = { show:function(){console.log('渲染广州地图;');}}var BJMap = { show原创 2021-11-11 11:48:07 · 1265 阅读 · 0 评论 -
设计模式-外观模式
外观模式外观模式定义外观模式应用1. 处理兼容2. 封装多个功能,简化底层操作总结外观模式定义外观模式又称为门面模式,可以为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更为简单。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。外观模式应用1. 处理兼容2. 封装多个功能,简化底层操作总结...原创 2021-11-10 21:45:29 · 506 阅读 · 0 评论 -
设计模式-建造者模式
建造者模式建造者模式是将一个复杂对象的构建层和其表示层相互分离,同样的构建过程可采用不同的表示。建造者模式&工厂模式工厂模式主要是为了创建对象实例或者类簇(抽象工厂),关心的是最终创建的结果而不关心创建的过程。所以通过工厂模式可以得到对象的实例或者类簇。然而建造者模式在创建对象时更多的是关心这个对象创建的整个过程,甚至于创建对象的每一个细节。参考链接:一篇文章就彻底弄懂建造者模式(Builder Pattern)《JavaScript设计模式》...原创 2021-11-10 16:08:16 · 78 阅读 · 0 评论 -
设计模式-原型模式
原型模式原型模式原型优势原型模式原型模式是指用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性和方法。在创建基类时,对于每次创建的一些简单且差异化的属性放在构造函数中,将一些消耗资源比较大的方法放在基类原型中,这样可以避免子类继承时每次初始化都要做一些重复性的东西,消耗性能。function Foo(){ this.a = 10;}Foo.prototype.render = function(){...};let f1 = new Foo();let f2 =原创 2021-11-10 11:21:28 · 225 阅读 · 0 评论 -
设计模式——单例模式
单例模式单例模式的定义定义单例模式基本结构单例模式的实现优雅的单例模式惰性单例模式单例模式的应用命名空间管理代码库的模块创建静态变量单例模式的优缺点单例模式的定义定义单例模式又称为单体模式,是只允许实例化一次的对象类。单例模式基本结构从广义的定义来说,单例模式只是一个用来划分命名空间并将一系列相关方法和属性组织在一起的对象,并且只能实例化一次。最简单的单例就是一个对象字面量。var single = { name:'Yimi', getName() {return this.name原创 2021-11-09 17:00:19 · 452 阅读 · 0 评论 -
设计模式-工厂模式
工厂模式简单工厂模式工厂方法模式抽象工厂模式抽象类抽象工厂模式简单工厂模式简单工厂模式:又叫静态工厂模式,由一个工厂对象决定创建某一种产品对象的实例。主要用来创建同一类对象。举个例子,比如书店里有各类书籍及其相关介绍等。当你要选择其中一类书籍时你只需要问书店老板,他会向你提供你所需要的,你只需要记住BookFactory这个工厂类即可。var StoryBook = function() { this.intro = "这是一本故事书。";}StoryBook.prototype =原创 2021-10-26 22:00:09 · 222 阅读 · 0 评论 -
手机端调试H5——vConsole
在开发H5中当需要调试页面时,我们可以利用pc端的控制台来进行页面调试,但有时候我们还需要在手机端进行调试,那么此时我们就需要使用到一些手机前端开发调试利器,可以方便我们在手机前端页面看到log日志,vconsole就是这样一个工具。vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。vconsole使用起来也比较方便,你可以通过npm或者cdn等方式引入,然后初始化vcon...原创 2019-09-11 15:12:19 · 843 阅读 · 0 评论 -
DOMContentLoaded
DOMContentLoaded简介1、概念MDN解析:当初始HTML文档已完全加载和解析时,将触发DOMContentLoaded事件,而不需要等待样式表,图像和子框架页面加载(事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。2、HTML解析过程与DOMContentLoaded触发时机1) 既无js也无css的情况下,HTML文档的解析过程:由图可见...原创 2019-01-28 10:22:26 · 20204 阅读 · 5 评论 -
JS获取元素样式之style、currentStyle、getComputedStyle
在js中获取元素的样式属性大多都是用ele.style.attr这种方式,但是这种方式是有局限性的,该方法只能获取到行内样式,获取不了外部样式。 如果要想获取元素的外部样式,可以选用currentStyle属性和getComputedStyle属性,但这两个属性不能设置样式,只能获取样式,而且这两个属性有其兼容性,具体来说: currentStyle属性 用法:ele.currentStyl...原创 2018-09-07 12:25:14 · 4244 阅读 · 0 评论 -
浅复制与深复制
浅复制举个复制代码的例子:function clone(p,s) { var s = s || {}; for (var prop in p) { s[prop] = p[prop]; } return s;}var a = {name: ’Chen‘,age: '12', hobby: {1: 'running', 2: 'swimming'}};var ...原创 2018-09-06 10:35:47 · 237 阅读 · 0 评论 -
JS继承之寄生继承
JavaScript继承还有一种继承模式——寄生继承。 举个例子:function object(o) { function F() {}; F.prototype = o; return new F();}var twoD = { name: '2D shape', dimensions: 2}function triangle(s, h) { var th...原创 2018-09-05 16:58:57 · 2815 阅读 · 0 评论 -
JS继承之原型继承
在继承时,出于效率的考虑,我们会尽可能地将一些可重用的属性和方法添加到原型中去,如果如此,我们就可以仅依靠原型就完成继承关系的构建。function Shape() {} Shape.prototype.name = 'shape'; Shape.prototype.toString = function() {return this.name;};function TwoDShape...原创 2018-09-05 16:55:47 · 309 阅读 · 0 评论 -
JS继承之组合继承
前面介绍了原型链继承以及构造函数继承,它们都有各自的优缺点 特点 优点 缺点 原型链继承 子类原型prototype对父类实例化来实现 子类不仅仅可以访问父类原型上的属性和方法,同样也可以访问从父类构造函数中复制的属性和方法 1.一个子类原型更改子类原型从父类继承来的引用类型属性就会直接影响其他子类;2.由于子...原创 2018-09-05 16:39:17 · 2832 阅读 · 0 评论 -
JS继承之构造函数继承
构造函数继承的精华是子类中SuperClass.call(this)语句了function Shape(id) { this.name = 'shape'; this.id = id; this.toString = function() {return this.name;};} Shape.prototype.showName = function() {return...原创 2018-09-05 16:23:26 · 2926 阅读 · 0 评论 -
JS继承之原型链继承
原型链是ECMAScript标准指定的默认继承方式。function Shape() {} Shape.prototype.name = 'shape'; Shape.prototype.toString = function() {return this.name;};function TwoDShape() {}TwoDShape.prototype = new Shape(...原创 2018-09-05 16:20:39 · 344 阅读 · 0 评论 -
js判断是否是数组的方法
1.instanceof var arr = [1,2,3];arr instanceof Array要注意,instanceof Array 只适用于与数组初始化在相同上下文中才有效,且不能跨iframe 2.Array.isArray() Array.isArray([1,2,3]);3.constructor constructor 在其对应对象的原型下面,是自...原创 2018-09-11 17:11:52 · 13921 阅读 · 0 评论