夕山雨
码龄7年
求更新 关注
提问 私信
  • 博客:443,816
    社区:1,271
    动态:24
    445,111
    总访问量
  • 78
    原创
  • 274
    粉丝
  • 28
    关注
IP属地以运营商信息为准,境内显示到省(区、市),境外显示到国家(地区)
IP 属地:浙江省
加入CSDN时间: 2018-01-31

个人简介:前端的魅力,超乎你想象!

博客简介:

夕山雨的博客

查看详细资料
个人成就
  • 获得797次点赞
  • 内容获得167次评论
  • 获得2,667次收藏
  • 代码片获得2,880次分享
  • 博客总排名386,028名
创作历程
  • 1篇
    2024年
  • 1篇
    2022年
  • 2篇
    2021年
  • 41篇
    2020年
  • 34篇
    2019年
成就勋章
TA的专栏
  • ES6
    7篇
  • 工具
    5篇
  • 项目笔记
    5篇
  • 其他
    1篇
  • typescript
    1篇
  • 游戏
    1篇
  • 前端杂说
    2篇
  • js基础
    20篇
  • h5+css3
    7篇
  • jQuery
    1篇
  • js之函数式编程
    1篇
  • 项目管理
    4篇
  • http(s)与浏览器
    6篇
  • vue
    18篇
  • react
    1篇
  • flutter
  • 微信小程序
  • nodejs
    3篇
  • 网站搭建
  • 设计模式
  • photoshop

TA关注的专栏 0

TA关注的收藏夹 0

TA关注的社区 1

TA参与的活动 0

兴趣领域 设置
  • 前端
    javascriptcssvue.jsreact.jses6webpack前端框架
  • 后端
    node.js
  • 移动开发
    flutter
  • 网络与通信
    https
  • 微软技术
    typescript
  • 学习和成长
    面试
创作活动更多

新星杯·14天创作挑战营·第13期

这是一个以写作博客为目的的创作活动,旨在鼓励大学生博主们挖掘自己的创作潜能,展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴,那么,快来参加吧!我们一起发掘写作的魅力,书写出属于我们的故事。我们诚挚邀请你们参加为期14天的创作挑战赛!注: 1、参赛者可以进入活动群进行交流、互相鼓励与支持(开卷),虚竹哥会分享创作心得和涨粉心得,答疑及活动群请见:https://bbs.csdn.net/topics/619781944 【进活动群,得奖概率会更大,因为有辅导】 2、文章质量分查询:https://www.csdn.net/qc

90人参与 去参加
  • 最近
  • 文章
  • 专栏
  • 代码仓
  • 资源
  • 收藏
  • 关注/订阅/互动
更多
  • 最近

  • 文章

  • 专栏

  • 代码仓

  • 资源

  • 收藏

  • 关注/订阅/互动

  • 社区

  • 帖子

  • 问答

  • 课程

  • 视频

搜索 取消

element-ui组件封装技巧

