- 博客(79)
- 收藏
- 关注
RSS订阅原创 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 20:45:46
295
原创 微前端框架qiankun之原理与实战
一、微前端概述在讲解qiankun之前，我们先来了解一下何为微前端。微前端的概念借鉴自后端的微服务，主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的。它的主要思路是将一个大型工程拆分成若干个更小、更简单，可以独立开发、测试和部署的小工程，分别进行维护。如果以前端组件的概念作类比，我们可以把每个被拆分出的小工程看作是一个应用级组件。这时我们需要一个“管理者”，负责决定哪些“应用级组件”渲染到页面上，而这个“管理者”，就是我们的主工程。...
2021-02-22 01:57:54
20175
21
原创 前端如何优雅地使用枚举
在前端开发中我们经常遇到这样一种情况：假设我们要渲染一个订单列表，后端返回的数据中包含这样一个字段：// 订单状态orderStatus: 0后端可能会告诉我们，它对应后端的这样一组值：{ 0: '已完成', 1: '待支付', 2: '已取消'}那么我们在前端如何优雅地把后端所返回的值 0 转换成字符串 已完成 呢？这就是本文要讨论的问题。为了引出我们的方案，我们先来看一个常用但不那么优雅的方案：一种不够优雅的方案首先，我们来为这个字段定义一个对象const orde
2021-02-05 12:51:40
7915
6
原创 Flex布局讲解
目录一、什么是Flex布局？二、Flex的基本概念三、Flex的语法规则1. Flex容器属性(1). flex-direction本文所述内容主要参考自阮一峰的Flex 布局教程：语法篇和Flex 布局教程：实例篇，并对其进行一定的梳理和归纳，感兴趣的可以点击链接阅读原文。一、什么是Flex布局？Flex布局是 Flexible box（弹性盒子）的缩写，因此常被称作“弹性布局”，它是对传统盒模型的补充和增强。在传统的盒模型中，布局盒子与子元素的关联性较弱，概念性地说，布局盒子只是为内部元素提供了布
2020-11-16 15:58:11
3212
原创 http Headers字段汇总
目录一、http Headers的基本概念二、http Headers详解1. General Headers本文主要参考自MDN文档：HTTP Headers，并参考网上资料，对较为常用且文档中不详细的地方加以阐释。完整的Headers列表在IANA 注册表中维护，该文档内包含每个Headers对应的RFC文档，不过这些文档过于详尽且不易理解，所以只适合需要深入学习http协议的开发者阅读。一、http Headers的基本概念对http和https的原理感兴趣的，可以参考我之前的博客：http与
2020-11-09 20:38:38
4808
4
原创 JavaScript的设计模式
目录1. 单例模式2. 策略模式3. 代理模式出版于1995年的《设计模式》一书给设计模式的定义是：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。这本书总结了23种在以往的C++开发中针对某些特定问题的优雅的解决方案，后来在Java中也得到了广泛应用。不过在1996年，Google总工程师Peter Norvig曾在演讲中尖锐地指出，设计模式某种意义上是为解决面向对象语言（当时主要是指 C++ ）本身缺陷的一种权宜之计。换句话说，设计模式在一定程度上是为了弥补编程语言的缺陷。他还提到，在像
2020-10-01 20:06:39
1436
原创 两棵el-tree的节点跨树拖拽实现
在使用element-ui框架时，我们经常会用到el-tree组件。该组件支持在树上任意拖拽节点，但默认不支持将节点拖拽到树的外部，如一个外部div内，或另一棵el-tree上。关于如何将树上的节点拖拽到一个外部容器内（如一个设置了draggable="draggable"的div），我在 HTML5之原生拖拽 这篇博客的最后面已经给出了实现方案，感兴趣的可以参考，这里不再赘述。本文我们要探讨的是，如何将一个el-tree上的节点拖拽到另一个el-tree上。这需要依赖一些对el-tree源码的理解，我
2020-09-17 09:40:30
11016
38
原创 超详细的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 09:41:57
23407
8
原创 为什么需要虚拟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 17:46:20
4370
1
原创 自制脚本，统计个人csdn博客总字数
目录前言一、自动爬取所有文章的链接地址二、字数统计总结前言在csdn写博客也已经一年多了，经常忍不住想知道自己总共写了多少字。可是目前官方只能统计单篇文章的总字数，却没有提供所有文章的字数统计数据（希望官方以后增加这个统计数据）。一篇一篇地统计虽说数据量也不是很大，但是作为一个前端，能用脚本搞定的事干嘛要自己去数呢？于是我就抽空自己写了一段简单的脚本，对自己目前的67篇文章进行了一次字数统计，最后统计的总字数约为50万字，嗯，跟预期非常接近。下面我们就一起来看代码的实现吧（脚本可以复制下来用于统计自己
2020-08-13 19:17:53
945
翻译 Vue 3的设计过程（翻译自尤雨溪原文）
转载声明：本文翻译自尤雨溪微博链接原文，主要介绍了Vue 3的设计过程。对原文感兴趣的可查看原文（英文版）：The process: Making Vue 3。翻译不当之处敬请参考原文予以纠正。Vue 3的设计过程重写Vue.js下个主版本的经验总结作者：尤雨溪创作日期：2020年5月在过去的一年里，Vue团队一直在开发Vue.js的下一个主版本，我们打算在2020年上半年发布它（原文注释：在写作本文时，这个工作仍在继续）。与新的Vue主版本有关的想法是在2018年底成形的，那时Vue 2的代码库
2020-08-10 21:35:21
899
原创 window.open用法详解
目录一、window.open1. 基本语法本文主要分两部分。第一部分详细介绍window.open的详细用法，包括它的基本语法、使用说明等。第二部分由window.open引出，我们将介绍当存在多个页面相互关联时，页面之间的通信问题。一、window.open1. 基本语法...
2020-08-09 17:44:52
74655
1
原创 window.Date、Math、JSON用法解读
目录一、前言一、前言相信只要对前端有所了解的同学，对window上的Date、Math和JSON这三个原生对象（或构造函数）都不会陌生，不过却未必全面了解过它们的用法。首先我们先来简述这三个原生对象的作用。...
2020-08-09 14:58:11
788
原创 Nodejs之fs（文件系统）模块
目录一、fs模块简介一、fs模块简介fs（file system）模块是nodejs提供的用于访问主机文件系统的功能模块，它使得运行于nodejs环境下的JavaScript具备直接读写本地文件的能力。fs模块是nodejs的核心模块之一，只要安装了nodejs，就可以直接使用fs模块，不需要单独安装。引入fs模块非常简单：let fs = require('fs');接下来就可以调用fs模块的相关接口直接读写文件系统。fs模块主要提供了以下的接口类：fs.Dir，目录类。可理解为文件夹。
2020-08-02 23:15:27
8531
2
原创 配置打包命令动态应用主题样式
假设我们的代码里提供了蓝色、黑色和红色等多个主题风格样式，并且一个项目上只需要使用一套主题风格：假如某个项目需要使用蓝色主题，那么我们可能会在main.js中这样从theme-blue下引入对应的css文件：...import '../assets/theme-blue/index.css';...然后我们执行打包命令，蓝色主题下的样式文件就会被引入，于是项目就应用了蓝色主题。假如现在另一个项目需要生成一套红色主题该怎么办呢？非常简单，把上面的代码改成从红色主题下引入文件即可：impor
2020-07-30 21:30:04
739
2
原创 element-ui的message组件实现机制解析
在element-ui的组件中，有些组件的用法看起来比较特别，如message组件。在注册完element组件后，一般的组件是这样用的：<template> <el-button>点击我</button></template>但是message组件则是这样使用的：...this.$message.success('保存成功');...这样就会在页面上弹出一个成功的消息提示框。那么这类组件是怎么实现的呢？我们简单来看一下。...
2020-07-22 11:28:25
4304
原创 Vue的样式穿透（在父组件中为子组件定义样式）
在使用Vue开发前端项目时，我们经常需要引入第三方组件，比如下面的例子（假设我们已经注册了element-ui）：<template> <div class="root"> <el-button type="plain">点击我</el-button> </div></template>这是一个来自element-ui的按钮组件，它会渲染成这样：那我如果我们想修改这个第三方组件的样式该怎么办呢？下面的样式并
2020-07-21 21:40:04
4610
原创 带你了解JavaScript的异步
目录一、异步的由来二、异步模型解析1. 宏任务和微任务一、异步的由来异步编程常见于如JavaScript一类的单线程语言，用于解决由单线程导致的执行效率低下的问题。单线程语言是相对于多线程语言（如java）而言的。多线程语言具备同时利用CPU的多个内核并行执行程序的能力，代码执行效率较高。多线程语言通常采用同步编程模型，即任何一个任务都必须等待它的上一个任务执行完毕后才可以执行，这种编程模型更方便组织代码逻辑和划分线程任务。而单线程语言则无法利用CPU的多核优势，它的主线程在同一时间只能执行一个任务
2020-07-12 16:26:15
1516
原创 TypeScript基础知识总结
目录一、什么是TypeScript？二、TypeScript基础1. TypeScript的安装2. 数据类型3. 类型断言（Type Assertion）4. 函数5. 接口（interface）6. 类（class）7. 对象一、什么是TypeScript？TypeScript是由微软开发的一门脚本语言，它是JavaScript的一个超集，完全兼容JavaScript。也就是说，任何合法的JavaScript代码，也都是合法的TypeScript代码。TypeScript以.ts结尾，经过编译器编
2020-07-06 11:33:26
914
原创 Vue组件交互之bus模式
目录一、bus模式简介一、bus模式简介bus模式是一种借助事件实现任意两组件交互的解决方案。通常来说，在不借助bus模式的情况下，事件的触发只会发生在父子组件之间，并且只能由子组件向父组件触发事件。它的大致实现模式如下：parent.vue<template> <child @tick="handleTick" ></child></template><script>export default { meth
2020-06-27 12:49:31
3407
原创 vs code如何创建代码片段
vs code有一个很方便的模板定义功能：User Snippets（中文版称为“用户代码片段”），它允许用户为某个前缀定义一个代码片段。使用时，只要输入这个前缀，点击回车，vs code就会自动插入这个代码片段。中文版为文件>首选项>用户代码片段。点击后会在顶部出现一个输入框：假设我们要为vue创建一个模板，可以在这里输入vue，然后回车，vs code会自动新建一个名为vue.json的文件来定义代码片段。该文件内包含被注释的说明文字，指导开发者如何创建一个代码片段。我们直接在里面添
2020-06-10 21:15:58
3767
原创 多页vue应用的单页面打包方法（内含打包模式的应用）
目录一、简介二、实现过程1. 配置打包指令(指定打包模式)2. 定义模式行为3. 定义打包逻辑三、打包模式的应用总结一、简介关于如何以及为什么要构建多页vue应用，我们在上一篇文章中已经介绍过，感兴趣的请参考构建多页vue应用。本文我们要介绍的是，对于一个多页应用，如何单独打包其中一个（或几个）页面。一般来说，多页应用不需要打包单个页面，这多个页面可以作为整个应用直接放在静态资源服务器上。不过我们也说过，多页应用的每个页面也可能会放在不同的服务器上，这时候如果往每个服务器上都放置完整的资源包，就会显得
2020-06-10 15:01:29
5783
2
原创 构建多页vue应用
目录1. 初始化2. 创建多页入口3. 配置多页入口总结一般来说，vue推荐构建单页应用，页面内容的切换是通过路由控制组件的替换来实现的。单页应用使得页面跳转变得极为迅速，不过假如两个页面在功能逻辑上是完全独立的，甚至可能需要部署到不同的服务上，这时候将其构建为多页应用可能是更好的选择。下面我们来看如何将一个单页vue应用改造为一个多页应用。为了方便，我们直接从vue-cli构建的初始化项目开始改造，已有项目的改造方案也是类似的。下面是改造过程：1. 初始化首先我们应该先初始化一个单页应用，我们使用
2020-06-10 13:08:55
3313
4
原创 是时候全面了解一下window.console了！
目录一、常用函数1. console.assert(value, [...message])2. console.clear()3. console.count([label])4. console.countReset([label])5. console.debug(data, [...args])6. console.dir(obj)7. console.dirxml(...data)8. console.error(data, [...args])9. console.group([...label
2020-06-06 19:41:50
4319
原创 单个vue组件的打包和动态引入
目录一、原理简介二、打包过程1. 创建一个webpack项目2. 编写组件和打包脚本3. 打包三、动态引入1. 在vue项目中使用2. 在普通项目中使用总结一、原理简介在使用webpack打包vue项目时，我们一般习惯以项目的main.js为打包入口，构建完整的项目依赖。依赖构建完毕后将打包后的js通过插件html-webapck-plugin引入到HTML模板中，从而实现整个项目的打包。由于webpack运行于nodejs环境下，只能识别js文件，因此如果遇到其他类型的文件，如.vue，就必须使用对
2020-05-31 14:20:36
8740
6
原创 codemirror主题效果概览
codemirror是目前最流行的在线编辑器，本文主要是罗列codemirror提供的所有主题效果，如果你需要使用codemirror制作一个在线编辑器，可以参考本文选择一个喜欢的主题。本文使用的目标对象是vue，其他语言或框架也是类似的。为了减小纵向篇幅，这里使用了三个codemirror，分别展示template、script和style的效果。1. 3024-day2. 3024-night3. abcdef4. ambiance-mobile5. ambiance6. ayu
2020-05-29 18:17:33
19156
7
原创 Vuex使用指南及原理简介
目录一、Vuex用法指南1. Vue和Vuex的关系2. 核心概念介绍(1). state(2). getters(3). mutations(4). actions(5). modules3. 项目结构二、Vuex架构简介1. Vue.use(Vuex)做了什么2. new Vuex.Store({ ... })做了什么总结一、Vuex用法指南1. Vue和Vuex的关系Vuex是专为vue设计的状态管理框架，类似（并且借鉴自）React的Flux。我们知道，Vue的设计借鉴了MVVM（Model
2020-05-24 20:38:32
1015
2
原创 meta标签使用手册
一、meta标签的含义<meta>是HTML中很常用的标签之一，用于描述一些与当前文档有关的元信息。所谓元信息，就是用来描述信息的信息。比如我们通过http发送了一个请求，那么请求主体就是我们的目标信息。而用于描述该信息的那些状态参数，如编码格式、超时时间、消息长度等，就是描述目标信息用的信息，它们就被称为元信息。对于一个HTML文档而言也是一样的。用于描述文档的编码格式、关键字...
2020-05-09 19:57:34
2215
原创 CSS3之媒体查询 - @media
目录一、媒体查询简介二、媒体类型查询三、媒体参数查询1. aspect-ratio2. color3. color-index4. width、height5. grid6. monochrome7. orientation8. resolution9. scan总结一、媒体查询简介媒体查询，简单来说就是检测用户浏览当前网页所使用的设备。常见的媒体设备包括电脑、智能手机、平板电脑、屏幕阅读器、...
2020-05-04 18:40:27
2164
原创 Sass/SCSS：让CSS书写更高效
目录一、Sass/SCSS使用简介1. Sass和SCSS的关系2. Sass简介3. Sass/SCSS、Less还是stylus？一、Sass/SCSS使用简介1. Sass和SCSS的关系没有用过Sass的人很可能会有这样一个疑惑，Sass和SCSS是一个东西吗？其实本文的标题已经给出了暗示，它们本质上是一个东西。具体来说，SCSS是Sass版本3使用的语法。Sass 1.xx和Sa...
2020-04-19 19:01:54
4008
原创 vue-router基本概念总结
目录一、vue-router是什么？二、基本用法1. 起步2. 动态路由3. 嵌套路由4. 命名路由5. 命名视图6. 重定向和别名7. 路由传参8. History模式总结一、vue-router是什么？要搞明白这个问题，你必须先了解什么是单页应用（或叫单页Web应用），以下解释引自百度百科：单页Web应用（single page web application，SPA），就是只有一张We...
2020-04-12 20:18:39
1481
原创 http状态码全解读
目录一、什么是http状态码？二、http状态码详解1. 信息响应（1xx）(1). ```100 continue```(2). ```101 Switching Protocol```(3). ```102 Processing```(4). ```103 Early Hints```2. 响应成功（2xx）(1). ```200 OK```(2). ```201 Created```(3)....
2020-04-05 20:48:01
2890
原创 js基础之模块化规范：CommonJS、AMD、CMD、ES6
目录一、什么是模块化？二、前端模块化规范详解1. CommonJS（1）基本用法（2）运行机制2. AMD3. CMD4. ES6的模块规范（1）基本用法（2）export命令（3）import命令总结一、什么是模块化？模块化是一种将复杂系统分解为更好的可管理模块的方式（引自百度百科）。在软件开发领域，当一个系统的规模变得十分庞大，功能变得非常复杂时，开发和维护该系统就会变得相当困难。这个问...
2020-03-29 21:42:07
673
3
原创 正则表达式（应用篇）
目录一、正则表达式的难点在哪？一、正则表达式的难点在哪？如果你对正则表达式的基本语法还不甚了解，这里有正则表达式（基础篇）可供参考。很多人在使用正则表达式时都有一种感觉：我已经学完了正则表达式的所有基本语法，对正则表达式的用法也轻车熟路，可是一旦接触到一个需求，仍然不知道该如何下手。或者即使写完了，也无法知道自己写的表达式是不是正确的。这也正是正则表达式的难点所在。...
2020-03-23 09:29:32
1116
1
原创 正则表达式（基础篇）
目录一、正则表达式的概念一、正则表达式的概念正则表达式（Regular Expression，常简写为RegExp或RE），又称规则表达式，通常用来检索、替换那些符合某个模式(规则)的文本。正则表达式是为字符串处理而生的，...
2020-03-15 12:19:46
6217
4
原创 前端技术分享之3/8女神节抽奖活动
一、活动背景作为一家团队文化氛围浓厚的公司，每年的3/8女神节活动那是必不可少的。一般来说，这样的活动想要收到足够的效果，那高密度的人员聚集是必不可少的（比如去年就组织了大型送玫瑰花活动加现场抽奖）。奈何今年正是疫情期间，这种形式实在是无法开展。那怎么办呢？于是人力想到了线上抽奖（还有另外两个活动，因为没有参与，所以就不列出来啦），很荣幸的，人力让我来负责前端，与另一个部门一位优秀的后端同事...
2020-03-07 20:14:28
1966
1
原创 web存储详解（cookie、sessionStorage、localStorage、indexedDB）
目录一、web存储概念简介1. 什么是web存储？2. 为什么需要web存储？二、web存储详解1. cookie2. sessionStorage和localStorage(1). 相同点(2). 不同点3. indexedDB三、前端存储与后端存储的关系一、web存储概念简介1. 什么是web存储？web存储指的是在web通信过程中，由客户端（如浏览器）对少量数据进行的本地存储（注：本文...
2020-03-01 12:07:36
4714
1
原创 form表单技术清单
目录一、form简介二、form的全局属性1. action2. accept-charset3. autocomplete4. enctype5. method6. name7. target三、form的输入控件四、form的手动提交1. 构造表单数据对象2. 提交表单总结一、form简介form标签是网页上负责数据采集的元素，称为表单。我们常见的登录页面，其主体构成就是一个form表单，...
2020-02-22 21:56:42
1083
原创 封装第三方组件并上传到npm
目录一、npm简介二、向npm上传一个vue组件1. 创建一个vue项目2. 配置vue.config.js3. 新建packages文件夹4. 编写插件(1). 开发单个组件(2). 开发组件库5. 测试组件6. 配置package.json7. 打包8. 配置.npmignore文件9. 注册npm账号10. 登录npm账号11. 发布组件三、总结一、npm简介npm是内置于nodejs的...
2020-02-15 18:46:32
3440
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人