- 博客(22)
- 收藏
- 关注
RSS订阅原创 实现一个简单的Promise.all
目标：在Promise的基础上实现一个Promise.all方法。Promise.all需求拆解该方法返回一个新的Promise参数是一个数组，数组中的每一项既可能是一个Promise实例，也有可能只是一个常量遍历数组，等待每一项执行完成将执行结果用一个变量保存起来如果有其中一项失败，则直接reject当前失败的一项错误信息；全部执行成功，则按传参顺序resolve所有结果先完成第1步：返回一个新的Promise// 接受promise数组，返回新的PromisePromis
2021-08-11 22:01:39
924
原创 从东京奥运会看js设计模式之发布订阅模式
开篇废话：本篇文章介绍发布-订阅模式，想必很多人听说过有一种观察者模式，网上既有资料说这是两种不同的设计模式，也有说这是一种模式，我倾向于认同他们是同一种设计模式。不必过于纠结开篇楔子：东京奥运会已经开幕有一段时间了，在本次奥运会上我国的奥运健儿们取得了非常不错的成绩，截止至目前(2021.08.05)，我国取得了34金24银16铜，在上班时间也时刻关注着比赛详情，但对于打工人来说摸鱼看完整比赛可能做不到，但是偶尔刷新查看一下奥运奖牌榜的事没少干。然后我就在想要是谁能及时通知我奖牌数的变化就好了，假.
2021-08-05 23:03:49
247
2
原创 js设计模式之代理模式
近期加拿大男星吴*凡因恶劣行径，触犯了法律，造成了极其不好的影响，各大公司纷纷解除其商业代言合同。从程序员视角来看，解除代言合同的过程特别符合设计模式中代理模式。经纪人在解除合同过程中充当了代理角色，合同解除过程：公司=>经纪人=>吴*凡用代码描述这个过程是这样的：const Contract = function (str) { return str;};const customer = { stopContract(proxy) { const contract
2021-08-04 20:33:04
187
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
2037
原创 极简系列---vue3.x消息组件message
极简系列—vue3.x消息组件messageVue2.x消息组件参考另一篇：https://blog.youkuaiyun.com/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
2665
原创 极简系列---vue2.x消息组件message
实现一个小小目标---极简版的messge消息组件- 支持多种调用方式 1. 组件内`this.$message`方式调用 2. 在`.js`文件中作为一个函数独立使用- 支持手动关闭message
2021-07-27 21:19:14
2883
原创 极简系列---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
856
原创 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
292
原创 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
728
原创 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
327
原创 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
22381
原创 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
235
原创 CSS小技巧---半透明边框
问：如何制作一个半透明的边框，显示父级元素的背景？答：其关键时使用background-clip属性background-clip默认为border-box，即元素背景会延伸到边框下，此时设置半透明边框，显示的是元素自身的背景将其设置为padding-box或者content-box后，元素自身的背景不会延伸到边框下，此时半透明边框显示的是父级元素的背景看下面动图效果，一目了然<!DOCTYPE html><html lang="en"> <head>.
2021-07-18 11:09:32
855
原创 极简系列---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
162
原创 个人记录贴：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
122
原创 CSS小技巧---display显隐动画效果
今天记录一个css小技巧既不用setTimeout也不用监听transitioned事件实现display：block/none的显示隐藏动画准备工作dom元素和css准备，先实现一个简单的弹窗样式和一个控制按钮，觉得繁琐的直接跳到第1步看核心代码，不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式 <style> .content { /* 四行css实现垂直居中 */ position: relative; top:.
2021-07-16 23:28:47
9266
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
229
原创 禁用浏览器后退功能
js实现浏览器禁用后退功能（历史记录）方法一这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。浏览器的后退按钮可以点击，但是没有后退效果。<script language="javascript"> //防止页面后退 history.pushState(null, null, document.URL); window.addE
2017-04-09 15:32:04
352
原创 webpack配置sass
主要有三个步骤 步骤1npm install node-sass --save-devnpm install sass-loader --save-dev步骤2打开webpack.base.config.js在loaders里面加上 { test: /\.scss$/, loaders: ["style", "css", "sass"] }步骤3在需要用到scss的地
2017-02-02 09:15:17
529
原创 元素始终保持水平和垂直居中
实现此功能非常简单，只需要分两步走父元素display:table-cell;，同时设置vertical-algin:middle;子元素设置margin:0 auto; <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="t
2016-11-21 21:30:36
804
原创 响应式侧边导航栏（刚入门的菜鸟,勿喷...）
纯手写响应式侧边导航栏，废话不多说直接上效果图及代码…ps:markdown也是第一次使用，排版就不计较了 页面结构<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
2016-11-06 23:06:46
5941
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人