![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript设计模式
文章平均质量分 91
本专栏用于记录JavaScript设计模式,深入了解面向对象编程思想,提高模块化开发能力。
Sheldon一蓑烟雨任平生
目前正在学习Vue.js、React.js和微前端,并持续跟新相关博客内容
展开
-
第八章 适配器模式
第八章 适配器模式什么是适配器模式适配器的用法1)框架适配器2)参数适配器3)数据适配器总结什么是适配器模式适配器模式(Adapter):将一个类(对象)的接口(方法或者属性)转化为另一个接口,以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决。比如我们生活中的排插就是一种适配器,无论是三孔还是两孔的充电器都能够使用,还有小米8的转接头也是一种适配器,使得圆孔耳机对于type-c孔的手机能够适配使用。适配器的用法1)框架适配器如果有两个框架,比如A和jQuery,它们极度相似。我们原创 2021-05-05 01:40:44 · 245 阅读 · 2 评论 -
第七章 外观模式
第七章 外观模式什么是外观模式外观模式的作用作用1:兼容方式作用2:简化底层操作练习:使用外观模式获取不同浏览器下的css样式什么是外观模式外观模式(Facade):为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更加容易。在JavaScript中又是也会用于对底层结构兼容性做统一封装来简化用户使用。外观模式的作用作用1:兼容方式我们在进行JavaScript编程时,经常会出现兼容问题,比如时间字符串转Date类型时就会出现以下问题: function g原创 2021-05-04 21:54:31 · 447 阅读 · 0 评论 -
第六章 单例模式
第六章 单例模式什么是单例模式单例模式的作用作用1:定义命名空间作用2:区分模块小型代码库无法修改的静态变量惰性单例总结什么是单例模式单例模式(Singleton):又称单体模式,是只允许实例化一次的对象类。有时我们也用一个对象类规划一个命名空间,井井有条地管理对象上的属性和方法。单例模式的作用作用1:定义命名空间// 根据id获取元素 function get(id){ return document.getElementById(id) } // 简单样式原创 2021-05-04 02:56:14 · 513 阅读 · 2 评论 -
第五章 原型模式——JavaScript的灵魂
第五章 原型模式——JavaScript的灵魂语言中的原型原型继承实例不使用原型实现继承原型继承原型模式什么时候用原型继承谈谈“原型继承的实现不需要了解创建的过程”的理解语言中的原型JavaScript中的继承是靠原型链实现的,而原型模式就是将原型对象指向创建对象的类,使这些类共享原型对象的方法与属性,而不是对属性和方法的复制。原型继承实例不使用原型实现继承首先我们来假设一个场景:车的类型有很多,比如卡车、公交车、轿车、火车等。每种车都有不同的价格和速度以及功能。那现在就以交通工具为父类,轿车和卡原创 2021-05-03 22:40:50 · 339 阅读 · 2 评论 -
第四章 建造者模式
建造者模式什么是建造者模式创建者模式实例建造者模式和工厂模式的区别什么是建造者模式建造者模式(Builder):将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示。之前学过的工厂模式可以创建对象实例或者类簇(抽象工厂),关心的是最终创建哪种类型的类,而不关心创建的过程。但是在实际情况下,我们可能需要创建一个类,更加关注他的创建过程,比如创建一个人,我们创建的结果不仅仅是要得到人的实例,还要关注人的性别、爱好、衣着和职位等,换句话说,此时我们更加关注的是创建时类的细节。创建者模式原创 2021-04-21 00:59:15 · 135 阅读 · 0 评论 -
第三章 工厂模式
工厂模式1、简单工厂模式1.1、什么是简单工厂模式1.2、简单工厂模式的种类1.3、简单工厂模式和类的异同点2、工厂方法模式2.1、什么是工厂方法模式2.2、工厂方法模式实例2.3、练习1、简单工厂模式1.1、什么是简单工厂模式简单工厂模式,又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类对象。1.2、简单工厂模式的种类简单工厂模式1: function Boy(name){ this.sex = 'male', this.name原创 2021-04-20 22:58:17 · 198 阅读 · 0 评论 -
第二章 面向对象编程之继承
面向对象编程继承类式继承instanceof用来判定对象是否是某个类的实例类式继承的缺陷父类公有属性的引用类型会被共用无法初始化构造函数继承——创建即继承,原型无法共用组合继承——类式继承和构造函数式继承合体终极继承大法——寄生组合式继承原型式继承——封装类式继承寄生式继承——原型式继承的二次封装寄生组合式继承——终极多继承继承类式继承function SuperClass(){ this.superValue = true}SuperClass.prototype.getSuperValue原创 2021-04-19 14:24:39 · 525 阅读 · 4 评论 -
第二章 面向对象编程之封装
面向对象编程封装普通封装模拟Java中的类的权限(private、protected、public)类静态公有属性和方法闭包闭包的用处闭包一定要使用return吗一定要使用闭包吗继承多态封装首先说明封装的概念,在面向对象编程中,封装是将对象运行所需的资源封装在程序对象中——基本上,是方法和数据。封装的目的是增强安全性和简化编程,使用者不必了解具体的实现细节,而只是要通过外部接口,以特定的访问权限来使用类的成员。普通封装var Book = function(id,bookname,price){原创 2021-04-12 21:18:26 · 729 阅读 · 0 评论 -
prototype和__proto__的来历和使用
prototype和__proto__是什么以及两者的区别前言prototype的来历new运算符的缺点prototype属性的引入总结前言相信很多初学JavaScript的同学和我一样,可能听过prototype和__proto__两个属性,但是在实际的项目开发中很少或者几乎没有用到。那么这两个属性究竟是什么?学习这两个属性又有什么用处呢?prototype的来历要说明prototype属性,就需要从JavaScript的设计思想说起了。JavaScript的作者Brendan Eich在设计Ja原创 2021-04-03 16:58:48 · 679 阅读 · 0 评论 -
第一章 面向对象编程
第一章 函数的几种编写方式1.1 函数是变量1.2 用对象收编变量1.3 通过return返回的对象都是一个新的对象1.4 类说:“俺也一样”1.5 使用prototype原型减小消耗1.6 prototype原型混用导致覆盖1.7 方法的链式调用(优雅)1.1 函数是变量注意以下代码中的script部分,checkName1 和 checkName2 都是将函数保存在变量里来实现功能,通过控制台可以发现他们都是全局对象window下的一个变量,即全局变量。<!DOCTYPE html>原创 2021-03-29 00:25:34 · 352 阅读 · 0 评论