10 2022 档案
摘要：上一节主要学习了提高复用性的几种设计模式，本节学习方法的可扩展性以及怎么更好的扩展方法。 方法是组成程序的基础单元，基础单元的可扩展性是整个程序的可扩展性保障，可扩展性顾名思义是保证代码、程序能够更好的进行扩展。再厉害的程序员都会写bug，再好的产品经理都会改需求，在遇到需求变更的时候不能总是跟产品
阅读全文
摘要：上一节我们学习了模块层面提高可扩展性的几种设计模式，本节主要学习如何使用设计模式来提高代码质量。 提高代码质量的目的？ 高质量代码是一切性能的基础，无论是可扩展性还是复用性，必须建立在一个高质量代码的基础上，这样方便后续的一切操作 方便他人阅读，能理解代码的目的 什么是代码质量？ 代码整洁就意味着我
阅读全文
摘要：上一节主要学习了方法的可扩展性以及怎么更好的扩展方法，本节主要学习模块的可扩展性以及怎么更好的扩展模块。 我们可以把任何一个程序看成是模块+组织模块沟通，模块是组成程序的一个单元，各种各样的模块加上它们的沟通就组成了我们的程序，这个过程很像我们生活中开一家餐馆，我们需要厨师模块、服务员模块、点餐模块
阅读全文
摘要：上一节主要学习创建型的三种设计模式是怎么使用的。如何利用创建型设计模式来指导我们更好的封装代码更好的创建对象，本节主要学习怎样利用设计模式来提高代码复用性。 提高可复用性的目的？ 为什么要提高可复用性？提高可复用性能带来什么好处？ 遵循DRY原则：英文是dont repeat yourself，这个
阅读全文
摘要：上一节我们主要学习了使用设计模式来写代码的指导思想以及设计模式的分门别类，本节主要学习创建型的三种设计模式是怎么使用的。如何利用创建型设计模式来指导我们更好的封装代码更好的创建对象。 为什么要封装？封装能带给我们什么好处？ 定义变量不会污染外部：封装的首要目的是保护我们的变量不会被外部所污染，也不会
阅读全文
摘要：准备工作 node版本v14.18.0以上 将npm更新至新版本（npm install -g npm@latest） 一、注册npm账号 注册地址：https://www.npmjs.com/ 二、初始化项目 新建项目目录，使用npm init命令创建package.json文件，按照提示填入初始
阅读全文
摘要：一、问题 今天突然被同事问到一个问题，以下代码怎么输出： Promise.all([ new Promise(res => res(0)), new Promise((res, rej) => rej(1)) ]).then(v => { console.log('then 1 ', v) }).c
阅读全文
摘要：一、什么是Event Loop Event Loop指的是计算机系统的一种运行机制，在JavaScript中就是采用Event Loop这种机制来解决单线程带来的问题。 1.1. 关于JavaScript为什么要设计成单线程？ 这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览
阅读全文
摘要：一、背景 项目中偶然遇到有人在computed中这样写代码： computed: { getName() { return function () { return "张三"; }; }, }, 这段代码看似没什么毛病，实际上它违背了computed的设计初衷，computed设计的原因是为了简化模
阅读全文
摘要：上一节我们学习了Vue中异步渲染队列的原理，本节我们沿着响应式图谱学习下一个部分——渲染页面。 如上图所示，Vue会根据之前得到的变更通知生成一颗新的Virtual DOM树，然后再将新的Virtual DOM树和旧的Virtual DOM树进行diff patch操作。 本节的目标是学习Virtu
阅读全文
摘要：本节需要准备知识点：Event Loop、Promise 关于Event Loop介绍参考阮一峰老师的文章： http://www.ruanyifeng.com/blog/2013/10/event_loop.html https://www.ruanyifeng.com/blog/2014/10/
阅读全文
摘要：一、什么是响应式？ 在了解什么是响应式之前我们现来看一段代码演示 let x; let y; let f = n => n * 100 x = 1; y = f(x); console.log(y); // 100 x = 2; y = f(x); console.log(y); // 200 x
阅读全文
摘要：在Vue中提供了use方法来安装插件，那么Vue插件的原理是什么呢？ 一、Vue.use use方法官方描述如下图： 也就是说Vue.use()方法接收一个函数或者提供install方法的对象作为参数（必须提供install方法），如果传入的参数是函数，这个函数会被当做install方法。 文档：h
阅读全文
摘要：这个问题分两种情况： new Vue({el: '#app'}) 单文件组件template中根元素只能有一个 要解释这个问题，最好的方式就是直接看源码 一、Vue实例 一个vue实例的创建大致分为如下两个步骤 以vue2.5.2版本为例： 调用_init方法初始化事件和生命周期，对options做
阅读全文
摘要：前面三个小节我们根据下图分析了Vue整个响应式系统的闭环，这一节我们直接来看Vue源码。 前面小节的链接在这里： Vue—关于响应式（一、依赖收集原理分析） Vue—关于响应式（二、异步更新队列原理分析） Vue—关于响应式（三、Diff Patch原理分析） 一、Vue响应式系统分析 1.1. 简
阅读全文
摘要：一、代码与设计模式 1.1. 我们写代码到底是在写什么？ 大家可以把自己的项目或者是代码理解成我们就是在编写模块，并且设计它们之间的沟通。其实一个项目或者功能我们都可以理解成它们就是通过模块和模块之间的互相沟通来完成的。所以说设计模式，说白了就是在帮助我们更好的去设计模块，并且更好的组织它们之间的沟
阅读全文
