简介模板方法模式：定义一个操作中的算法骨骼，而将算法的一些步骤延迟到子类中去，使得子类可以不改变整体算法结构的情况下重新定义该算法的某些特定步骤。简单点来说就是将重要的步骤顺序的处理交由父类来做，然后父类是一个抽象的类，它申明了每个步骤的抽象，由子类去进行每个步骤的具体实现。这样父类定好了一个整体的骨骼，具体步骤实现交给子类，每当需要改动时只需要更换不同的子类就可以了，符合开闭原则。代码实现//抽象父类 abstract class A { //抽象方法 public abstract step1(): void; //抽象方法 public abstract step...
简介代理模式指：由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时，访问对象不适合或者不能直接引用目标对象，代理对象作为访问对象和目标对象之间的中介。更直白的说，代理模式更注重的是对源对象的控制访问（中介和保护），虽然我们可以在代理对象上扩展源对象没有的属性，但是如果要增强原有的功能其实还需要和其他模式进行组合使用，比如装饰器模式。角色：抽象角色：用于源对象与代理对象的依赖抽象源对象：真实的业务对象，是代理类所要代表的真实对象代理类：通过抽象角色规范，提供与源对象相同的接口，内部含有对源对象的引用，通过它可以进行扩展和控制代码实现//抽象 interface AInterfa...
[hide]先用yum 安装一次node先升级yum update 提示下载程序，回复y安装nodeyum install nodejsyum安装的node一般都不是最新的，所以我们还需要升级node的版本npm i n -g全局安装一个n插件n lts表示安装最新的稳定版！一些常用命令n ls查看已安装的node版本n rm 16.0.3删除16.0.3版本更多功能阅读插件文档：n等待安装完毕后，此时其实版本已经安装好了，但是输入node -v还是低版本，是因为centos的用户缓存问题。我们退出登录再登录就会刷新缓存了，此时的node -v输出的就是最新版本exit 退...
vue cli中的处理vue cli有一个transpileDependencies配置项，在里面添加的路径，将会被babel转义。vue.config.jsmodule.exports = { transpileDependencies: [ /[/\\]node_modules[/\\](.+?)?vue-i18n(.*)[/\\]dist/, ] }官方文档：transpileDependencies[](https://cli.vuejs.org/zh/config/#transpiledependencies)webpack的配置webpack直接找到babel...
简介享元模式是运用共享技术来有效地支持大量细粒度对象的复用。它通过共享已经存在的对象来大幅度减少需要创建的对象数量、避免大量相似类的开销，从而提高系统资源的利用率。举个例子：我们有一个服装工厂，它有男装和女装衣服各100套，为了销售，需要模特来帮忙拍照做成广告照片，正常情况下我们可能会这么写。class Model { private gender: string; //性别 private clothes: number; //衣服 constructor(gender: string, clothes: number) { this.gender = gende...
简介外观模式：是一种通过为多个复杂的子系统提供一个一致的接口，而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口，外部应用程序不用关心内部子系统的具体细节，这样会大大降低应用程序的复杂度，提高了程序的可维护性。其实就是一种封装，把一系列的操作封装成简单的接口供客户端去调用。但是不能滥用，因为本身就是为了减少客户端与各个依赖的耦合性，将一堆依赖改为依赖一个外观类。外观模式遵循的是迪米特法则，也就是最少知道原则，但是如果新增新的功能，可能会改动到外观类，所以它违背了开闭原则。它常常应用于SKD，开源类库这些，用于给外部提供精简的接口。而我们js，可能并不需要去创建一个类，直接整个函...
简介组合模式它本身是一种树形结构模式，可以将其理解为一棵树，其中树为根节点，然后有树枝和树叶，树枝不断的分叉，树枝上也会有树叶。我们看个图：它是一种将对象组合成树状的层次结构的模式，用来表示“整体-部分”的关系，使用户对单个对象和组合对象具有一致的访问性。其实说人话就是，我定义了一个接口，它有一个show方法，然后所有的对象都得实现，然后对象之间可以嵌套，因为嵌套了，所以当我调用show方法的时候，这个对象必须去遍历自己的子级嵌套对象的show方法，不断的重复，最终得到结果之和。类似于一个递归函数，只不过具体的处理都在每个对象自身show方法中去实现。组合模式常常用在：购物车、节点统计购...
简介在软件开发过程中，有时想用一些现存的组件。这些组件可能只是完成了一些核心功能。但在不改变其结构的情况下，可以动态地扩展其功能。所有这些都可以釆用装饰器模式来实现。装饰器模式指：在不改变现有对象结构的情况下，动态的给对象增加一些职责（功能）的一种模式。这种模式也是防止滥用继承，相对于桥接模式只能桥接两个维度，装饰器模式是可以对接多个维度的，因为他可以嵌套使用。我们举个例子：我有一个食物类：class 煎饼我单点煎饼这个食物是可以的，我也可以加不同的配料：鸡蛋、火腿、豆皮于是乎我们通过继承得到：class 鸡蛋煎饼 extends 煎饼class 火腿煎饼 extends 煎饼class...
简介桥接模式是指：将抽象与实现分离，使它们可以独立变化。它使用组合关系来代替继承关系来实现，从而降低了抽象和实现这两个可变维度的耦合度。简单点来说，桥接模式用就是用于连接两个独立变化维度的一种方式（组合），而为什么要连接，我们需要先了解到类继承带来的复杂性。先看一张图：我们可以看到，从最顶层的电脑类延伸了三个子类，子类又延伸出不同的品牌类，如果我们又新增了一个新的电脑子类，比如二合一电脑，又不得不重复实现一下对应的品牌子类；如果是新增新的品牌，也是同理，也得产生很多新的子类。这就导致类的不断产生，从而有了类爆炸这一说。而桥接模式，就是用于解决这个问题的，我们将他们进行抽象，你会发现有两个...
简介适配器模式是将某个类的接口转换成客户端期望的另一个接口表示，主要目的是兼容性，让原本因接口不匹配不能一起工作的两个类可以协同工作。举个简单的例子：我们的插排提供的是220v的电压，而我们的手机能支持的是5v电压，此时它们之间是无法协同工作的，所以我们出现了电源适配器（手机充电器），电源适配器将220v转为了5v电压供手机使用。而适配器模式有三类：类适配器模式、对象适配器模式、接口适配器模式。类适配器模式适配器模式中有三种主要角色：被适配者（src），适配器（adapter），目标的实现接口（dst）；目标的实现接口，以上面电源适配器的例子来说，手机要求的是一个5v的电压，这个要求就可...
简介建造者模式指将一个复杂对象的构造过程与表示分离，使同样的构建过程可以创建不同的表示。它将变与不变相分离，即产品的整体组成不变，但是每一个部分是可以灵活变动的。“表示”指的就是实际生成的实例对象，相同的构造过程可以创建不同的表示，这里我们需要先了解一下构造者模式中的3个角色。角色：指挥者：调用具体建造者来创建复杂对象的各个部分，它只处理创建的过程建造者：提供各个部件的具体创建方法，在完成后提供产品的实例。产品：要创建的复杂对象指挥者指挥建造者去建造产品，同一个指挥者指挥不同的建造者，可以产生不同的产品，而指挥者也是可以替换的，不同的指挥者指挥同一个建造者，也可以产生不同的产品。但是最终...
简介记录一个精简字符的方式。利用字蛛做一些字体精简，本方式是针对英文精简，中文字体可以自行延展处理。字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。安装字蛛github：font-spidernpm install font-spider -g注意全局安装，省事，当然也可以局部，个人选择。配置安装完毕后我们需要新建一个html文件，这个文件里面需要配置一个自定义字体css，一个div，用于显示你需要精简的字体。注意，被精简的字体文件必须是ttf格式。创建一个index.html文件<!DOCTYPE html> <ht...
简介原型模式指的是：用一个已经创建的实例作为原型，通过复制该原型对象来创建一个和原型相同或者相似的新对象。这个原型不同于js中的prototype，它指的是被克隆的对象。在java中克隆可以通过Object父类中的clone方法实现，但是在前端中，是没有这种方式的，我们需要通过其他方法实现克隆。克隆又分浅克隆和深克隆，因为引用类型的存在，浅克隆对引用类型只会克隆该类型的内存地址，而深克隆则会完全复制一份引用类型对象，达到完全克隆。原型模式也是用于创建一个对象，而这个对象可能非常复杂，为了减少消耗的资源，更高效的生成对象。反例假设我们现在有这么一段代码：const run = { a:...
简介工厂模式是讲需要实例化的代码提取出来，放到一个专门的类中去做管理和维护，达到和主体代码的解耦，从而提高项目的扩展性和维护性。将创建实例与调用实例进行解耦！简单来说就是把new操作（创建实例）放到一个专门的地方统一管理，而不是在代码中耦合使用，方便管理和扩展。工厂模式有三种用法：简单工厂模式、工厂方法模式、抽象工厂模式简单工厂模式简单工厂模式是指由一个工厂对象决定创建出哪一种产品类的实例。比如我们需要建一个饭店，这个饭店需要招三名厨师，他们要有各自的拿手菜：水煮牛肉、青椒炒蛋、炒米粉。为了能方便的招聘厨师，我定了一个要求，厨师必须会：开火、颠勺、关火、出菜于是我写了一个接口来要求这些厨...
简介所谓的的单例设计模式，就是采取一定的方法保证整个软件系统中，对某个类只能存在一个对象实例，并且该类只提供一个取得其对象实例的方法（静态方法）。以前端中vuex为例，它在整个vue的系统中，获取到的就是一个全局唯一的对象实例。由于vuex本身就是一个重量级的功能，且一个项目通常只需要一个vuex状态管理就够了，所以采用的单例模式。单例模式在java中有八种方法：饿汉式（静态常量）饿汉式（静态代码块）懒汉式 （线程不安全）懒汉式 （线程安全，同步方法）懒汉式 （线程安全，同步代码块）双重检查静态内部类枚举但是前端中其实好多方法就做不到，因为js是单线程的，且并不是强类型语言，所以其中：双...
概述设计模式是程序员在面对同类软件工程所遇到的问题总结出来的有用的经验，模式不是代码，而是某类问题的通用解决方案，设计模式代表了最佳的实践。这些解决方案是众多开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式本质是为了提供：软件的维护性，通用性和扩展性，并降低软件的复杂度设计模式参考书：《Design Patterns - Elements of Reusable Object-Oriented Software》（设计模式 - 可复用的面向对象软件元素），书中共总结了23种设计模式，被广泛的认同。设计模式是针对面向对象语言的，但不局限与某一种面向对象的语言。分类设计模式可以分...
安装vue2版需要安装8.x版本的，9.x的是vue3版本使用上大同小异。vue2安装：yarn add vue-i18n@8vue3安装：yarn add vue-i18n封装官方虽然支持很不错的用法，但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
设计原则在软件开发中，为了提供软件系统的：可维护性、可复用性、增加软件的可扩展性和灵活性，程序员尽量根据7条原则来开发程序，从而提高软件开发效率、节约软件开发成本和维护成本。设计原则最初只有5条，单一功能、开闭原则、里氏替换、接口隔离以及依赖反转，后来又进行了增强，目前详细版的有7个原则，很多书都只有6个原则。目前共有23种设计模式。设计模式最初都是应用于强类型语言，所有很多例子都是java这种例子，所以，类，抽象，这些在后面的文章中会频繁出现。希望你有一些心理准备。开闭原则开闭原则是设计中最为重要的一个设计原则，它是所有原则的基础，所有的设计原则全部都是围绕着开闭思想延展的。正所谓原则...
本章比较水，就写一个js实现的单例模式吧单例模式function Test() { //有缓存了直接抛出缓存 if (typeof Test.instance === "object") { return Test.instance; } //其他逻辑代码 ... //缓存并抛出 Test.instance = this; return this; } var a = new Test(); var b = new Test(); console.log(a === b); //t...
代码复用是一个既重要又有趣的话题。如果你面对自己或者别人已经写好的代码，而这些代码又是经过测试的、可维护的、可扩展的、有文档的，这时候你只想写尽量少且可以被复用的代码就是一个再自然不过的想法。当我们说代码复用的时候，第一件想到方式就是继承，为此你可能看到JavaScript很多方式用于实现“继承”。什么是类？如果有一个过程，这个过程能产生一个实例，实例是对象，那这个过程就是类。JavaScript是基于原型面向对象程序设计的，那么它的继承方式也是基于原型实现的，而JavaScript是没有类的，只有构造函数，且支持new用法，所以看上去就和类的用法相似，但是本质还是一个函数，而继承也是一...
命名空间在ESM模块化还未出来之前，用于减少全局变量名污染的一种做法就是使用命名空间，其做法也非常简单，就是创建一个全局的变量，然后将内容都赋值给这个变量，从而减少对全局变量的使用。//创建命名空间 var MYAPP = {}; //构造函数 MYAPP.Parent = function(){}; MYAPP.Child = function(){}; // 一个变量 MYAPP.some_var =1; // 一个对象容器 MYAPP.modules ={}; // 嵌套的对象 MYAPP.modules.module1 ={}; MYAPP.modules.module1...
背景简介JavaScript中函数有两个主要特点使其变得特殊：函数是“第一类对象”，更久之前也称之为“第一等公民”函数可以提供作用域什么是第一类对象第一类对象（First-class object）这个名称可以追溯到1960年，原称为第一类公民（First-class citizen），简单点来总结来说，可以在该语言中做到其他元素都能进行的所有操作（你们能干的我也都能干），就可以称为一等公民。一等公民的概念在《计算机程序的构造和解释》书籍中提及，而我们JavaScript的一等公民的概念是因为Brendan Eich（布兰登·艾奇 - JS之父）在设计语言是借鉴了Scheme语言，在Sc...
前言JavaScript中可以使用字面量的形式去声明对象，相比较使用构造函数去声明，更加准确且不容易出错，代码也更加简洁，这里讨论常见的类型中，为什么基于字面量的形式更加可取。对象字面量当我们考虑创建一个键-值对哈希表时（在其他语言被称为关联数组），我们可以从一个“空”对象开始，然后再根据需要向其添加所需要的内容，对于按需对象创建方式而言，对象字面量表示法是一种非常理想的选择方法。var dog = {}; dog.name = "jingmao"; dog.getName = function() { return dog.name; } //删除和复写也...
尽量少用全局变量全局变量污染是一个老生常谈的问题，在es5时代常见的做法就是使用函数作用域隔离，es6时const、let出现，我们还可以直接在块级作用域中声明。相对于使用，我们通过一些代码来回顾一下全局变量污染所带来的问题。全局作用域中是存在this的，this就等于window，只是浏览器为了方便，用window来表示全局对象本身。function sum(x, y) { result = x + y; return result; } console.log(result); //Uncaught ReferenceError: result is not def...
目录什么是代理模式？代理模式常见的两种实现方式为什么要使用代理而不是直接在源对象做修改呢？代理与适配器和装饰器之间的区别什么时候使用代理什么是代理模式？为一个对象提供一个替身对象（代理对象），以便对于源对象的控制和访问，某些时候我们没法直接引入源对象或者源对象不满足需要时，可以通过替身对象来进行中介和控制。代理模式主要分为三个角色：客户端（我），代理类，目标类；客户 ------> 源对象客户 ------> 代理 -------> 源对象比如说我有一个业务需求，我需要一个能自动过期数据的一个数据存储对象，那么从所有能存数据的对象中，map是最佳的，因为它有has，s...
最近评论