概述设计模式是程序员在面对同类软件工程所遇到的问题总结出来的有用的经验，模式不是代码，而是某类问题的通用解决方案，设计模式代表了最佳的实践。这些解决方案是众多开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式本质是为了提供：软件的维护性，通用性和扩展性，并降低软件的复杂度设计模式参考书：《Design Patterns - Elements of Reusable Object-Oriented Software》（设计模式 - 可复用的面向对象软件元素），书中共总结了23种设计模式，被广泛的认同。设计模式是针对面向对象语言的，但不局限与某一种面向对象的语言。分类设计模式可以分...
设计原则在软件开发中，为了提供软件系统的：可维护性、可复用性、增加软件的可扩展性和灵活性，程序员尽量根据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个这种大...
前言只是搭建一个用于打包模块的环境，更多细节还需要自己查询资料。monorepo快速了解如果有所了解，应该会知道安卓的repo仓库，他是MultiRepo模式，一个git仓库下面会有多个git仓库，通过主仓库的配置命令来批量管理，但是呢，在window上这种模式有着不小的缺陷，甚至没法正常使用。于是后面又有了一种思路，这个就是Monorepo，它不再分多个git仓库，而是在一个git仓库里面管理多个项目，每个项目有自己的package.json文件，有自己的node_modules目录。这也会产生一个问题，重复的依赖以及依赖层级过深的问题，于是这个问题就可以通过pnpm包管理器解决，首先...
面向对象对于面向对象的理解，千人千面，不同的人有不同的解读，这里就以我个人所了解的知识给大家解释一下面向对象。历史角度我们先从历史的角度去看！计算器在发明之初，处理的能力是有限的，所有的代码编辑都需要根据“机器语言（二进制）”来进行编写。这显然非常痛苦。那么如果我们把二进制换成一个个单词（助记符单词），是不是又更好一点了呢，于是“汇编语言”诞生了，但是使用上也就被机器语言强那么一点点。那么有没有比汇编语言更好用的呢？于是面向过程的C语言出现了，c的位置处于机器与人的中间点，既没有偏向人的思维模式，也没有偏向机器语言思维。可以说c语言的底层结构是机器语言，但是它将机器语言封装成自己的语法，...
批量设置属性全部只读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公共库存在了三个，那么还有更多呢，...
//模拟异步请求 function axiosFn() { return new Promise((resolve, reject) => { const flge = Math.random(); //随机值 setTimeout(() => { //大于0.7就是成功 if (flge > 0.7) { return resolve(flge); } else { return reject(...
const div = document.querySelector("div.box"); div.addEventListener("animationstart", function() { //动画开始运行触发 }); div.addEventListener("animationiteration", function() { //动画每执行一次触发一次，适用用多次动画 }); div.addEventListener("animationend", function() { //...
ts默认要求class中声明的属性必须初始化，所以，如果存在没有被初始化的属性，就会报这个错误。如果我们让他或者等于null，那么在调用属性的时候又会提示值可能为null，极度麻烦class A { data: { name: string } | null = null; } const a = new A(); console.log(a.data.name);然后你又不得不搞个非空断言。console.log((a.data!).name);每次都这么写非常麻烦。赋值方案既然他要赋值那么我们就赋值class A { data: { name: string }; c...
rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴，每个轴的旋转方向默认如图箭头所示。所有的旋转角度，正值都是根据默认的旋转方向来得，负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的，如下图所示：因为在二维的界面Z轴的变化才是有效的，所以默认值的设置就是Z轴，所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的，比如X轴移动100px;transform: translateX(100...
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候，网页只能识别硬件的物理像素，而非软件像素。物理像素：硬件本身的实际像素大小软件像素：设备尺寸限制，过大的像素并不能带来很好的体验，显示的内容过多反倒无法正常使用，于是有了软件像素，软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是：375px*812px；它的比是：3；那么它的物理像素就等于：(375*3)*(812*3)更多的对比可以去这个网站查看：mydevice然而实际上移动端设备都会有一个默认的宽度：980px，所以，即便我们没有设置meta viewport，网页也不可能真的使用...
子元素自身的order属性子元素的order的作用详解：默认情况下order的值都为0，如果这个值越小，那么就越靠近起始点，值越大，位置就越后，order其实用于移动元素的位置，而位置的方向则取决于父元素设置的：flex-direction子元素自身的align-self属性从正常角度，align-self是控制子元素y轴的对齐方式，也称侧轴对齐，这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果，最好配合：flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度：当主轴是...
/* * @Author: mulingyuer * @Date: 2021-12-30 22:06:58 * @LastEditTime: 2022-01-03 05:22:30 * @LastEditors: mulingyuer * @Description: 手写promise * @FilePath: \undefinedc:\Users\13219\Desktop\promise.js * 怎么可能会有bug！！！ */ /** * @description: 自定义promise * @param {fucntion} executor 执行器函数(同...
最近评论