勤学daydayup-CSDN博客

原创实现一个简单的Promise.all

目标：在Promise的基础上实现一个Promise.all方法。Promise.all需求拆解该方法返回一个新的Promise参数是一个数组，数组中的每一项既可能是一个Promise实例，也有可能只是一个常量遍历数组，等待每一项执行完成将执行结果用一个变量保存起来如果有其中一项失败，则直接reject当前失败的一项错误信息；全部执行成功，则按传参顺序resolve所有结果先完成第1步：返回一个新的Promise// 接受promise数组，返回新的PromisePromis

2021-08-11 22:01:39 793

原创 js实现继承的方式

本文介绍四种实现继承的方式1. 原型链继承2. 组合继承3. 寄生式组合继承4. es6 class继承

2021-08-08 17:34:28 118

原创从东京奥运会看js设计模式之发布订阅模式

开篇废话：本篇文章介绍发布-订阅模式，想必很多人听说过有一种观察者模式，网上既有资料说这是两种不同的设计模式，也有说这是一种模式，我倾向于认同他们是同一种设计模式。不必过于纠结开篇楔子：东京奥运会已经开幕有一段时间了，在本次奥运会上我国的奥运健儿们取得了非常不错的成绩，截止至目前(2021.08.05)，我国取得了34金24银16铜，在上班时间也时刻关注着比赛详情，但对于打工人来说摸鱼看完整比赛可能做不到，但是偶尔刷新查看一下奥运奖牌榜的事没少干。然后我就在想要是谁能及时通知我奖牌数的变化就好了，假.

2021-08-05 23:03:49 183 2

原创 js设计模式之代理模式

