娄兄-优快云博客

原创 Node.js - koa-router

学习目标：1、koa-router的基本使用2、策略模式（输入谁执行谁)3、如何手动实现koa-router4、实现静态文件读取koa-statickoa-router的基本使用const Koa = require('koa')const app = new Koa()const router = require('koa-router')()const path = require('path')// 解析request的body的功能(post请求)const bodyParse

2021-08-12 10:43:23 475

原创 Node.js - Koa

思考几个问题：问题1: koa 框架存在的理由是什么？原生http存在什么问题？问题2: koa中间件机制原理什么？问题3: koa实现原理是什么？问题4: 如何手写一个简单koa?koa 框架存在的理由是什么？原生http存在什么问题原生http操作：复杂的逻辑处理处在过多的if else、并且原生api操作不够灵活等。Koa 是一个新的 web 框架，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。koa是Express的下一代基于Node.

2021-08-08 11:24:32 293

原创 node.js -自定义cli工具

自定义cli 工具参照vue-cli的思路，将项目模板独立发布到git上，然后通过脚手架工具下载下来，经过与脚手架的问答式交互获取新项目的信息，并将交互的输入作为元信息渲染项目模板，最终得到项目的基础结构。然后自动为项目生成依赖，并启动项目。步骤：创建项目mkdir vue-auto-lfjcd vue-auto-lfjnpm init -ynpm i commander download-git-repo ora handlebars figlet clear chalk open inqu

2021-08-04 21:15:03 411

原创 Node.js ~ 基础篇

1、node 异步非阻塞 I/O同步、异步指的是某某方法、调用的某某特性。同步就是在发出一个功能调用时，在没有得到结果之前，该调用者就不会返回, 异步就是调用发出后，调用者不能立刻得到结果，但当该异步功能完成后，通过状态、通知或回调来通知调用者。阻塞、非阻塞：描述的是进程的状态、进程的五大状态：创建、就绪、运行、阻塞、终止。所以我们讲的阻塞非阻塞，一定是指进程，当一个进程在发起一个调用的时候，如果这个进程从运行态变成阻塞态，那就说明这是一次阻塞调用，反之就是非阻塞。比如王大爷和开水壶的故事阻塞

2021-08-02 16:24:48 152

原创 vue3 的核心diff梳理

vue3 核心difff分类：①掐头（从前向后diff）②去尾 (从后向前diff)③ 如果老节点是否全部patch，新节点没有被patch完,创建新的vnode④ 如果新节点全部被patch，老节点有剩余，那么卸载所有老节点。⑤ 不确定的元素（这种情况说明没有patch完相同的vnode ） => 这里才是diff的核心前四种类似vue2, 第五种才是vue3 diff的核心变化vue3 核心不确定因素的diff梳理**vue3 - diff不确定因素的逻辑梳理**假设新旧

2021-07-07 19:29:32 517

原创 Vue3响应式原理 mini版

实现原理是：建立proxy对象，获取数据触发proxy对象的get, 进行track依赖收集，修改数据触发proxy对象的set, 进行trigger派发更新。1、定义相应数据creareApp2、定义响应式数据的dom更新函数effect ,通过 effect 声明依赖响应式数据的函数cb ( 例如视图渲染函数render函数)，并执行cb函数，执行过程中，会触发响应式数据 getter3、在响应式数据 getter中进行 track依赖收集：建立数据&cb 的映射关系存储于 targ.

2021-05-25 21:35:40 247

原创响应式原理： vue2 vs vue3

vue2的方式// 拦截每个key，从而可以侦测数据变化function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { return val }, set(v) { val = v update() } }) }function update() { console.log(obj.foo);}const obj = {} defineReactive(o

2021-05-25 20:06:24 211

原创 vue3 和vue2 使用ref操作dom、以及数组循环中的ref操作dom

vue3 在v-for中操作dom最佳实践<template> <div class="rain"> <div v-for="(item, index) in 8" :key="index" :ref="el => rain[index] = el" :data-set=" 'data' + index" /> <div ref='single'></div> &lt

2021-05-14 11:07:52 6158 2

原创 vue3 全局注册app.config.globalProperties，如何处理getCurrentInstance 上下文线上环境报错

vue3挂载全局属性和方法，使用app.config.globalProperties，但是在组件中获取全局上下文的时候getCurrentInstance会在线上环境报错。搜索了一遍，看了好多文章，都是在本地环境getCurrentInstance有用，线上环境报错，所以一切的一切还是去官网查找，得到最后的完美结果。线上环境正确使用：const instance = getCurrentInstance() console.log('instance???', instance.appConte

2021-03-29 21:21:19 14707

原创 react实现一个周日历表

react实现一个周日历表最近taro写小程序，接到需求任务，搞一个周日列表来记录每天的课程信息。来吧二话不说就干。主要思路就是：拿到今天是星期几，然后以今天为中心来计算过去的时间和未来的时间，点击上一周和下一周以7的倍数进行换算：代码块：借鉴了jquery的一个插件，活学活用。还是很开森！...

2020-03-28 14:02:41 2405 4

原创 scrollIntoView实现滚动条平滑滚动：置顶、置底、tab联动

scrollIntoView实现滚动条平滑滚动：置顶、置底、tab联动其实就是 overflow: auto; height: 1000px; // 核心就是给滚动的盒子父级设置一个高度，否者滚动监听失效动效来一张：html部分：js部分：css:...

2020-03-26 21:48:17 1548

weixin_43273755的博客