vue2与vue3使用的版本以及区别vue2安装：yarn add vue-i18n@8安装8.xx的版本，9.xx是vue3使用的。vue3安装：yarn add vue-i18n区别：vue-i18n@8挂载的时候，是挂载的未实例化的i18对象，vue-i18n@9挂载的是实例化后的i18对象。具体代码后面会有。一些经验i18n的语言文件可以是js，可以是json，ts没测试，然后vue2版他官方例子用的是js，vue3版用的是json，个人测试都可以，所以建议都用json，统一格式。挂载插件的时候，vue2版挂载的是未实例化前的对象，vue3版挂载的是实例化后的对象。多看官方文档，...

设计原则在软件开发中，为了提供软件系统的：可维护性、可复用性、增加软件的可扩展性和灵活性，程序员尽量根据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 => h(App) }).$mount('#app')这种方式在vue组件中使用 c...

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

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

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

批量设置属性全部只读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；可以看到...

再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"]...

依赖嵌套地狱虽然新版本的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公共库存在了三个，那么还有更多呢，...

在linux中输入 ip addr可以看到有三个网络配置：lo 127.0.0.1 # 本机回环地址eth0 172.17.90.138 # 阿里云的私有IPdocker0 172.18.0.1 # dockerdocker会自行创建一个类似路由器一样的网络处理层，所有启动的容器都会自动分配一个基于172.18.0.1的ip地址，也正因为如此，我们容器之间是可以相互ping通的，因为都在同一个网关下。但也仅限于利用ip地址进行通信。原理每一个安装了Docker的linux主机都有一个docker0的虚拟网卡。这是个桥接网卡，使用了veth-pair技术！ 每启动一个容器，linux主...

保存到本地docker save --help Usage: docker save [OPTIONS] IMAGE [IMAGE...] Save one or more images to a tar archive (streamed to STDOUT by default) Options: -o, --output string Write to a file, instead of STDOUT很简单的一个命令，只有一个-o表示镜像要输出的路径以及镜像名.tardocker images my-centos 1.0 fef5d23d0bd1 ...

发布到DockerHub官方首先我们需要注册一个DockerHub的账号链接：https://hub.docker.com/signup注册完毕后我们本地登录PS C:\Users\13219\Desktop> docker login --help Log in to a Docker registry or cloud backend. If no registry server is specified, the default is defined by the daemon. Usage: docker login [OPTIONS] [SERVER] [flags...

什么是DockerFiledockerfile是用来构建Docker镜像的构建文件，是由一系列命令和参数构成的脚本。构建步骤：编写DockerFile文件docker build 构建镜像docker run我们从docker的镜像页面点击版本号时，可以访问到github上dockerfile的文件。以centos为例，大概如下：FROM scratch ADD centos-7-x86_64-docker.tar.xz / LABEL \ org.label-schema.schema-version="1.0" \ org.label-schem...

//模拟异步请求 function axiosFn() { return new Promise((resolve, reject) => { const flge = Math.random(); //随机值 setTimeout(() => { //大于0.7就是成功 if (flge > 0.7) { return resolve(flge); } else { return reject(...

什么是容器数据卷其作用就是方便容器与外部宿主机的文件交互，毕竟容器可以重启启动一个，但是数据只有一份啊，所以如果能将数据存在宿主机上，容器随便换，宿主机本身再定时备份，问题不就解决了。作用卷就是目录或者文件，存在一个或者多个容器中，由docker挂载到容器，但不属于联合文件系统，因此能够绕过 Union File System ， 提供一些用于持续存储或共享数据的特性：卷的设计目的就是数据的持久化，完全独立于容器的生存周期，因此Docker不会在容器删除时删除其挂载的数据卷。特点数据卷可在容器之间共享或重用数据卷中的更改可以直接生效数据卷中的更改不会包含在镜像的更新中数据卷的生命周期一直...

打包命令docker commit # 这个和git的commit提交差不多 # 例子 docker commit -m="提交的描述信息" -a="作者" 提交的容器id 打包后的镜像名:tag版本号注意：实战测试以之前的Tomcat为例，默认情况下官方在webapps目录中是没有任何文件的，官方把默认的web文件放置在webapps.dist目录下，我们就可以把文件搬过来，生成一个自己的镜像。安装并搬运web文件docker pull tomcat # 下载完毕后运行 docker run -d -p 8080:8080 --name t...