尤雨东-优快云博客

原创如何优雅的解决小程序组件(component)的插槽(slot)没有默认值的情况？

如何优雅的解决小程序组件(component)的插槽(slot)没有默认值的情况？有关插槽-想给插槽增加默认值的优雅解决方式componentslot插槽默认值优雅解决

2022-01-04 16:29:30 3453 5

原创 2022年了--你还不会手写promise? 完成promise的所有实现

手写promise，将静态方法和实例方法都进行了一遍实现。也可以实现链式调用。/* * @Author: 毛毛 * @Date: 2022-01-03 10:17:47 * @Last Modified by: 毛毛 * @Last Modified time: 2022-01-03 10:17:47 *//** * * 手写promise * @class MaoPromise */class MaoPromise { /** * 正在执行的状态 *

2022-01-03 10:20:20 3049 5

原创 JavaScript之令人费解的this

文章目录你不知道的thisthis的那些绑定规则默认绑定全局调用全局函数函数内调用全局函数隐式绑定显示绑定全局函数显示绑定this对象的方法(函数)显示绑定thisnew 绑定特殊的this绑定规则忽略显示绑定间接函数引用ES6的箭头函数 arrow function你不知道的this学会使用JavaScript只需要三天，但是想学好JavaScript需要三年。在js中，最让人头疼的存在莫过于，闭包，作用域，this指向问题，以及异步等等。可以说：前端人员很多人才开始都没有真的弄懂this。th

2021-11-15 09:32:49 2565 7

原创 TypeScript中的“as const”是什么意思？类型断言！

as const 也是类型断言的一种这被称为const断言。const断言告诉编译器为表达式推断出它能推断出的最窄或最特定的类型。如果不使用它，编译器将使用其默认类型推断行为，这可能会导致更广泛或更一般的类型。请注意，它被称为“断言”，而不是“强制转换”。术语“cast”在TypeScript中通常是要避免的；当人们说“cast”时，它们通常意味着某种可以在运行时观察到的效果，但是TypeScript的类型系统，包括类型断言和const断言，从发出的JavaScript中被完全删除。因此，在运行时，使用

2021-09-26 00:04:30 7188 3

原创微信小程序一星期入门-完结篇--电影详情页的制作

文章目录微信小程序入门(七)--入门篇完结实现电影页面按钮的更多功能获取数据more-movie页面布局movies页面更多按钮绑定事件更多按钮的事件更多页面onLoad的更改实现movies电影页面的搜索功能注册组件使用上滑加载更多电影数据加载更多电影数据提示用户数据请求中下拉刷新数据开启页面的下拉刷新监听用户下拉动作实现下拉刷新增强阅读页面效果配置标题与动态配置标题配置标题动态配置标题电影详情页组件的独立性对post组件进行改进发射事件接收事件文章页面问题修正方式一方式二电影详情页的制作给自定义组件mo

2021-09-02 08:20:39 9481 8

原创 Java实现优先队列--三种优先队列

优先队列普通的队列是一种先进先出的数据结构，元素在队列尾追加，而从队列头删除。在某些情况下，我们可能需要找出队列中的最大值或者最小值，例如使用一个队列保存计算机的任务，一般情况下计算机的任务都是有优先级的，我们需要在这些计算机的任务中找出优先级最高的任务先执行，执行完毕后就需要把这个任务从队列中移除。普通的队列要完成这样的功能，需要每次遍历队列中的所有元素，比较并找出最大值，效率不是很高，这个时候，我们就可以使用一种特殊的队列来完成这种需求，优先队列。优先队列按照其作用不同，可以分为以下两种：

2020-08-08 17:35:42 1849 2

原创 React-fiber基础之requestAnimationFrame和requestIdleCallback

在浏览器每次渲染页面时，我们会反馈（响应用户的输入），页面的拖拽，浏览器大小的改变，js主线程的任务，微任务宏任务，requestAnimationFrame回调，浏览器进行绘制，如果这些事情做完以后，还有剩余时间，我们认为这就是当前渲染帧的空闲时间，这个时间浏览器可以交给我们开发者（js主线程执行一些优先级不高的任务）。排序的回调函数被触发的时间。可以这样认为，我们使用这个api了，那么浏览器在当前帧还有剩余时间，那么就会把执行权交给我们，但是我们也需要在剩余时间结束之前把执行权还给浏览器。

2022-11-21 17:43:08 1366

原创闭包“陷阱” 私有对象真的没办法修改属性吗？

今天在网上看见一道非常妙的题，以至于我不得不感慨一下，自己脑子都转不过来。

2022-10-31 22:24:16 708

原创 redux的学习以及初探redux的API实现

使用方法可以创建一个store，该函数的参数是reducer和initialState。常见的三个方法：我们就以计数器案例来学习createStore的实现原理首先：我们需要创建一个createStore函数，接收两个参数：纯函数参数以及初始化状态接下来我们需要定义三个函数：也就是上面我们说的，常用的三个函数。getState函数就是返回当前最新的状态，没什么好说的。派发一个动作来更新当前的state：的参数是一个监听函数，在state的值更新以后调用。所以我们需要一个数组来记录保存的listen

2022-07-10 17:14:12 617

原创 JavaScript面试题更新中......

JavaScript共有⼋种数据类型，分别是 Undefined、Null、Boolean、Number、String、 Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型：这些数据可以分为原始数据类型和引⽤数据类型：两种类型的区别在于存储位置的不同：堆和栈的概念存在于数据结构和操作系统内存中，在数据结构中：在操作系统中，内存被分为栈区和堆区：4. null和undefined区别首先 Undefined 和 Null 都是基本数据类型，这两个基本

2022-06-15 16:26:00 366 2

原创 react学习之旅

实现了：代码仓库：地址。代码中注释还是偏多一些，对强迫症患者看着可能不是很舒服。克隆代码观看效果最佳。更改脚本把package.json文件的脚本都加上cross-env DISABLE_NEW_JSX_TRANSFORM=true。表示禁用新版的jsx转换器。react17以后采用的是新版的转换器。这里学习阶段可以使用经典的jsx转换器。安装 cross-env合成事件和批量更新批量更新在react中，能被react管理的方法更新是异步的，批量更新的在react管理不到的地方更新是同

2022-06-10 15:29:22 1030 3

原创玩转vue面试题系列5 结合源码分析面试题

文章目录22. `v-if`和`v-for`那个优先级高23. `v-if`,`v-model`,`v-for`的实现原理是什么v-model24. `Vue`中的`slot`是如何实现的？什么时候使用它？25. `Vue.use`是干什么的？原理是什么？26. `Vue`事件修饰符有哪些？及其实现原理是什么？27. `Vue`中的 `.sync` 修饰符的作用，用法及其实现原理28. 如何理解自定义指令29. `keep-alive`平时在哪里使用？原理是什么30. 组件中写`name`选项有哪些好处及作

2022-05-03 14:04:32 599

原创玩转vue面试题系列4 结合源码分析面试题

16. 谈谈对Vue组件化的理解组件的优点：组件的复用可以根据数据渲染对应的组件。把组件相关的内容放在一起，方便复用，方便维护。合理的规划组件，可以做到更新视图的时候是组件级别的更新，不会过于消耗性能。vue中是如何处理组件的？需要使用API，Vue.extend。根据用户传入的对象生成一个组件的构造函数。根据组件产生对应的虚拟节点。我们会在生成虚拟节点前，在组件的data中加入一个hook。(data:{hook:{init(){}}})做组件初始化，将虚拟节点转换为真实节点（组件的

2022-05-01 13:41:09 729 1

原创前端面经之html5相关面经收集与总结

文章目录HTML面经1. src和href的区别2. 对HTML语义化的理解3. DOCTYPE(⽂档类型) 的作⽤4. script标签中defer和async的区别5. 常⽤的meta标签有哪些6. HTML5有哪些更新6.1 语义化标签6.2 媒体标签6.3 表单6.4 进度条、度量器6.5 DOM查询操作 ^6.6 Web存储7. img的srcset属性的作⽤？8. ⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？9. 说⼀下 web worker10. HTML5的离线储存怎么使

2022-05-01 10:00:00 739 3

原创初识前端函数式编程

文章目录函数式编程First-class Function 头等函数函数可以赋值给一个变量函数可以作为参数闭包纯函数纯函数的缓存缓存函数的实现柯里化组合pointfree容器pointed 容器函子maybeEither函子Ap函子Monad函子IO函子与副作用Task函子函数式编程function add(a,b){return a + b;}console.log(add(1,2));函数，其实是数学上的一种概念： y = f(x)函数式编程，本质上就是一直映射关系。参数是输入，返回值

2022-04-27 20:56:04 1001

原创玩转vue面试题系列3 结合源码分析面试题

文章目录7. `Vue.mixin`的使用场景和原理8. `Vue`组件data为什么必须是个函数？9. `nextTick`在哪里使用？使用原理？10. `computed`和`watch`的区别11. `Vue.set`方法是如何实现的12. `Vue`为什么需要虚拟dom13. `Vue`中`diff`算法原理14. 既然`Vue`通过数据劫持可以精准探测数据变化，为什么还需要虚拟dom进行`diff`检测差异15. 请说明`Vue`中key的作用和其原理，谈谈你对它的理解上文：玩转Vue面试题系

2022-04-22 19:32:21 1831

原创玩转Vue面试题系列结合源码分析(2)

文章目录`Vue`中如何检测数组变化？`Vue`中如何进行依赖收集？如何理解`vue`中模板编译原理`Vue`生命周期钩子是如何实现的生命周期的价值`Vue`的生命周期方法有哪些？一般在哪一步发送请求及其原因上文：vue面试题及其结合源码分析Vue中如何检测数组变化？vue中检测数组的变化并没有使用defineProperty，因为修改索引的情况不多（且直接使用defineProperty会浪费大量性能，如果数组一万项，我们需要拦截一万次？）所以在vue中是重写数组的变异方法来实现的响应式（函数劫持）

2022-04-20 23:09:18 1002

原创 vue面试题及其结合源码分析之请说一下 vue响应式数据的理解

Vue面试题结合源码请说一下 vue响应式数据的理解Vue中如何检测数组变化？Vue中如何进行依赖收集？如何理解Vue中的模板编译原理Vue生命周期钩子是如何实现的Vue的生命周期方法有哪些？一般在哪一步发送请求及其原因Vue.mixin的使用场景和原理Vue组件data为什么必须是个函数？nextTick在哪里使用？使用原理？computed和watch的区别Vue.set方法是如何实现的Vue为什么需要虚拟domVue中diff算法原理既然Vue通过数据劫持可以精准探测数

2022-04-19 23:48:39 782

原创搭建vue源码的阅读环境

源码阅读安装源码依赖 npm installnpm run dev是否可以打包成功代码结构：bechmarks：该目录是做性能测试的dist：最终打包的结果都放到了该目录examples：官方案例flow：类型检测（vue2使用，类似于ts，但是没有ts好用）packages：放的都是一些源代码包，模块。（vue源码中包含了weex）scripts：所有打包的脚本都放在这里scr：源代码目录scr目录：compiler：模板编译core：vue2核心代码包platfor

2022-04-18 16:59:08 661

原创 mini-vue之组件的实现和渲染流程以及局部和全局组件建立的联系

实现组件Vue中，一般一个项目只有一个根组件，也就是 new Vue产生的app。但是一个页面不可能只由一个组件构成，很明显我们需要实现自定义组件。vue中提供了两种自定义组件的方式：全局组件局部组件组件的使用流程：在任意一个组件中，都可以使用其他组件。当我们在一个组件中使用其他组件的时候，会先去组件内部的局部组件中找是否定义过该组件，如果定义了，则直接使用该局部组件；如果没有定义局部组件，则去全局组件中寻找（和js中的原型，原型链很像了）。所以vue内部很可能也是利用类似于继承的这种模型

2022-04-18 14:16:32 657

原创 vue的diff算法是如何实现的

diff算法diff算法：在之前的更新中，每次数据更新，在更新视图时，都是完全产生新的虚拟节点，通过新的虚拟节点生成真实节点，用新生成的真实节点替换所有的老节点。这种方法在页面元素很少的情况下性能销毁倒是无所谓，但是在页面元素特别多情况下，很明显是消耗很大性能的。哪怕我只是修改了一个dom的文本内容，也都需要重新生成一遍所有节点。（因为现在只有一个组件）第一次渲染的时候，我们会产生虚拟节点，第二次更新我们也会调用render方法产生新的虚拟节点，我们需要对比两次的vnode，找到需要更新的部分进行更

2022-04-17 17:31:55 1079

原创实现mini-vue之 computed，watch ，数组响应式的实现

computed续上文—：有关vue源码的简单实现实现一个属于自己的min-vue本文实现：computedwatcharray的响应式劫持计算属性：计算属性：依赖的值发生改变才会重新执行用户的方法计算属性需要维护一个dirty属性。而且在默认情况下，计算属性不会立刻执行，而是在用户取值的时候才会执行。计算属性使用的两种方式：computed: { /** * 计算属性：依赖的值发生改变才会重新执行用户的方法计算属性需要维护一个dirty属性

2022-04-16 20:39:53 1042

原创有关vue源码的简单实现实现一个属于自己的min-vue

vue-study自己实现的mini-vue仓库建议克隆代码观看，效果更佳。实现了Vue实现了响应式数据实现了模板编译实现了ast转renderrender执行生成虚拟dom虚拟dom转真实dom渲染页面响应式数据和页面渲染结合数据改变可自动更新视图实现同步更新数据，异步更新视图优雅降级实现了mixin，目前只支持生命周期的合并代码中注释很多，觉得不习惯的可以一边看一边删除多余的注释。vue的常见源码实现rollup环境搭建安装rollup及其插件npm i

2022-04-15 22:20:32 1088

原创 JavaScript的数据类型检测的四种方式详解 typeof instanceof constructor toString原理

JavaScript数据类型检测对于确定一个js变量的类型，我们大概都知道几种方式。对于弱语言来说，检测其正确的类型是一件不是特别容易的事情。那么我们有几种方式来检查一个js变量的类型？**从大的方向来说，js的数据类型分为基本数据类型和引用数据类型。**对于js的基本类型和引用类型是那些，这里就不在赘述。此外，在ES6新增的 symbol基本类型，ES7新增bigint大数类型，也是基本类型。一般获取一个js类型的方式，大概应该是四种(我目前只知道这四种)typeof **instanceo

2022-04-07 18:57:20 1003

原创使用ts写一个严格类型推断的防抖函数--支持延迟执行，立即执行，成功失败回调和promise返回值

TS版的防抖函数(严格的类型推断)export function isFunction(obj: any): obj is Function { return typeof obj === "function";}type fnType<T> = (...args: T[]) => any;type successCallbackType<T = any> = (...args: T[]) => any;type failCallbackType<T

2022-04-04 22:14:07 3254 1

原创 webpack5.x性能优化之代码分包配置文件分离多入口 SplitChunks cacheGroups runtimeChunk dynamic import(动态导入) 懒加载魔法注释

webpack优化文章目录webpack优化代码分离认识代码分离多入口起点Entry Dependencies(入口依赖)SplitChunkschunks其他的splitChunks属性(很少手动配置)minSize和maxSizeminChunkscacheGroups默认缓存组缓存组优先级maxAsyncRequestsnamechunkIdsoptimization. runtimeChunk动态导入(dynamic import)动态导入的文件命名代码懒加载魔法注释魔法注释：prefetch预获

2022-03-31 14:29:00 7513 1

原创 webpack5.x 各种开发常见配置大汇总 loader plugin devServer proxy babel 懒加载

webpack学习之旅文章目录webpack学习之旅webpack基础打包认识webpack脚手架依赖webpackwebpack是什么Vue项目加载的文件有哪些webpack使用前提webpack的安装webpack的打包方式1. 默认打包2. 创建局部的webpack3. Webpack配置文件4. 指定配置文件5. Webpack的依赖图webpack打包其他文件1. css-loader的使用css-loader的使用方案内联方式CLI方式loader配置方式(重点)2. style-loader

2022-03-29 22:29:42 1769

原创 webpack结合babel使用core-js和regenerator-runtime进行polyfill的时候报错踩坑

core-js版本问题默认polyfill的时候，使用的是core-js的2版本，这是默认值，这时候可能报错。如下：此时，只需要在预设的babel配置文件中，指定core-js的版本为3.x即可。module.exports = { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", // 指定 corejs的版本默认不指定的情况下使用的是2版本 co

2022-03-25 18:11:16 1644

原创原生js事件 mousedown,mouseup,mousemove结合实现元素拖拽

拖拽要注意解决鼠标焦点丢失问题鼠标移动过快，会导致鼠标移出盒子，出现盒子和鼠标不同步，且在盒子外鼠标抬起，发现鼠标再次划入盒子，不点击鼠标盒子也仍然还会拖拽。IE/火狐把盒子和鼠标绑在一起调用元素的 setCapture()方法绑定 releaseCapture() 解绑谷歌鼠标不管移动多快都跑不出浏览器所以 mousemove/mouseup 绑定给 window核心代码<!DOCTYPE html><html lang="en"><head&

2022-03-25 09:50:53 1668

原创 webpack5的新特性模块资源asset 打包图片资源的坑

webpack在webpack5出来了资源模块以后，可以替代以前的 file-loader，url-loader，raw-loader等。当我们在使用file-loader等处理图片等资源的时候，导入资源时：如果采用的是cmd规范，也就是require(‘资源’)的时候，发现是需要取出default属性的值，才是真正的资源内容。（es module没有这问题）。而使用webpack5的资源模块新特性处理图片等资源的时候，如果采用cmd规范，导入的文件资源是不需要获取default的内容，直接requi

2022-03-22 17:37:13 1548

原创 fetch API 简单封装

文章目录简单封装一下fetchfetch发起请求的方式是否是普通对象方法初始化请求配置参数根据环境变量设置baseurl封装fetch使用封装的request方法简单封装一下fetchfetch发起请求的方式fetch("./01-data.json") // 这里的 res拿到的结果是一个流需要转为我们需要的格式 json，text，formData等 // 这几个转换格式的方法返回值都是 promise实例 .then(res => res.json()) .then

2022-03-09 18:53:54 970

原创 AJAX专题核心知识倒计时抢购案例

AJAX核心知识所有的思路都在代码中AJAX：核心基于 XMLHttpRequest创建HTTP请求创建 XHR实例打开一个URL地址【发送前的配置信息等】method请求方式 GET/DELETE/head/options… , POST (post/put/patch…)GET 和 POST 在官方定义中没有明确区别的但是浏览器或者开发的时候，都有一套约定俗成的规范：GET请求传递给服务器的数据除请求头以外要求基于URL问号传参POST请求数据一般是通过请求体传递s

2022-03-08 21:55:02 947

原创正则表达式专题常见的正则方法及元字符等

文章目录正则表达式专题邂逅正则表达式正则表达式基础元字符解析常用正则表达式两种创建方式的区别正则表达式捕获的懒惰性分组捕获和分组引用取消贪婪性其他正则捕获的方法正则练习出现最多的字符时间字符串格式化queryURLParams解析正则表达式之千分符正则表达式专题邂逅正则表达式正则表达式基础/* * @Author: 毛毛 * @Date: 2022-03-06 12:18:14 * @Last Modified by: 毛毛 * @Last Modified time: 2022-03-

2022-03-07 12:38:13 473

原创手撕call-apply-bind内置函数的实现原理

有关这三个函数，在实际工作上，应该是用的比较多的，改变this指向的三种方式。call和apply类似，唯一的区别就是参数的传递方式有所不同而已，而bind函数是对需要执行的函数进行this绑定后返回一个新函数，且新函数的this不可再次改变。call： call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

2022-02-25 10:44:43 506

first_mini_mrogram.zip

空空如也