1. 封装内外嵌套的组件如breadcrumb和breadcrumb-item,这时需要把绑定到breadcrumb上的参数透传给子组件,于是可以provide() { return { elBreadcrumb: this };},子组件内:inject: ['elBreadcrumb'],访问的时候:this.separator = this.elBreadcrumb.separator;第二种方式:gutter() { let parent = th
原创
博文更新于 2024.04.17 ·
469 阅读 ·
3 点赞 ·
0 评论 ·
0 收藏

前端异步方案之Promise(附实现代码)

一、基本原理一个Promise对象可以理解为这样一个状态机,它(通常)接收一个异步任务作为输入,然后去执行这个异步任务,根据异步任务的执行结果来改变自身的状态,并保留这个执行结果 。这个状态机总共有三种状态:pending(异步任务执行中)、fullfilled(执行成功)和rejected(执行失败)。在异步任务执行完之前,状态机处于pending状态;一旦任务执行成功,状态就会转为full...
原创
博文更新于 2023.04.03 ·
2558 阅读 ·
2 点赞 ·
1 评论 ·
16 收藏

微前端框架qiankun之原理与实战

一、微前端概述在讲解qiankun之前,我们先来了解一下何为微前端。微前端的概念借鉴自后端的微服务,主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的。它的主要思路是将一个大型工程拆分成若干个更小、更简单,可以独立开发、测试和部署的小工程,分别进行维护。如果以前端组件的概念作类比,我们可以把每个被拆分出的小工程看作是一个应用级组件。这时我们需要一个“管理者”,负责决定哪些“应用级组件”渲染到页面上,而这个“管理者”,就是我们的主工程。...
原创
博文更新于 2023.03.29 ·
24621 阅读 ·
75 点赞 ·
21 评论 ·
234 收藏

正则表达式(基础篇)

目录一、正则表达式的概念一、正则表达式的概念正则表达式(Regular Expression,常简写为RegExp或RE),又称规则表达式,通常用来检索、替换那些符合某个模式(规则)的文本。正则表达式是为字符串处理而生的,...
原创
博文更新于 2023.03.08 ·
10982 阅读 ·
34 点赞 ·
5 评论 ·
241 收藏

Vue源码笔记之响应式系统

什么是响应式系统?Vue的响应式系统是一个精心搭建的监控系统,它负责监测项目中的数据变化,然后通知对该数据“感兴趣”的订阅者进行相关操作。我们分别来理解“数据”、“感兴趣”以及“订阅者”这三个关键词。这里指的数据,就是options中的data配置项,它通过以下两种方式定义://单文件中使用Vuevar app = new Vue({ el: "#app", data: { ......
原创
博文更新于 2023.03.07 ·
2359 阅读 ·
6 点赞 ·
1 评论 ·
11 收藏

ES6之遍历器Iterator

目录什么是遍历器?什么是遍历器?在ES5中,我们最常使用的“集合”类数据结构主要是数组(Array)和普通对象(Object),ES6在此基础上新增了Map和Set。我们知道,这些“集合”类元素都是由一系列的成员构成的,那么一个非常常见的需求就是如何依次访问“集合”中的每一个成员。在ES5中,数组成员主要通过for循环或原型方法forEach等来遍历,而对象成员则没有方法直接遍历。ES6为数...
原创
博文更新于 2023.03.07 ·
1812 阅读 ·
5 点赞 ·
2 评论 ·
8 收藏

在Chrome中拦截替换远程js资源

如何使用Chrome工具替换和修改远程脚本
原创
博文更新于 2022.04.29 ·
6705 阅读 ·
1 点赞 ·
1 评论 ·
17 收藏

前端如何优雅地使用枚举

在前端开发中我们经常遇到这样一种情况:假设我们要渲染一个订单列表,后端返回的数据中包含这样一个字段:// 订单状态orderStatus: 0后端可能会告诉我们,它对应后端的这样一组值:{ 0: '已完成', 1: '待支付', 2: '已取消'}那么我们在前端如何优雅地把后端所返回的值 0 转换成字符串 已完成 呢?这就是本文要讨论的问题。为了引出我们的方案,我们先来看一个常用但不那么优雅的方案:一种不够优雅的方案首先,我们来为这个字段定义一个对象const orde
原创
博文更新于 2021.02.18 ·
8858 阅读 ·
20 点赞 ·
6 评论 ·
69 收藏

Vue源码笔记之初始化

概述本文主要分两部分:Vue自身的构造。主要是关于如何向Vue的原型prototype添加方法。Vue实例的初始化。即new Vue({ … })时执行的操作。Vue自身的构造过程1. 定义构造函数当我们像下面一样引入Vue.js文件时:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></sc...
原创
博文更新于 2019.09.30 ·
1402 阅读 ·
3 点赞 ·
0 评论 ·
2 收藏

Flex布局讲解

目录一、什么是Flex布局?二、Flex的基本概念三、Flex的语法规则1. Flex容器属性(1). flex-direction本文所述内容主要参考自阮一峰的Flex 布局教程:语法篇和Flex 布局教程:实例篇,并对其进行一定的梳理和归纳,感兴趣的可以点击链接阅读原文。一、什么是Flex布局?Flex布局是 Flexible box(弹性盒子)的缩写,因此常被称作“弹性布局”,它是对传统盒模型的补充和增强。在传统的盒模型中,布局盒子与子元素的关联性较弱,概念性地说,布局盒子只是为内部元素提供了布
原创
博文更新于 2020.11.16 ·
3785 阅读 ·
1 点赞 ·
0 评论 ·
9 收藏

http Headers字段汇总

目录一、http Headers的基本概念二、http Headers详解1. General Headers本文主要参考自MDN文档:HTTP Headers,并参考网上资料,对较为常用且文档中不详细的地方加以阐释。完整的Headers列表在IANA 注册表中维护,该文档内包含每个Headers对应的RFC文档,不过这些文档过于详尽且不易理解,所以只适合需要深入学习http协议的开发者阅读。一、http Headers的基本概念对http和https的原理感兴趣的,可以参考我之前的博客:http与
原创
博文更新于 2020.11.12 ·
6886 阅读 ·
10 点赞 ·
4 评论 ·
49 收藏

ES6之Set和Map

目录一、Set1. Set对象的构造2. Set的操作方法3. Set的遍历方法二、WeakSet三、Map1. Map的基本原理2. Map的操作方法3. Map的遍历方法4. Map与其他数据结构的转换(1) Map转为数组(2) 数组转为Map(3) Map转为对象(4) 对象转为Map(5) Map转为JSON(6) JSON转为Map四、WeakMap一、SetSet是ES6新增的一...
原创
博文更新于 2020.10.09 ·
1137 阅读 ·
3 点赞 ·
0 评论 ·
9 收藏

js基础之六种继承方式

概述在JavaScript中,存在六种继承模式,分别是基本继承(即前文js基础之原型链提到的最原始的方式,暂未查到官方称谓)、借用构造函数、组合继承、原型式继承、寄生式继承和寄生组合式继承。其中组合继承是基本继承和借用构造函数的组合版本,也是最常用的继承;原型式继承是基本继承的“干净”版本(只继承原型);寄生式继承是原型式继承的工厂化版本;寄生组合式继承是组合继承融入原型式继承思想后的优化版本,...
原创
博文更新于 2020.10.08 ·
1532 阅读 ·
8 点赞 ·
1 评论 ·
5 收藏

js基础之原型链

概述什么是原型链?简单来说,就是JavaScript对象的继承链。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法(引用自JavaScript高级程序设计)。对于一门面向对象的语言来说...
原创
博文更新于 2020.10.08 ·
979 阅读 ·
5 点赞 ·
2 评论 ·
3 收藏

JavaScript的设计模式

目录1. 单例模式2. 策略模式3. 代理模式出版于1995年的《设计模式》一书给设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。这本书总结了23种在以往的C++开发中针对某些特定问题的优雅的解决方案,后来在Java中也得到了广泛应用。不过在1996年,Google总工程师Peter Norvig曾在演讲中尖锐地指出,设计模式某种意义上是为解决面向对象语言(当时主要是指 C++ )本身缺陷的一种权宜之计。换句话说,设计模式在一定程度上是为了弥补编程语言的缺陷。他还提到,在像
原创
博文更新于 2020.10.02 ·
1584 阅读 ·
3 点赞 ·
0 评论 ·
7 收藏

两棵el-tree的节点跨树拖拽实现

在使用element-ui框架时,我们经常会用到el-tree组件。该组件支持在树上任意拖拽节点,但默认不支持将节点拖拽到树的外部,如一个外部div内,或另一棵el-tree上。关于如何将树上的节点拖拽到一个外部容器内(如一个设置了draggable="draggable"的div),我在 HTML5之原生拖拽 这篇博客的最后面已经给出了实现方案,感兴趣的可以参考,这里不再赘述。本文我们要探讨的是,如何将一个el-tree上的节点拖拽到另一个el-tree上。这需要依赖一些对el-tree源码的理解,我
原创
博文更新于 2020.09.17 ·
13780 阅读 ·
26 点赞 ·
42 评论 ·
89 收藏

超详细的Vue渲染原理讲解

目录一、Vue简介1. MVVM、MVP和MVC2. Vue的基本配置二、Vue渲染原理1. HTML与模板2. Vue组件的完整渲染过程(1). Vue自身的初始化阶段(2). 组件实例的生命周期管理阶段a. 实例初始化阶段b. 组件挂载、更新和销毁阶段总结本文的主要内容是详细地介绍Vue的内部渲染原理,从而帮助大家深入掌握关于Vue Options、生命周期等概念。为了帮助Vue使用经验较少的同学快速理解Vue,我们先从Vue的简介开始,第二部分再详细介绍Vue渲染原理。一、Vue简介1. MVV
原创
博文更新于 2020.09.07 ·
25525 阅读 ·
83 点赞 ·
9 评论 ·
295 收藏

为什么需要虚拟DOM?

目录1. 真实DOM操作的性能问题2. 虚拟DOM的作用总结我们知道,虚拟DOM的概念是由Facebook的React团队最早提出来的,也是React框架的核心概念之一。它的作用是以js的形式在内存中描述真实的DOM结构,这样当页面内容需要发生变动时,React可以通过对前后虚拟DOM的比对,计算出如何以最小的代价操作真实DOM。1. 真实DOM操作的性能问题在虚拟DOM出现之前,前端开发者最常用的方式是用jQuery直接操作真实DOM,像下面这样:<body> <div id
原创
博文更新于 2020.08.30 ·
4730 阅读 ·
22 点赞 ·
1 评论 ·
27 收藏

element-ui的message组件实现机制解析

在element-ui的组件中,有些组件的用法看起来比较特别,如message组件。在注册完element组件后,一般的组件是这样用的:<template> <el-button>点击我</button></template>但是message组件则是这样使用的:...this.$message.success('保存成功');...这样就会在页面上弹出一个成功的消息提示框。那么这类组件是怎么实现的呢?我们简单来看一下。...
原创
博文更新于 2020.08.18 ·
5106 阅读 ·
13 点赞 ·
0 评论 ·
22 收藏

自制脚本,统计个人csdn博客总字数

目录前言一、自动爬取所有文章的链接地址二、字数统计总结前言在csdn写博客也已经一年多了,经常忍不住想知道自己总共写了多少字。可是目前官方只能统计单篇文章的总字数,却没有提供所有文章的字数统计数据(希望官方以后增加这个统计数据)。一篇一篇地统计虽说数据量也不是很大,但是作为一个前端,能用脚本搞定的事干嘛要自己去数呢?于是我就抽空自己写了一段简单的脚本,对自己目前的67篇文章进行了一次字数统计,最后统计的总字数约为50万字,嗯,跟预期非常接近。下面我们就一起来看代码的实现吧(脚本可以复制下来用于统计自己
原创
博文更新于 2020.08.13 ·
1258 阅读 ·
5 点赞 ·
0 评论 ·
6 收藏
加载更多