木灵鱼儿

木灵鱼儿 3年前设计模式

结构型模式：适配器模式

简介适配器模式是将某个类的接口转换成客户端期望的另一个接口表示，主要目的是兼容性，让原本因接口不匹配不能一起工作的两个类可以协同工作。举个简单的例子：我们的插排提供的是220v的电压，而我们的手机能支持的是5v电压，此时它们之间是无法协同工作的，所以我们出现了电源适配器（手机充电器），电源适配器将220v转为了5v电压供手机使用。而适配器模式有三类：类适配器模式、对象适配器模式、接口适配器模式。类适配器模式适配器模式中有三种主要角色：被适配者（src），适配器（adapter），目标的实现接口（dst）；目标的实现接口，以上面电源适配器的例子来说，手机要求的是一个5v的电压，这个要求就可...

2609 0 0

设计模式结构型模式适配器模式

创建型模式：建造者模式

木灵鱼儿 3年前设计模式

创建型模式：建造者模式

简介建造者模式指将一个复杂对象的构造过程与表示分离，使同样的构建过程可以创建不同的表示。它将变与不变相分离，即产品的整体组成不变，但是每一个部分是可以灵活变动的。“表示”指的就是实际生成的实例对象，相同的构造过程可以创建不同的表示，这里我们需要先了解一下构造者模式中的3个角色。角色：指挥者：调用具体建造者来创建复杂对象的各个部分，它只处理创建的过程建造者：提供各个部件的具体创建方法，在完成后提供产品的实例。产品：要创建的复杂对象指挥者指挥建造者去建造产品，同一个指挥者指挥不同的建造者，可以产生不同的产品，而指挥者也是可以替换的，不同的指挥者指挥同一个建造者，也可以产生不同的产品。但是最终...

2393 5 0

设计模式建造者模式指挥者

字体精简-字蛛font-spider

木灵鱼儿 3年前教程

字体精简-字蛛font-spider

简介记录一个精简字符的方式。利用字蛛做一些字体精简，本方式是针对英文精简，中文字体可以自行延展处理。字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。安装字蛛github：font-spidernpm install font-spider -g注意全局安装，省事，当然也可以局部，个人选择。配置安装完毕后我们需要新建一个html文件，这个文件里面需要配置一个自定义字体css，一个div，用于显示你需要精简的字体。注意，被精简的字体文件必须是ttf格式。创建一个index.html文件<!DOCTYPE html> <ht...

3277 0 0

字体精简字体精简

创建型模式：原型模式

木灵鱼儿 3年前设计模式

创建型模式：原型模式

