简介外观模式：是一种通过为多个复杂的子系统提供一个一致的接口，而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口，外部应用程序不用关心内部子系统的具体细节，这样会大大降低应用程序的复杂度，提高了程序的可维护性。其实就是一种封装，把一系列的操作封装成简单的接口供客户端去调用。但是不能滥用，因为本身就是为了减少客户端与各个依赖的耦合性，将一堆依赖改为依赖一个外观类。外观模式遵循的是迪米特法则，也就是最少知道原则，但是如果新增新的功能，可能会改动到外观类，所以它违背了开闭原则。它常常应用于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...
1px在不同设备的一个探究其实我们要搞明白两个问题：为什么有时候边框无法在部分手机显示？我们真的要小于1px吗为什么有时候边框无法在部分手机显示？有两种设置方式：0.5px0.22rem首先0.5px在老手机是不支持的，特别是安卓，0.5px（小于1px）会被视为1px渲染。0.22rem或者0.22em他们都是相对父级或者根元素进行换算的，最终他们也得变成px单位渲染，有可能是大于1px，有可能会小于1px，最终也会出现部分手机边框是粗的，原因也是因为不足1px被当1px渲染了。还有一个原因，但是需要先了解一些屏幕像素的知识了！我们可以将屏幕的像素视为一个个小方格，一排可能就n个这种大...
原理全局存在一个弹窗管理器，他管理着一个数组，所有的弹窗触发全部包成一个函数，交给管理器，管理器去查看队列是否有内容，如果有内容就不触发，无内容就将本次函数push进数组中，然后触发next方法弹出下一个弹窗。当弹窗关闭后，触发管理器的remove方法，数组首位出栈，触发next方法，弹出下一个弹窗示意图源码四个文件：dialogMap.ts 弹窗数据，可能这个弹窗这次需要队列，下次就不需要，通过这个配置index.ts 入口文件queueManager.ts 管理器types.ts 类型声明types.ts/* * @Author: mulingyuer * @Date: 20...
引入组件的方式传统模式import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => ...
前言只是搭建一个用于打包模块的环境，更多细节还需要自己查询资料。monorepo快速了解如果有所了解，应该会知道安卓的repo仓库，他是MultiRepo模式，一个git仓库下面会有多个git仓库，通过主仓库的配置命令来批量管理，但是呢，在window上这种模式有着不小的缺陷，甚至没法正常使用。于是后面又有了一种思路，这个就是Monorepo，它不再分多个git仓库，而是在一个git仓库里面管理多个项目，每个项目有自己的package.json文件，有自己的node_modules目录。这也会产生一个问题，重复的依赖以及依赖层级过深的问题，于是这个问题就可以通过pnpm包管理器解决，首先...
面向对象对于面向对象的理解，千人千面，不同的人有不同的解读，这里就以我个人所了解的知识给大家解释一下面向对象。历史角度我们先从历史的角度去看！计算器在发明之初，处理的能力是有限的，所有的代码编辑都需要根据“机器语言（二进制）”来进行编写。这显然非常痛苦。那么如果我们把二进制换成一个个单词（助记符单词），是不是又更好一点了呢，于是“汇编语言”诞生了，但是使用上也就被机器语言强那么一点点。那么有没有比汇编语言更好用的呢？于是面向过程的C语言出现了，c的位置处于机器与人的中间点，既没有偏向人的思维模式，也没有偏向机器语言思维。可以说c语言的底层结构是机器语言，但是它将机器语言封装成自己的语法，...
最近评论