- 博客(17)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 工程化—关于npm（如何发布自己的npm包）
准备工作node版本v14.18.0以上将npm更新至新版本（npm install -g npm@latest）一、注册npm账号注册地址：https://www.npmjs.com/二、初始化项目新建项目目录，使用npm init命令创建package.json文件，按照提示填入初始信息。如模块名称：mikey-npm-test（只能是小写）初始版本号选择：v1.0.0模块名称需遵循相关政策要求：https://www.npmjs.com/policies，不能够与已有NPM模块名
2022-10-21 09:53:54
416
1
原创 设计模式—关于提高可扩展性（方法层面）的学习（更加从容的应对需求变更）
上一节主要学习了提高复用性的几种设计模式，本节学习方法的可扩展性以及怎么更好的扩展方法。方法是组成程序的基础单元，基础单元的可扩展性是整个程序的可扩展性保障，可扩展性顾名思义是保证代码、程序能够更好的进行扩展。再厉害的程序员都会写bug，再好的产品经理都会改需求，在遇到需求变更的时候不能总是跟产品硬怼，一个好的程序员需要随时做好改需求的准备，不要遇到问题就想着砍死产品经理，先思考是不是因为自己的代码可扩展性方面没做好，所以导致改需求才这么难。改代码的时候难免会发现之前的代码思考的不够全面，在这个过程中写第
2022-10-21 09:48:58
488
原创 设计模式—关于如何提高代码质量（远离脏乱差，人人见了都要夸）
上一节我们学习了模块层面提高可扩展性的几种设计模式，本节主要学习如何使用设计模式来提高代码质量。提高代码质量的目的？高质量代码是一切性能的基础，无论是可扩展性还是复用性，必须建立在一个高质量代码的基础上，这样方便后续的一切操作方便他人阅读，能理解代码的目的什么是代码质量？代码整洁就意味着我们的代码无论是命名、缩进以及各个方面比较符合规范，没有一些多余、累赘的代码结构比较规整，没有漫长的结构，比如没有很长的if else分支、很长的赋值语句阅读起来好理解，也就是说我们的命名要符合语义化，代
2022-10-21 09:47:02
493
原创 设计模式—关于提高可扩展性（模块层面）的学习（更加从容的应对需求变更）
上一节主要学习了方法的可扩展性以及怎么更好的扩展方法，本节主要学习模块的可扩展性以及怎么更好的扩展模块。我们可以把任何一个程序看成是模块+组织模块沟通，模块是组成程序的一个单元，各种各样的模块加上它们的沟通就组成了我们的程序，这个过程很像我们生活中开一家餐馆，我们需要厨师模块、服务员模块、点餐模块等等，这些模块它们之间互相沟通，点餐模块告诉服务员模块，服务员模块再告诉厨师模块，厨师模块做好了之后再告诉服务员模块，这样沟通方式就组成了餐馆的工作方式，对于程序也是一样。怎么做模块？这里提供一个设计模块的思
2022-10-21 09:45:09
321
原创 设计模式—关于提高可扩展性（模块层面）的学习（更加从容的应对需求变更）
上一节主要学习了方法的可扩展性以及怎么更好的扩展方法，本节主要学习模块的可扩展性以及怎么更好的扩展模块。我们可以把任何一个程序看成是模块+组织模块沟通，模块是组成程序的一个单元，各种各样的模块加上它们的沟通就组成了我们的程序，这个过程很像我们生活中开一家餐馆，我们需要厨师模块、服务员模块、点餐模块等等，这些模块它们之间互相沟通，点餐模块告诉服务员模块，服务员模块再告诉厨师模块，厨师模块做好了之后再告诉服务员模块，这样沟通方式就组成了餐馆的工作方式，对于程序也是一样。怎么做模块？这里提供一个设计模块的思
2022-10-21 09:41:14
422
原创 设计模式—关于如何提高代码复用（再也不用担心重复代码多啦）
上一节主要学习创建型的三种设计模式是怎么使用的。如何利用创建型设计模式来指导我们更好的封装代码更好的创建对象，本节主要学习怎样利用设计模式来提高代码复用性。提高可复用性的目的？为什么要提高可复用性？提高可复用性能带来什么好处？遵循DRY原则：英文是dont repeat yourself，这个原则的意思是说要时刻记住去检查你代码之中是否有重复的代码，如果有，把它作为一个公共部分抽象出来。减少代码量，节省开销：遵循了DRY原则之后我们的代码量就会减少，内存开销也会逐渐减少，因为没有重复的代码块了。
2022-10-21 09:33:09
1713
原创 设计模式—关于如何更好的封装与创建对象
上一节我们主要学习了使用设计模式来写代码的指导思想以及设计模式的分门别类，本节主要学习创建型的三种设计模式是怎么使用的。如何利用创建型设计模式来指导我们更好的封装代码更好的创建对象。为什么要封装？封装能带给我们什么好处？定义变量不会污染外部：封装的首要目的是保护我们的变量不会被外部所污染，也不会污染外部的变量，在大型项目中很难保证变量名不和别人的变量名起冲突，所以说这点很重要。能够作为一个模块调用：除了上面那点之外，良好的封装才能保证我们的代码作为独立的模块与外部沟通，把程序变成模块架构中的基础就是
2022-10-21 09:21:24
180
原创 Promise—关于catch（你真的了解catch的执行顺序吗）
一、问题今天突然被同事问到一个问题，以下代码怎么输出：Promise.all([ new Promise(res => res(0)), new Promise((res, rej) => rej(1))]).then(v => { console.log('then 1 ====== ', v) }).catch(e => { console.log('catch 1 ====== ', e)})Prom
2022-10-20 11:43:09
2099
原创 Node—关于Event Loop的学习笔记
一、什么是Event LoopEvent Loop指的是计算机系统的一种运行机制，在JavaScript中就是采用Event Loop这种机制来解决单线程带来的问题。1.1. 关于JavaScript为什么要设计成单线程？这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，假如有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知
2022-10-20 11:37:52
226
原创 Vue—关于computed（在计算属性中return函数的问题）
一、背景项目中偶然遇到有人在computed中这样写代码：computed: { getName() { return function () { return "张三"; }; },},这段代码看似没什么毛病，实际上它违背了computed的设计初衷，computed设计的原因是为了简化模板中又长又臭的计算逻辑，使模板代码看上去更加简洁，容易维护，并且计算属性会基于响应式依赖进行缓存，从而优化性能。二、计算属性介绍关于计算属性官方的描述如
2022-10-20 11:35:24
3348
1
原创 Vue—关于响应式（三、Diff Patch原理分析）
上一节我们学习了Vue中异步渲染队列的原理，本节我们沿着响应式图谱学习下一个部分——渲染页面。如上图所示，Vue会根据之前得到的变更通知生成一颗新的Virtual DOM树，然后再将新的Virtual DOM树和旧的Virtual DOM树进行diff patch操作。本节的目标是学习Virtual DOM以及Vue是如何对新旧两颗Virtual DOM树进行diff patch算法。前面小节的链接在这里：Vue—关于响应式（一、依赖收集原理分析）Vue—关于响应式（二、异步更新队列原理分析）
2022-10-20 11:34:01
405
原创 Vue—关于响应式（二、异步更新队列原理分析）
本节需要准备知识点：Event Loop、Promise关于Event Loop介绍参考阮一峰老师的文章：http://www.ruanyifeng.com/blog/2013/10/event_loop.htmlhttps://www.ruanyifeng.com/blog/2014/10/event-loop.html关于Promise：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objec
2022-10-20 11:32:12
244
原创 Vue—关于响应式（一、依赖收集原理分析）
一、什么是响应式？在了解什么是响应式之前我们现来看一段代码演示let x;let y;let f = n => n * 100x = 1;y = f(x);console.log(y); // 100x = 2;y = f(x);console.log(y); // 200x = 3;y = f(x);console.log(y); // 300代码示例中，变量y依赖变量x进行求值，但是我们会发现每一次变量x重新赋值时都要手动对y进行求值，存在大量的重复模板，因此，指
2022-10-20 11:27:54
576
原创 Vue—关于插件（源码级别的插件分析+实践）
在Vue中提供了use方法来安装插件，那么Vue插件的原理是什么呢？一、Vue.useuse方法官方描述如下图：也就是说Vue.use()方法接收一个函数或者提供install方法的对象作为参数（必须提供install方法），如果传入的参数是函数，这个函数会被当做install方法。文档：https://cn.vuejs.org/v2/api/#Vue-useVue2.6.11版本use源码如下：这段源码很好理解，initUse函数中给Vue添加了一个静态方法use，use方法接收一个参数p
2022-10-20 11:23:39
365
原创 Vue—关于实例中为什么只能有一个根元素？
这个问题分两种情况：new Vue({el: '#app'})单文件组件template中根元素只能有一个要解释这个问题，最好的方式就是直接看源码一、Vue实例一个vue实例的创建大致分为如下两个步骤以vue2.5.2版本为例：调用_init方法初始化事件和生命周期，对options做选项合并看传进来的参数有没有el选项，如果有则调用$mount来挂载模板_init方法在Vue的构造函数中被调用_init方法的创建在initMixin中，可以看到在Vue的原型对
2022-10-20 11:21:11
249
原创 Vue—关于响应式（四、深入学习Vue响应式源码）
前面三个小节我们根据下图分析了Vue整个响应式系统的闭环，这一节我们直接来看Vue源码。前面小节的链接在这里：Vue—关于响应式（一、依赖收集原理分析）Vue—关于响应式（二、异步更新队列原理分析）Vue—关于响应式（三、Diff Patch原理分析）一、Vue响应式系统分析1.1. 简单回顾回顾一下我们自己的响应式实现过程：首先将data通过Object.defineProperty处理成可响应的数据（getter/setter）【读】数据时会触发getter调用Dep.depend
2022-10-20 10:32:56
410
原创 设计模式—关于概论部分的学习
一、代码与设计模式1.1. 我们写代码到底是在写什么？大家可以把自己的项目或者是代码理解成我们就是在编写模块，并且设计它们之间的沟通。其实一个项目或者功能我们都可以理解成它们就是通过模块和模块之间的互相沟通来完成的。所以说设计模式，说白了就是在帮助我们更好的去设计模块，并且更好的组织它们之间的沟通。1.2. 设计模式在代码中扮演的角色是什么？帮助我们更好的组织模块：通过一些设计模式，组织模块间的组成结构和模块划分帮助我们更好的设计沟通：有的设计模式它的目的就是来帮助我们设计模块间如何沟通提高
2022-10-20 10:16:38
148
空空如也
怎么把一个动态网页作为另一个网页页面的背景
2017-06-10
TA创建的收藏夹 TA关注的收藏夹
TA关注的人