简介原型模式指的是：用一个已经创建的实例作为原型，通过复制该原型对象来创建一个和原型相同或者相似的新对象。这个原型不同于js中的prototype，它指的是被克隆的对象。在java中克隆可以通过Object父类中的clone方法实现，但是在前端中，是没有这种方式的，我们需要通过其他方法实现克隆。克隆又分浅克隆和深克隆，因为引用类型的存在，浅克隆对引用类型只会克隆该类型的内存地址，而深克隆则会完全复制一份引用类型对象，达到完全克隆。原型模式也是用于创建一个对象，而这个对象可能非常复杂，为了减少消耗的资源，更高效的生成对象。反例假设我们现在有这么一段代码：const run = { a:...

2547 0 0

浅克隆设计模式原型模式

创建型模式：工厂模式（包含抽象工厂）

木灵鱼儿 3年前设计模式

创建型模式：工厂模式（包含抽象工厂）

简介工厂模式是讲需要实例化的代码提取出来，放到一个专门的类中去做管理和维护，达到和主体代码的解耦，从而提高项目的扩展性和维护性。将创建实例与调用实例进行解耦！简单来说就是把new操作（创建实例）放到一个专门的地方统一管理，而不是在代码中耦合使用，方便管理和扩展。工厂模式有三种用法：简单工厂模式、工厂方法模式、抽象工厂模式简单工厂模式简单工厂模式是指由一个工厂对象决定创建出哪一种产品类的实例。比如我们需要建一个饭店，这个饭店需要招三名厨师，他们要有各自的拿手菜：水煮牛肉、青椒炒蛋、炒米粉。为了能方便的招聘厨师，我定了一个要求，厨师必须会：开火、颠勺、关火、出菜于是我写了一个接口来要求这些厨...

2543 0 0

设计模式工厂模式简单工厂模式

创建型模式：单例模式

木灵鱼儿 3年前设计模式

创建型模式：单例模式

简介所谓的的单例设计模式，就是采取一定的方法保证整个软件系统中，对某个类只能存在一个对象实例，并且该类只提供一个取得其对象实例的方法（静态方法）。以前端中vuex为例，它在整个vue的系统中，获取到的就是一个全局唯一的对象实例。由于vuex本身就是一个重量级的功能，且一个项目通常只需要一个vuex状态管理就够了，所以采用的单例模式。单例模式在java中有八种方法：饿汉式（静态常量）饿汉式（静态代码块）懒汉式（线程不安全）懒汉式（线程安全，同步方法）懒汉式（线程安全，同步代码块）双重检查静态内部类枚举但是前端中其实好多方法就做不到，因为js是单线程的，且并不是强类型语言，所以其中：双...

2622 0 0

设计模式单例模式创建型模式

设计模式概述与分类

木灵鱼儿 3年前设计模式

设计模式概述与分类

概述设计模式是程序员在面对同类软件工程所遇到的问题总结出来的有用的经验，模式不是代码，而是某类问题的通用解决方案，设计模式代表了最佳的实践。这些解决方案是众多开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式本质是为了提供：软件的维护性，通用性和扩展性，并降低软件的复杂度设计模式参考书：《Design Patterns - Elements of Reusable Object-Oriented Software》（设计模式 - 可复用的面向对象软件元素），书中共总结了23种设计模式，被广泛的认同。设计模式是针对面向对象语言的，但不局限与某一种面向对象的语言。分类设计模式可以分...

2961 0 0

设计模式创建型模式结构型模式

vue-i18n 的使用方式

木灵鱼儿 3年前 vue 项目实战

vue-i18n 的使用方式

安装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...

5782 66 2

vue vue-i18n 多语言

设计模式的7个设计原则

木灵鱼儿 3年前设计模式

设计模式的7个设计原则

设计原则在软件开发中，为了提供软件系统的：可维护性、可复用性、增加软件的可扩展性和灵活性，程序员尽量根据7条原则来开发程序，从而提高软件开发效率、节约软件开发成本和维护成本。设计原则最初只有5条，单一功能、开闭原则、里氏替换、接口隔离以及依赖反转，后来又进行了增强，目前详细版的有7个原则，很多书都只有6个原则。目前共有23种设计模式。设计模式最初都是应用于强类型语言，所有很多例子都是java这种例子，所以，类，抽象，这些在后面的文章中会频繁出现。希望你有一些心理准备。开闭原则开闭原则是设计中最为重要的一个设计原则，它是所有原则的基础，所有的设计原则全部都是围绕着开闭思想延展的。正所谓原则...

2762 0 0

设计模式设计原则开闭原则

第六章设计模式

木灵鱼儿 3年前 JavaScript模式

第六章设计模式

本章比较水，就写一个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...

2925 0 0

设计模式 JavaScript模式单例模式

第五章代码复用模式

木灵鱼儿 3年前 JavaScript模式

第五章代码复用模式

代码复用是一个既重要又有趣的话题。如果你面对自己或者别人已经写好的代码，而这些代码又是经过测试的、可维护的、可扩展的、有文档的，这时候你只想写尽量少且可以被复用的代码就是一个再自然不过的想法。当我们说代码复用的时候，第一件想到方式就是继承，为此你可能看到JavaScript很多方式用于实现“继承”。什么是类？如果有一个过程，这个过程能产生一个实例，实例是对象，那这个过程就是类。JavaScript是基于原型面向对象程序设计的，那么它的继承方式也是基于原型实现的，而JavaScript是没有类的，只有构造函数，且支持new用法，所以看上去就和类的用法相似，但是本质还是一个函数，而继承也是一...

4056 0 0

prototype 混入 JavaScript模式

第四章对象的创建

木灵鱼儿 3年前 JavaScript模式

第四章对象的创建

命名空间在ESM模块化还未出来之前，用于减少全局变量名污染的一种做法就是使用命名空间，其做法也非常简单，就是创建一个全局的变量，然后将内容都赋值给这个变量，从而减少对全局变量的使用。//创建命名空间 var MYAPP = {}; //构造函数 MYAPP.Parent = function(){}; MYAPP.Child = function(){}; // 一个变量 MYAPP.some_var =1; // 一个对象容器 MYAPP.modules ={}; // 嵌套的对象 MYAPP.modules.module1 ={}; MYAPP.modules.module1...

2757 0 0

对象命名空间 JavaScript模式

第三章函数

木灵鱼儿 3年前 JavaScript模式

第三章函数

背景简介JavaScript中函数有两个主要特点使其变得特殊：函数是“第一类对象”，更久之前也称之为“第一等公民”函数可以提供作用域什么是第一类对象第一类对象（First-class object）这个名称可以追溯到1960年，原称为第一类公民（First-class citizen），简单点来总结来说，可以在该语言中做到其他元素都能进行的所有操作（你们能干的我也都能干），就可以称为一等公民。一等公民的概念在《计算机程序的构造和解释》书籍中提及，而我们JavaScript的一等公民的概念是因为Brendan Eich（布兰登·艾奇 - JS之父）在设计语言是借鉴了Scheme语言，在Sc...

2965 0 0

函数第一类对象作用域

第二章字面量与构造函数

木灵鱼儿 3年前 JavaScript模式

第二章字面量与构造函数

前言JavaScript中可以使用字面量的形式去声明对象，相比较使用构造函数去声明，更加准确且不容易出错，代码也更加简洁，这里讨论常见的类型中，为什么基于字面量的形式更加可取。对象字面量当我们考虑创建一个键-值对哈希表时（在其他语言被称为关联数组），我们可以从一个“空”对象开始，然后再根据需要向其添加所需要的内容，对于按需对象创建方式而言，对象字面量表示法是一种非常理想的选择方法。var dog = {}; dog.name = "jingmao"; dog.getName = function() { return dog.name; } //删除和复写也...

2671 0 0

构造函数字面量 new

第一章基本技巧

木灵鱼儿 3年前 JavaScript模式

第一章基本技巧

尽量少用全局变量全局变量污染是一个老生常谈的问题，在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...

2969 0 0

注释全局变量 JavaScript模式

代理模式

木灵鱼儿 3年前设计模式

代理模式

目录什么是代理模式？代理模式常见的两种实现方式为什么要使用代理而不是直接在源对象做修改呢？代理与适配器和装饰器之间的区别什么时候使用代理什么是代理模式？为一个对象提供一个替身对象（代理对象），以便对于源对象的控制和访问，某些时候我们没法直接引入源对象或者源对象不满足需要时，可以通过替身对象来进行中介和控制。代理模式主要分为三个角色：客户端（我），代理类，目标类；客户 ------> 源对象客户 ------> 代理 -------> 源对象比如说我有一个业务需求，我需要一个能自动过期数据的一个数据存储对象，那么从所有能存数据的对象中，map是最佳的，因为它有has，s...

2859 0 0

设计模式代理模式

关于1px边框问题的探索

木灵鱼儿 3年前 CSS

关于1px边框问题的探索

1px在不同设备的一个探究其实我们要搞明白两个问题：为什么有时候边框无法在部分手机显示？我们真的要小于1px吗为什么有时候边框无法在部分手机显示？有两种设置方式：0.5px0.22rem首先0.5px在老手机是不支持的，特别是安卓，0.5px（小于1px）会被视为1px渲染。0.22rem或者0.22em他们都是相对父级或者根元素进行换算的，最终他们也得变成px单位渲染，有可能是大于1px，有可能会小于1px，最终也会出现部分手机边框是粗的，原因也是因为不足1px被当1px渲染了。还有一个原因，但是需要先了解一些屏幕像素的知识了！我们可以将屏幕的像素视为一个个小方格，一排可能就n个这种大...

3453 0 0

border 像素 1px

弹窗队列管理器

木灵鱼儿 3年前 vue 项目实战

弹窗队列管理器

原理全局存在一个弹窗管理器，他管理着一个数组，所有的弹窗触发全部包成一个函数，交给管理器，管理器去查看队列是否有内容，如果有内容就不触发，无内容就将本次函数push进数组中，然后触发next方法弹出下一个弹窗。当弹窗关闭后，触发管理器的remove方法，数组首位出栈，触发next方法，弹出下一个弹窗示意图源码四个文件：dialogMap.ts 弹窗数据，可能这个弹窗这次需要队列，下次就不需要，通过这个配置index.ts 入口文件queueManager.ts 管理器types.ts 类型声明types.ts/* * @Author: mulingyuer * @Date: 20...

3141 0 0

管理器弹窗弹窗队列

vue2 使用@vue composition-api的一些问题

木灵鱼儿 3年前 vue 项目实战

vue2 使用@vue composition-api的一些问题

引入组件的方式传统模式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 => ...

6173 2 2

vue2 composition-api

pnpm 搭建monorepo环境

木灵鱼儿 3年前前端基础建设与架构

pnpm 搭建monorepo环境

前言只是搭建一个用于打包模块的环境，更多细节还需要自己查询资料。monorepo快速了解如果有所了解，应该会知道安卓的repo仓库，他是MultiRepo模式，一个git仓库下面会有多个git仓库，通过主仓库的配置命令来批量管理，但是呢，在window上这种模式有着不小的缺陷，甚至没法正常使用。于是后面又有了一种思路，这个就是Monorepo，它不再分多个git仓库，而是在一个git仓库里面管理多个项目，每个项目有自己的package.json文件，有自己的node_modules目录。这也会产生一个问题，重复的依赖以及依赖层级过深的问题，于是这个问题就可以通过pnpm包管理器解决，首先...

6126 69 1

pnpm monorepo rollup

什么是面向对象与设计模式

木灵鱼儿 3年前设计模式

什么是面向对象与设计模式

面向对象对于面向对象的理解，千人千面，不同的人有不同的解读，这里就以我个人所了解的知识给大家解释一下面向对象。历史角度我们先从历史的角度去看！计算器在发明之初，处理的能力是有限的，所有的代码编辑都需要根据“机器语言（二进制）”来进行编写。这显然非常痛苦。那么如果我们把二进制换成一个个单词（助记符单词），是不是又更好一点了呢，于是“汇编语言”诞生了，但是使用上也就被机器语言强那么一点点。那么有没有比汇编语言更好用的呢？于是面向过程的C语言出现了，c的位置处于机器与人的中间点，既没有偏向人的思维模式，也没有偏向机器语言思维。可以说c语言的底层结构是机器语言，但是它将机器语言封装成自己的语法，...

2723 0 0

面向对象设计模式

vue cli异步路由加载原理

木灵鱼儿 3年前 vue cli

vue cli异步路由加载原理

webpack会解析路由文件的引入，就算你是一个setTimeout输出的路由配置文件，或者if else判断的路由配置文件，他都会将你明文书写的路由vue文件打包。为什么？其原理未知，估计并不是解析代码，而且代码关键字的抓取。如果你是一个api返回的路由配置，webpack的无法准确感知到路由文件的是否被引入，所以它的办法是全部都打包，src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件，哪怕你的这个组件已经被某个路由页明确引入了，这个路由除了会被打包到这个路由页，还会生成单独的chunk...

3207 0 0

vue cli 异步加载路由

映射类型，对象属性批量设置约束

木灵鱼儿 3年前 TypeScript

映射类型，对象属性批量设置约束

批量设置属性全部只读interface ObjInterface { a: number; b: number; c: number; } //全部设为只读 type readonlyObj = Readonly<ObjInterface>;鼠标移动到readonlyObj可以发现所有的属性全部设置为只读了。type readonlyObj = { readonly a: number; readonly b: number; readonly c: number; }我们按住ctrl+鼠标左键点击Readonly；可以看到...

3482 0 0

TypeScript 映射类型 Readonly

索引类型，key的约束

木灵鱼儿 3年前 TypeScript

索引类型，key的约束

再for循环中我们经常遇到类似这种写法const obj = { a: 1, b: 2, c: 3 }; //遍历obj拿到指定key对应的val数组 function getObjVal(obj:any,keys:string[]) { return keys.map(key => obj[key]); } console.log(getObjVal(obj, ["a", "b"])); console.log(getObjVal(obj, ["d", "e"]...

3557 0 0

TypeScript 索引类型 keyof T

npm与yarn的一些知识

木灵鱼儿 3年前前端基础建设与架构

npm与yarn的一些知识

依赖嵌套地狱虽然新版本的npm也和yarn一样使用了扁平化管理依赖，但是其依赖依旧取决于安装的顺序。比如A依赖中它依赖一个公共库H 1.0版本，那么安装A时同时也会安装H，此时node_modules不存在A、H，那么A和H处于同级关系。过段时间我们需要安装B模块，B模块依赖H的2.0版本，但是node_modules依旧存在了1.0，于是它2.0只能再B模块下的node_modules目录。此时我们存在了两个版本的H公共库。又过一段时间，我们需要安装C模块，C模块也需要H 2.0，那么他也只能将H存放再自己的node_modules目录下。此时我们的H公共库存在了三个，那么还有更多呢，...

4445 0 0

yarn npm

木灵鱼儿

结构型模式：适配器模式

创建型模式：建造者模式

字体精简-字蛛font-spider

创建型模式：原型模式

创建型模式：工厂模式（包含抽象工厂）

创建型模式：单例模式

设计模式概述与分类

vue-i18n 的使用方式

设计模式的7个设计原则

第六章设计模式

第五章代码复用模式

第四章对象的创建

第三章函数

第二章字面量与构造函数

第一章基本技巧

代理模式

关于1px边框问题的探索

弹窗队列管理器

vue2 使用@vue composition-api的一些问题

pnpm 搭建monorepo环境

什么是面向对象与设计模式

vue cli异步路由加载原理

映射类型，对象属性批量设置约束

索引类型，key的约束

npm与yarn的一些知识

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

结构型模式：适配器模式

创建型模式：建造者模式

字体精简-字蛛font-spider

创建型模式：原型模式

创建型模式：工厂模式（包含抽象工厂）

创建型模式：单例模式

设计模式概述与分类

vue-i18n 的使用方式

设计模式的7个设计原则

第六章 设计模式

第五章 代码复用模式

第四章 对象的创建

第三章 函数

第二章 字面量与构造函数

第一章 基本技巧

代理模式

关于1px边框问题的探索

弹窗队列管理器

vue2 使用@vue composition-api的一些问题

pnpm 搭建monorepo环境

什么是面向对象与设计模式

vue cli异步路由加载原理

映射类型，对象属性批量设置约束

索引类型，key的约束

npm与yarn的一些知识

最近评论

博客文章RSS订阅

博客评论RSS订阅

第六章设计模式

第五章代码复用模式

第四章对象的创建

第三章函数

第二章字面量与构造函数

第一章基本技巧