<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[勤学daydayup的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/hncu1990</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; hncu1990]]></copyright><item><title><![CDATA[实现一个简单的Promise.all]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119618058</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119618058</guid><author>hncu1990</author><pubDate>Wed, 11 Aug 2021 22:01:39 +0800</pubDate><description><![CDATA[目标：在Promise的基础上实现一个Promise.all方法。
Promise.all需求拆解

该方法返回一个新的Promise
参数是一个数组，数组中的每一项既可能是一个Promise实例，也有可能只是一个常量
遍历数组，等待每一项执行完成

将执行结果用一个变量保存起来
如果有其中一项失败，则直接reject当前失败的一项错误信息；
全部执行成功，则按传参顺序resolve所有结果



先完成第1步：
返回一个新的Promise
// 接受promise数组，返回新的Promise
Promis]]></description><category></category></item><item><title><![CDATA[js实现继承的方式]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119517818</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119517818</guid><author>hncu1990</author><pubDate>Sun, 08 Aug 2021 17:34:28 +0800</pubDate><description><![CDATA[本文介绍四种实现继承的方式
1. 原型链继承
2. 组合继承
3. 寄生式组合继承
4. es6 class继承]]></description><category></category></item><item><title><![CDATA[从东京奥运会看js设计模式之发布订阅模式]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119429448</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119429448</guid><author>hncu1990</author><pubDate>Thu, 05 Aug 2021 23:03:49 +0800</pubDate><description><![CDATA[开篇废话：本篇文章介绍发布-订阅模式，想必很多人听说过有一种观察者模式，网上既有资料说这是两种不同的设计模式，也有说这是一种模式，我倾向于认同他们是同一种设计模式。不必过于纠结


开篇楔子：东京奥运会已经开幕有一段时间了，在本次奥运会上我国的奥运健儿们取得了非常不错的成绩，截止至目前(2021.08.05)，我国取得了34金24银16铜，在上班时间也时刻关注着比赛详情，但对于打工人来说摸鱼看完整比赛可能做不到，但是偶尔刷新查看一下奥运奖牌榜的事没少干。然后我就在想要是谁能及时通知我奖牌数的变化就好了，假.]]></description><category></category></item><item><title><![CDATA[js设计模式之代理模式]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119392614</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119392614</guid><author>hncu1990</author><pubDate>Wed, 04 Aug 2021 20:33:04 +0800</pubDate><description><![CDATA[近期加拿大男星吴*凡因恶劣行径，触犯了法律，造成了极其不好的影响，各大公司纷纷解除其商业代言合同。从程序员视角来看，解除代言合同的过程特别符合设计模式中代理模式。
经纪人在解除合同过程中充当了代理角色，合同解除过程：
公司=&gt;经纪人=&gt;吴*凡

用代码描述这个过程是这样的：
const Contract = function (str) {
  return str;
};
const customer = {
  stopContract(proxy) {
    const contract]]></description><category></category></item><item><title><![CDATA[极简系列---vue3.x表单组件form]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119299471</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119299471</guid><author>hncu1990</author><pubDate>Sun, 01 Aug 2021 16:17:21 +0800</pubDate><description><![CDATA[本文从零开始实现一个自定义的vue3.x表单组件ti-form，组件使用体验类似element-ui。
完整代码地址：https://github.com/littleluckly/vue3.x-components-study
实现过程涉及到的知识点


setup函数，用法参考：https://v3.cn.vuejs.org/guide/composition-api-setup.html
toRefs
ref
reactive
v-model
事件订阅派发，采用第三方库mitt，用法参考https:/]]></description><category></category></item><item><title><![CDATA[极简系列---vue3.x消息组件message]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119273475</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119273475</guid><author>hncu1990</author><pubDate>Sat, 31 Jul 2021 11:53:38 +0800</pubDate><description><![CDATA[极简系列—vue3.x消息组件message

Vue2.x消息组件参考另一篇：https://blog.youkuaiyun.com/hncu1990/article/details/119153572

全局API与vue2.x变化




变更前
变更后




Vue.extend(组件选项)
Vue.createApp(组件选项)


Vue.prototype
config.globalProperties，如const app = createApp({}) app.config.globalProper]]></description><category></category></item><item><title><![CDATA[极简系列---vue2.x消息组件message]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119153572</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119153572</guid><author>hncu1990</author><pubDate>Tue, 27 Jul 2021 21:19:14 +0800</pubDate><description><![CDATA[实现一个小小目标---极简版的messge消息组件
- 支持多种调用方式
      1. 组件内`this.$message`方式调用
      2. 在`.js`文件中作为一个函数独立使用
- 支持手动关闭message]]></description><category></category></item><item><title><![CDATA[极简系列---vue2.x表单组件form]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119120988</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119120988</guid><author>hncu1990</author><pubDate>Mon, 26 Jul 2021 23:27:23 +0800</pubDate><description><![CDATA[文章目录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-attrs
provide/inject传递数据，参考]]></description><category></category></item><item><title><![CDATA[SVG动画的简单应用]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/119079442</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/119079442</guid><author>hncu1990</author><pubDate>Sun, 25 Jul 2021 15:30:37 +0800</pubDate><description><![CDATA[本文主要介绍利用stroke-dasharray和stroke-dashoffset实现svg动画
对svg基础不熟悉的同学可以先看这里https://juejin.cn/post/6844903589807128590
svg动画基础
stroke-dasharray
这个属性是用来定义点划线（虚线）
先来看下效果
    &lt;svg width="100" height="100"&gt;
      &lt;path d="M2 2 L98 2" stroke="pink" stroke-widt]]></description><category></category></item><item><title><![CDATA[node自定义命令行工具cli]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118979201</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118979201</guid><author>hncu1990</author><pubDate>Sat, 24 Jul 2021 15:17:54 +0800</pubDate><description><![CDATA[文章目录创建项目文件夹初始化package.json安装依赖自定义命令初体验定制命令sun init 
目标: 创建一个叫做sun的cli工具
创建项目文件夹
mkdir vue-auto-router-cli
初始化package.json
npm init -y
安装依赖
npm i commander download-git-repo ora handlebars figlet clear chalk open watch -s




npm包名
作用




commander
用于定制命令

]]></description><category></category></item><item><title><![CDATA[Vue3响应式原理Proxy]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118945567</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118945567</guid><author>hncu1990</author><pubDate>Tue, 20 Jul 2021 22:17:53 +0800</pubDate><description><![CDATA[Vue3响应式原理–Proxy
Vue3的响应式主要是基于ES6的新特性Proxy实现，
Vue2的响应式可以参看我的另一篇文章极简系列—vue 响应式实现(2.x)
对比Vue响应式原理
相比于Proxy，Vue2的响应式实现具有如下缺陷：

性能不好，需要递归处理嵌套对象，特别是处理大数据尤为明显
对新添加的属性不支持，需要提供额外的方法如Vue.$set
对数组支持行不好，数组的响应式通过覆盖数组的原型方法实现

Vue3响应式处理
Vue3响应式处理主要用到了ES6的Proxy，Reflect

V]]></description><category></category></item><item><title><![CDATA[CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118878493</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118878493</guid><author>hncu1990</author><pubDate>Sun, 18 Jul 2021 16:27:30 +0800</pubDate><description><![CDATA[本文主要介绍linear-gradient一些不太一样的玩法

普通渐变
-最常见的用法是从字面意思理解，实现一个渐变背景，如下图效果
background: linear-gradient(to right, #30e8bf, #ff8235);

无渐变，突变效果
调整色标位置，实现两个非渐变效果
background: linear-gradient(to right, #30e8bf 50%, #ff8235 50%);
参数解释，颜色后面跟一个百分比，表示当前颜色的过渡位置，如果前后两个颜色的过.]]></description><category></category></item><item><title><![CDATA[CSS小技巧---box-shadow]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118875100</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118875100</guid><author>hncu1990</author><pubDate>Sun, 18 Jul 2021 11:56:40 +0800</pubDate><description><![CDATA[本文介绍使用box-shadow实现一下几种效果

实现一个边框
多重投影模拟多层边框


首先回顾一下box-shadow语法
box-shadow: h-shadow v-shadow blur spread color inset;




属性
说明




h-shadow
必需的。水平阴影的位置。允许负值


v-shadow
必需的。垂直阴影的位置。允许负值


blur
可选。模糊距离


spread
可选。阴影的大小，扩张半径


color
可选。阴影的颜色。


inset
可选。.]]></description><category></category></item><item><title><![CDATA[CSS小技巧---半透明边框]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118874687</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118874687</guid><author>hncu1990</author><pubDate>Sun, 18 Jul 2021 11:09:32 +0800</pubDate><description><![CDATA[问：如何制作一个半透明的边框，显示父级元素的背景？
答：其关键时使用background-clip属性

background-clip默认为border-box，即元素背景会延伸到边框下，此时设置半透明边框，显示的是元素自身的背景
将其设置为padding-box或者content-box后，元素自身的背景不会延伸到边框下，此时半透明边框显示的是父级元素的背景
看下面动图效果，一目了然

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt.]]></description><category></category></item><item><title><![CDATA[极简系列---vue 响应式实现(2.x)]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118856626</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118856626</guid><author>hncu1990</author><pubDate>Sat, 17 Jul 2021 15:28:26 +0800</pubDate><description><![CDATA[用过vue的同学想必都知道它是基于Object.defineProperty实现的响应式，那么具体是怎么做到呢，下面我将用不到一百行代码逐步拆解响应式原理
关于defineProperty可参考MDN

拦截对象属性的存储行为
新建一个文件my-vue.js，在内部定义一个方法defineReactive，在方法内通过Object.defineProperty拦截对象属性的操作
// my-vue.js
function defineReactive(obj, key) {
  let value = o.]]></description><category></category></item><item><title><![CDATA[个人记录贴：Node基础---文件读取]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118853594</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118853594</guid><author>hncu1990</author><pubDate>Sat, 17 Jul 2021 10:52:05 +0800</pubDate><description><![CDATA[I/O 文件读写
文件读取


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



异步读取 fs.readFile
const fs = require('fs')
// 异步读取
fs.read]]></description><category></category></item><item><title><![CDATA[CSS小技巧---display显隐动画效果]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118829509</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118829509</guid><author>hncu1990</author><pubDate>Fri, 16 Jul 2021 23:28:47 +0800</pubDate><description><![CDATA[今天记录一个css小技巧
既不用setTimeout
也不用监听transitioned事件
实现display：block/none的显示隐藏动画

准备工作
dom元素和css准备，先实现一个简单的弹窗样式和一个控制按钮，觉得繁琐的直接跳到第1步看核心代码，不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式

  &lt;style&gt;
    .content {
      /* 四行css实现垂直居中 */
      position: relative;
      top:.]]></description><category></category></item><item><title><![CDATA[极简系列---vuex实现]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/118768381</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/118768381</guid><author>hncu1990</author><pubDate>Thu, 15 Jul 2021 22:24:08 +0800</pubDate><description><![CDATA[开篇废话：想必每一个使用过vue技术栈进行开发的同学都知道vuex是一个全局状态管理库，其使用方法非常简单。作为一名开发人员我们要知其然，也要知其所以然，但是阅读源码却是一块非常难啃的骨头，看着看着就容易陷入从入门到放弃的过程。为了那些想看源码又不知如何下手的同学，我现在用几十行代码来详细讲解如何实现vuex核心

简单需求分析

回顾下vuex的初始化方式
Vue.use(Vuex); const store = new Vuex.Store({xxxxx}); const app = new Vue(.]]></description><category></category></item><item><title><![CDATA[禁用浏览器后退功能]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/69817730</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/69817730</guid><author>hncu1990</author><pubDate>Sun, 09 Apr 2017 15:32:04 +0800</pubDate><description><![CDATA[js实现浏览器禁用后退功能（历史记录）方法一这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。浏览器的后退按钮可以点击，但是没有后退效果。<script language="javascript">
        //防止页面后退
        history.pushState(null, null, document.URL);
        window.addE]]></description><category></category></item><item><title><![CDATA[webpack配置sass]]></title><link>https://blog.youkuaiyun.com/hncu1990/article/details/54834744</link><guid>https://blog.youkuaiyun.com/hncu1990/article/details/54834744</guid><author>hncu1990</author><pubDate>Thu, 02 Feb 2017 09:15:17 +0800</pubDate><description><![CDATA[主要有三个步骤　步骤1npm install node-sass --save-dev
npm install sass-loader --save-dev步骤2打开webpack.base.config.js在loaders里面加上
  {
     test: /\.scss$/,
     loaders: ["style", "css", "sass"]
   }步骤3在需要用到scss的地]]></description><category></category></item></channel></rss>