近期加拿大男星吴*凡因恶劣行径，触犯了法律，造成了极其不好的影响，各大公司纷纷解除其商业代言合同。从程序员视角来看，解除代言合同的过程特别符合设计模式中代理模式。经纪人在解除合同过程中充当了代理角色，合同解除过程：公司=>经纪人=>吴*凡用代码描述这个过程是这样的：const Contract = function (str) { return str;};const customer = { stopContract(proxy) { const contract

2021-08-04 20:33:04 142 1

原创极简系列---vue3.x表单组件form

本文从零开始实现一个自定义的vue3.x表单组件ti-form，组件使用体验类似element-ui。完整代码地址：https://github.com/littleluckly/vue3.x-components-study实现过程涉及到的知识点setup函数，用法参考：https://v3.cn.vuejs.org/guide/composition-api-setup.htmltoRefsrefreactivev-model事件订阅派发，采用第三方库mitt，用法参考https:/

2021-08-01 16:17:21 1848

原创极简系列---vue3.x消息组件message

极简系列—vue3.x消息组件messageVue2.x消息组件参考另一篇：https://blog.csdn.net/hncu1990/article/details/119153572全局API与vue2.x变化变更前变更后Vue.extend(组件选项)Vue.createApp(组件选项)Vue.prototypeconfig.globalProperties，如const app = createApp({}) app.config.globalProper

2021-07-31 11:53:38 1765

原创极简系列---vue2.x消息组件message

实现一个小小目标---极简版的messge消息组件- 支持多种调用方式 1. 组件内`this.$message`方式调用 2. 在`.js`文件中作为一个函数独立使用- 支持手动关闭message

2021-07-27 21:19:14 2662

原创极简系列---vue2.x表单组件form

文章目录my-form框架my-form-item框架my-form-item组件校验my-form组件校验broadcast事件广播my-input组件dispatch事件派发毛坯房验收本文从零开始实现一个自定义的vue2.x表单组件my-form，组件使用体验类似element-ui实现过程涉及到的知识点自定义事件事件的广播与派发v-mode语法糖原理$attrs，参考https://cn.vuejs.org/v2/api/#vm-attrsprovide/inject传递数据，参考

2021-07-26 23:27:23 738

原创 SVG动画的简单应用

本文主要介绍利用stroke-dasharray和stroke-dashoffset实现svg动画对svg基础不熟悉的同学可以先看这里https://juejin.cn/post/6844903589807128590svg动画基础stroke-dasharray这个属性是用来定义点划线（虚线）先来看下效果 <svg width="100" height="100"> <path d="M2 2 L98 2" stroke="pink" stroke-widt

2021-07-25 15:30:37 234

原创 node自定义命令行工具cli

文章目录创建项目文件夹初始化package.json安装依赖自定义命令初体验定制命令sun init 目标: 创建一个叫做sun的cli工具创建项目文件夹mkdir vue-auto-router-cli初始化package.jsonnpm init -y安装依赖npm i commander download-git-repo ora handlebars figlet clear chalk open watch -snpm包名作用commander用于定制命令

2021-07-24 15:17:54 610

原创 Vue3响应式原理Proxy

Vue3响应式原理–ProxyVue3的响应式主要是基于ES6的新特性Proxy实现，Vue2的响应式可以参看我的另一篇文章极简系列—vue 响应式实现(2.x)对比Vue响应式原理相比于Proxy，Vue2的响应式实现具有如下缺陷：性能不好，需要递归处理嵌套对象，特别是处理大数据尤为明显对新添加的属性不支持，需要提供额外的方法如Vue.$set对数组支持行不好，数组的响应式通过覆盖数组的原型方法实现Vue3响应式处理Vue3响应式处理主要用到了ES6的Proxy，ReflectV

2021-07-20 22:17:53 273

原创 CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient

本文主要介绍linear-gradient一些不太一样的玩法普通渐变-最常见的用法是从字面意思理解，实现一个渐变背景，如下图效果background: linear-gradient(to right, #30e8bf, #ff8235);无渐变，突变效果调整色标位置，实现两个非渐变效果background: linear-gradient(to right, #30e8bf 50%, #ff8235 50%);参数解释，颜色后面跟一个百分比，表示当前颜色的过渡位置，如果前后两个颜色的过.

2021-07-18 16:27:30 21262

原创 CSS小技巧---box-shadow

本文介绍使用box-shadow实现一下几种效果实现一个边框多重投影模拟多层边框首先回顾一下box-shadow语法box-shadow: h-shadow v-shadow blur spread color inset;属性说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小，扩张半径color可选。阴影的颜色。inset可选。.

2021-07-18 11:56:40 195

原创 CSS小技巧---半透明边框

问：如何制作一个半透明的边框，显示父级元素的背景？答：其关键时使用background-clip属性background-clip默认为border-box，即元素背景会延伸到边框下，此时设置半透明边框，显示的是元素自身的背景将其设置为padding-box或者content-box后，元素自身的背景不会延伸到边框下，此时半透明边框显示的是父级元素的背景看下面动图效果，一目了然<!DOCTYPE html><html lang="en"> <head&gt.

2021-07-18 11:09:32 767

原创极简系列---vue 响应式实现(2.x)

用过vue的同学想必都知道它是基于Object.defineProperty实现的响应式，那么具体是怎么做到呢，下面我将用不到一百行代码逐步拆解响应式原理关于defineProperty可参考MDN拦截对象属性的存储行为新建一个文件my-vue.js，在内部定义一个方法defineReactive，在方法内通过Object.defineProperty拦截对象属性的操作// my-vue.jsfunction defineReactive(obj, key) { let value = o.

2021-07-17 15:28:26 130

原创个人记录贴：Node基础---文件读取

I/O 文件读写文件读取同步读取fs.readFileSyncconst fs = require('fs')// 同步读取// 返回的是Buffer对象，存储二进制信息// 1字节Byte=== 8bit(0/1)const data = fs.readFileSync('./conf.js')console.log('data', data.toString())异步读取 fs.readFileconst fs = require('fs')// 异步读取fs.read

2021-07-17 10:52:05 96

原创 CSS小技巧---display显隐动画效果

今天记录一个css小技巧既不用setTimeout也不用监听transitioned事件实现display：block/none的显示隐藏动画准备工作dom元素和css准备，先实现一个简单的弹窗样式和一个控制按钮，觉得繁琐的直接跳到第1步看核心代码，不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式 <style> .content { /* 四行css实现垂直居中 */ position: relative; top:.

2021-07-16 23:28:47 8326 1

原创极简系列---vuex实现

开篇废话：想必每一个使用过vue技术栈进行开发的同学都知道vuex是一个全局状态管理库，其使用方法非常简单。作为一名开发人员我们要知其然，也要知其所以然，但是阅读源码却是一块非常难啃的骨头，看着看着就容易陷入从入门到放弃的过程。为了那些想看源码又不知如何下手的同学，我现在用几十行代码来详细讲解如何实现vuex核心简单需求分析回顾下vuex的初始化方式Vue.use(Vuex); const store = new Vuex.Store({xxxxx}); const app = new Vue(.

2021-07-15 22:24:08 183

勤学daydayup的博客