07 2021 档案
摘要：挂载到vm上 vuex也是通过vm.use()来挂载的，使用$store来访问state。 setup中通过import {useStore} from "vuex"; const store = useStore()来获得store state 在这里定义的状态可以被其它的几项方法使用，如muta
阅读全文
摘要：在vm上挂载的属性 在main.js中用use(router)在vm上挂载了两个属性$router $route $router全部的router设置，跳转路由等操作通过它进行 $route当前的router指向，它包含了一些当前路由的属性 通过$router.push("xxx")进行路由跳转 s
阅读全文
摘要：打包命令 webpack --mode development/production 默认模式 在webpack打包时默认的位置是当前目录下的./src/index.js 通过命令 通过命令webpack --mode ./文件夹/文件 -o ./文件夹/文件夹 development来自定义打包内
阅读全文
摘要：该版把上一次的数据修改就更新全部页面改为了局部更新，相比于上一版的在数据绑定上不是简单的一个监听set再全部更新，具体见下文。 总体流程 仍然是根据自己理解来实现的绑定，相较于上一版的数据更新就全部刷新，这次改成了部分页面更改，总体流程大致如图：（字本来就丑，那个笔芯写更丑了，希望能看懂吧） 这里就
阅读全文
摘要：基本结构 这里我根据自己的理解模仿了Vue的单文件写法，通过给Vue.createApp传入参数再挂载元素来实现页面与数据的互动。 其中理解不免有错，希望大佬轻喷。 收集数据 这里将Vue.createApp()里的参数叫做options data可以是一个对象或者函数，在是函数的时候必须rutur
阅读全文
摘要：v8的内存划分 v8大体分为堆和栈，垃圾回收在堆里进行。 堆内存分多个模块： New space 大多数的对象开始都会被分配在这里，这个区域相对较小但是垃圾回收特别频繁，该区域被对半分为两半（分为Semi space From 和 Semi space To ） Old space 新生代中的对象在
阅读全文
摘要：享元模式 享元模式 享元模式的定义：运用共享技术来有效地支持大量细粒度对象的复用。 该模式在遇到会创建大量相似的对象的情况下很有用，它把多个相似对象的共同点封装起来，把不同点作为外部变量来传入，这样就可以节省空间。 享元模式有点像状态模式，但是状态模式把状态对象缓存进自己里面，享元模式是接收一个对象
阅读全文
摘要：适配器模式 适配器模式的定义：将一个接口转换成客户希望的另一个接口，使接口不兼容的那些类可以一起工作。 简单来说就是这个API的接口名出现冲突/你不喜欢，可以用另一个自己写的函数/对象来调用它。 就这样，代码我就不举了。
阅读全文
摘要：正则的一些补充学习 match，matchAll和exec的区别 match，matchAll作用在字符串上，exec作用在正则表达式上 match匹配g模式的正则时返回的是匹配到的所有字符组成的数组； 匹配非g模式的正则时返回的数组的第一个是匹配到的，其余的是括号里捕获到的字符串。 exec匹配g
阅读全文
摘要：状态模式 状态模式的定义：当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类。 简单来说就是在一个类里封装入多个表示这个类的不同状态的对象，在当前的状态改变后，调用状态代表的对象的方法。 class Homo { constructor() { this.state = "";
阅读全文
摘要：装饰者模式 装饰者模式的定义：动态地将责任附加到对象上。若要扩展功能，装饰者提供了比继承更有弹性的替代方案。 动态地将责任附加到对象上，在JS这个动态语言里是比喝水还平常不过的事，而函数又是一种特殊的对象，所以在这里，装饰者模式的含义其实可以翻译为：在不改变原函数的基础上给函数添加新的方法。 这里最
阅读全文
摘要：职责链模式 职责链模式的定义：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系。 该模式类似于调用原型方法一样：在该对象没有该方法时向上一个原型上寻找方法；该模式这是该方法无法处理这个请求时，用下一个方法处理该请求，这样形成一个链，每个方法都有可能被调用。 这里用一个表单验证做
阅读全文
摘要：颜色混合函数 颜色是用十六进制的六位数表示的，就像是这样一个颜色#fe12a7它的前两位代表RGB的R，中间二位代表G 再看看less里的mix函数mix(color,color,weight) 这里接收的两个color都会转换成十六进制，weight则是指两个颜色占据的权重 颜色的R的部分混合方法
阅读全文
摘要：模板方法模式 模板方法模式的定义：在一个方法里定义算法的骨架，将一些步骤延迟到其子类。 意思是用一个方法包装多个函数的调用，这个方法就是模板，函数的使用只需要跟着模板里的步骤进行即可，同时根据情况可以放入钩子函数来选择是否在指定位置执行函数。 算是JS的继承的一个主要用法。 //! 这就是冲饮料的模
阅读全文
摘要：今天遇到个需求：要生成随机的汉字。 想了想可以先生成随机的unicode码，再将它解码就行了。 百度的时候找到了解码的函数：unescape 只要把生成的unicode码前加上%u就能解码为汉字，问题解决后去MDN上找了下这个函数的介绍，看到该函数已废弃，虽然现在火狐上还能用，但还是放弃了这个函数，
阅读全文
摘要：组合模式 组合模式的定义：将对象组合成树形结构以表示部分-整体的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。 简单来说就是把对象之间组合成树状结构，能通过一个元素的方法调用它的所有子元素的同名方法。 因为现在还没遇到过需要这个模式解决的问题，拿书上的文件夹例子来说明吧： clas
阅读全文
摘要：命令模式 命令模式的定义：将一个请求封装为一个对象，从而使我们可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及支持可撤销的操作。 命令模式与策略模式在写法上相似，都是使用一个对象保存会使用到的方法，然后在需要的地方调用。 这是一个简单例子：键盘输入为空格或者数字时会把输入展示到屏幕上
阅读全文
摘要：发布订阅模式（观察者模式） 发布订阅模式的定义：它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。 发布订阅模式在JS中最常见的就是DOM的事件绑定与触发： //todo 注册点击事件 btn.addEventListener("click", func
阅读全文
摘要：迭代器模式 迭代器模式的定义：提供一个方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。 简单来说就是实现对一个对象的迭代。。。 内部迭代器 这在ES6里已经有了原生的支持:[Symbol.iterator]，该方法在所有的数组、Map、Set中都已经有了实现，所以可以通过for
阅读全文
摘要：代理模式 代理模式的定义：为一个对象提供一个代用品或占位符，以便控制对它的访问 代理模式被运用到vue的响应式数据上，在ES6之前用Object.defineProperty，在ES6后使用Proxy来实现代理。 虚拟代理 虚拟代理用来收集某个时间内对代理对象的访问，在某个时间时把收集到的访问全部执
阅读全文
摘要：策略模式 策略模式的定义：定义一系列的算法，把它们一个个封装起来，并使它们可以互相替换。 简单来说就是我要到某个地方去旅游，到目的地的过程有很多：飞机，高铁，汽车。。。这些方法都作为一个封装，等我要出发时只需要选择一个方法就可以去了，则就是策略模式。 所以策略模式的关键就是封装不同的方法，然后调用其
阅读全文
摘要：单例模式 单例模式的定义： 保证一个类只有一个实例，并提供一个访问它的全局访问点 通过一个简单的例子来了解单例模式的作用： class Div { constructor() { return document.createElement("div"); } } btn.addEventListen
阅读全文
摘要：一些比较新的运算符 ?? 该操作符算是||的加强版，它也和|| &&两个操作符一起被归为二元逻辑运算符，||只会在左边的值为假值时返回右边的值，而??是在左边的值为undefined或者null时才会返回右边的值，简单来说??是判断有没有值，||是判断真假。 这个操作符在根据对象的属性设置值时就很好
阅读全文
摘要：逗号操作符 这是个很容易被忽略的操作符，然而逗号操作符有个被忽略的很神奇的功能 在MDN上是这样介绍这个操作符的： **逗号操作符** 对它的每个操作数求值（从左到右），并返回最后一个操作数的值。 看看这段代码： function number() { console.log("use me");
阅读全文
摘要：JS里的异步构造函数 众所周知，Js的构造函数是不能加上async/await来实现异步实例化的，一般当需要一个对象的属性是异步的结果时可以这样写： //! 一个需要指定时间后返回的异步函数 function delay(timeout) { return new Promise((resolve)
阅读全文
浙公网安备 33010602011771号