- 博客(121)
- 资源 (6)
- 收藏
- 关注
RSS订阅
转载 我们穷极一生，究竟追寻的是什么？
王羲之说：夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。人这一生，如昙花一现。如草木春绿秋枯，如曦月东升西落。但偏偏这一生欲望却有很多。小时候溪头卧剥莲蓬，忙趁东风放纸鸢，急走追黄蝶，也傍桑阴学种瓜，归来饱饭黄昏后，不脱蓑衣卧月明。长大后希望金榜题名，希望有佳人相伴，希望钱财不断，希望节节高升，希望高朋满座，希望夜夜笙歌。老了又想要健康长寿，僮仆欢迎，稚子候门，有一盘棋，一知己，一壶酒，一庭院，安享天伦。你看世人慌慌张张，不过图碎银几两。偏偏这碎银几...
2020-05-13 10:22:42
352
1
原创 windows下使用Linux
window 下安装 Linux 子系统windows应用商店下载 Ubuntu配置 控制面板–》程序与功能–》启动或关闭Windows功能 勾选 适用于Linux的Windows子系统，重启。安装完成Ubuntu即可在window下使用 linux连接到Linux 服务器连接到服务器 ssh [email protected]输入密码???进入目标文件夹cd /usr/share/nginx/frontEnd/dsy-web删除目标文件夹rm -rf dist断开连接e
2022-01-13 16:13:02
1407
原创 npm 命令备忘录
清理桌面时发现以前看 npm 的命令时做的一点笔记，比较琐碎，删了怕忘。在这里记录一下，供以后翻阅。npm全局安装的包位置npm i -g 命令全局安装的包路径： Windows 默认放在 C:\Users\username\AppData\Roaming\npm\node_modulesnpm root -g 查询npm全局安装的包的安装位置npm cache机制npm缓存策略： npm@5中更新，其中最大的改进是对缓存策略的更新npm 缓存路径查看命令 npm config ge
2021-05-20 16:39:25
1961
3
原创 vue 实现检测网络状态的组件 offline-handler
主要利用浏览器的 offline 和 online 事件来给出提示。template<template> <div v-if="mask" class="offline-mask"> <h2 class="offline-mask-title"> {{ offlineTitle }} </h2> </div></template>script<script>export defa
2021-05-08 10:08:40
2144
3
原创 npm login超时或npm publish报权限错解决方案
最近研究脚手架，在npm时遇到问题，记录一下心得。npm login 长时间无响应或如下报错错误原因：npm 使用了淘宝镜像导致的。解决方法：切换源为npm考虑到我们npm 下载时候需要淘宝镜像，所以需要在镜像间切换。方法：全局安装nrm小工具做快速切换npm install -g nrm nrm use taobaonrm use npm然后再登录 npm：npm login根据提示输入用户密码及邮箱即可。查看登陆信息：npm who am i问题解决。...
2021-04-29 19:23:48
3060
原创 vue3.x 中watchEffect与watch的区别
watchEffect与watch的区别：watch 是需要传入侦听的数据源，而 watchEffect 是自动收集数据源作为依赖。watch 可以访问侦听状态变化前后的值，而 watchEffect 没有，watchEffect获取的改变后的值。watch 是属性改变的时候执行，当然也可以immediate，而 watchEffect 是默认会执行一次(相当于自带 immediate)，然后属性改变也会执行。...
2021-03-01 10:46:26
1823
1
原创 vue 3.0 尝鲜
vue 3.0 尝鲜前言最近了解了一下 vue3.0 新特性， 最大的感受是前端框架不论 react 还是 vue， 都正在趋于统一化。vue3 的语法和 react 的语法愈发相似。vue3是基于vue2版本的平滑升级，所有2版本的语法在3版本中同样适用，因此我们可以相当舒适的完成从2版本到3版本的过渡。vue3 特性较 vue2.x 版本，vue3.0有着以下特性：性能提升打包大小减少41%初次渲染款55%, 更新快133%内存使用减少54%Composition AP
2020-11-09 14:44:47
175
1
原创 webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）
如今，webpack毫无疑问是前端构建领域里最耀眼的一颗星，无论你前端走哪条路线，都需要有很强的webpack知识。webpack的基本用法这里就不展开讲了。主要探讨一下如何提高webpack的打包速度。这篇文章以vue cli3.0+，webpack4.0+，nodejs10.0+这几个版本为例。一、打包分析1.1、速度分析我们的目的是优化打包速度，那肯定需要一个速度分析插件，此时speed-measure-webpack-plugin就派上用场了。它的作用如下：...
2020-10-12 19:14:39
938
转载 vue响应式原理解析
原文链接.什么是vue响应式数据发生变化后，会重新对页面渲染，这就是Vue响应式。想要完成这个过程，我们需要做什么侦测数据变化收集视图依赖了哪些数据数据变化时，自动‘通知’需要更新的视图部分，并进行更新他们对应的专业术语分别是：数据劫持/数据代理依赖收集发布订阅模式如何侦测数据变化有两种办法可以侦测到数据变化：只用 Object.defineProperty 和 ES6 的 Proxy，这就是进行数据劫持或数据代理。Object.defineProperty实现Vue 通过
2020-09-15 10:31:08
156
原创 手撸一个自定义关联方式的多选树组件
目录提示业务场景实现思路功能拆分实现逻辑代码实现树的实现逻辑组件预览提示文章为公司内部提供的分享文章，业务场景描述部分会涉及到内部框架 yt-org 以及 yt-admin 等陌生词汇，读者请手动忽略，或直接读 实现思路 及 实现代码部分。业务场景首先提一下我们基于 el-cascader 二次封装的机构选择组件 yt-org , 接触过营销平台的小伙伴都知道, 这个组件用起来是相当舒适的。没接触过没关系，我大概说一下功能：该组件为全局组件, 集成在 yt-admin 中第一次调用时会请求
2020-08-10 09:42:03
505
原创 typescript基础学习（一）
简介TypeScript 是微软推出的一门语言TypeScript 是JavaScript 的超集，包含 ES新增了类型系统和完整的面向对象语法使用 TS 编写的项目更加健硕，更加便于扩展和维护使用TS 文件的解析方式：TS 编译为 JS ，再交给浏览器解析运行。 类似 Less --> css（）1. 全局安装npm i -g typescript作用： 负责将 TS 代码转换为浏览器和 node.js 识别的 JS 代码。查看是否安装完成命令 tsc -v 。
2020-07-27 18:09:20
457
1
原创 vue中computed和watch的区别详解
计算属性computed：支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用 computed如果computed 属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性
2020-07-27 11:41:42
5419
1
原创 vue高频面试题汇总
文章目录vue生命周期及各个生命周期阶段都干了什么？为什么vue组件中data必须是一个函数？vue中v-if和v-show有什么区别？$nextTick是什么？v-for key的作用组件传值常用的事件修饰符vue生命周期及各个生命周期阶段都干了什么？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el
2020-07-27 09:57:49
547
原创 el-select组件的options条数过多时的解决方案
业务场景当使用el-select组件时，如果options数量过多，会存在的弊端：页面渲染出大量el-option节点，会导致页面卡顿甚至卡死，用户体验极差。选择时条目众多，查找困难。本次我遇到的场景是options数量为6-9千的情况。解决思路从总options中取出固定条目的小option（renderOption）用于页面渲染，利用el-select提供的filter-method方法进行搜索过滤，在搜索时用过滤结果更新renderOption。代码实现下面是vue的组件封
2020-06-11 14:12:13
5492
6
原创 Live2D的基础使用
效果图：代码如下：<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script><script> L2Dwidget.init({ "model": { //jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型 js.
2020-05-27 16:55:49
2427
1
原创 vue cli3配置文件vue.config.js中配置解析
//vue.config.jsonconst path = require('path');// const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）// const CompressionPlugin = re...
2020-04-29 14:49:02
1907
原创 ES11新特性概览
目录String.prototype.matchAll - 由 Jordan Harband 提出import() - 由 Domenic Denicola 提出BigInt – 任意精度整数，由 Daniel Ehrenberg 提出Promise.allSettled - 由 Jason Williams, Robert Pamely 和 Mathias Bynens 提出globalThis...
2020-04-28 15:07:07
13939
1
原创 React
创建项目npx create-react-app my-app// npx 与 npm 的区别在与 npx 临时创建，一切都会以最新版本安装
2020-04-22 19:15:14
138
原创 代码编辑器插件：Monaco Editor的基本使用
安装1、monaco-editor和monaco-editor-webpack-plugin安装npm install monaco-editor --save-devnpm install monaco-editor-webpack-plugin --save-dev2、配置vue.config.js(vue-cli3.0需在根目录中新建)const MonacoWebp...
2020-04-22 13:55:21
5837
原创 CSS3中transform属性详解
兼容性Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-trans...
2020-04-10 17:24:46
475
原创 ES6新增方法：startsWith()方法和endsWith()方法来判断字符串以什么开头或者什么结尾
ES6新增方法：startsWith()方法和endsWith()方法来判断字符串以什么开头或者什么结尾startsWith()方法该startsWith()方法确定字符串是否以指定字符串的字符开头，返回true或false视情况而定。判断字符串以什么开头一般的话是用于来判断是否以http://开头或者以file:///开头参数接受两个参数第一个参数，要在此字符串开头搜索的字符，第...
2020-03-31 20:20:28
5544
原创 2020年初关于新型冠状病毒引起的思考
1、保证良好的现金流：（起码因各种不可抗力，如疫情或失业、不工作）可供6个月的现金储蓄，简单的计算，例如：在外工作的人，房租+吃喝基本开销=4000月每个月，6个月=3万元现金在手里。（如果住在本地家里，没有租房支出，单纯的吃喝基本开销，3万元基本可以支持大半年或一年的开销。起2、消除不必要的债务：除了大部分人正常的房贷以外（出现类似此次疫情，已经给很多有房贷的人带来极大的心理和财务压力了），...
2020-02-29 17:54:40
849
原创 Canvas绘制箭头
Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法，也就是说，如果我们需要在Canvas中绘制箭头是需要自己封装函数来处理的。封装函数// ctx：Canvas绘图环境// fromX, fromY：起点坐标（也可以换成 p1 ，只不过它是一个数组）// toX, toY：终点坐标 (也可以换成 p2 ，只不过它是一个数组)// the...
2020-01-06 17:57:49
1093
原创 前端 ArrayBuffer 与 Blob 互转
首先说一点基础知识：responseType 可选的参数有："text"、"arraybuffer"、"blob" 或 "document"；对应的返回数据为 DOMString、ArrayBuffer、Blob、Document；默认参数为"text"。前端请求二进制数据的时候需要设置数据响应格式：xhr.responseType = "arraybuffer"；写法如下：...
2019-12-05 17:47:04
22301
原创 element-ui中el-select下拉框选项过多的优化方案
el-select中options数据超过3000条就会造成前端页面明显卡顿，本次我的遇到的业务场景数据是近2w条，因此在不优化的情况下页面压根无法使用，下面给出我的优化过程。一种优化思路：element-ui的select有一个remote-method，支持远程搜索，我们让服务端支持一下不就可以了，当然这是一种解决的方案。但是有时候这种方法对我并能够不适用，因为这样会出现回显问题，回...
2019-11-25 11:08:34
18763
5
转载 js通过html2canvas，jspdf，canvg来对网页进行截图生成pdf
通过html2canvas，jspdf就能够生成截图以及pdf，但是如果对图表（svg）就需要canvg来转换svg生成为图片，再插入到pdf里。1.html2canvas用法：首先需要引入这两个文件，最新的可以去git下载示列：function down2(){ var str = $('#example-2'); //console.log(str); htm...
2019-10-25 18:04:29
1012
原创 前端对图片处理的方法总结
将以base64的图片url数据转换为Blob 可以直接上传文件/** * 将以base64的图片url数据转换为Blob 可以直接上传文件 * @param urlData * 用url方式表示的base64图片数据 */function convertBase64UrlToBlob(urlData){ var bytes=window.atob(urlData.spl...
2019-10-24 19:06:23
378
原创 ECMAScript 6常用知识点及实例整理，包含（ECMAScript 7/8/9）
提示：文章篇幅较长，涉及知识点较多，建议收藏后观看。目录let 和 const解构赋值箭头函数的使用模板字符串函数默认参数展开运算符对象字面量 与 classPromise数组新增方法对象新增方法指数函数的中缀形式
2019-09-29 16:03:10
974
原创 复制控制台中打印的json对象
1. 右键点击需要处理的对象，会出现Store as global variable，点击；2. 选择之后会发现控制台出现以temp开头的变量3. 执行 copy(变量)。如copy(temp1)。 注意是对象，不是字符串。4. 按Crtl+V就会发现对象已经在你的剪切板了。...
2019-09-16 14:01:40
955
1
原创 js自定义滚动条代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
2019-08-23 09:49:47
181
原创 chrom下修改input输入框默认背景色
chrom浏览器的自动填充表单功能Autofill 在使用时，填充的表单输入框会变成奇葩默认的黄色底色，这对网页整体的观感造成了很大影响，而且处理起来很麻烦。分析：之所以会出现这种情况是因为 chrom会自动为 input 增加以下样式：input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofi...
2019-08-22 18:05:21
5188
原创 h5新增标签和表单属性
一、h5新增结构性标签(有意义的div)1.header 定义网页的头部2.nav 定义网页的导航部分3.section 定义网页的某个区域4.footer 定义网页的底部5.article 定义网页的一篇文章6.aside 定义网页的侧边栏7.hgroup 将网页的标题进行组合8.figure 将网页的元素进行组合9.figcaption 给figure组合添...
2019-08-02 15:06:39
438
原创 js中常用字符串方法总结
includes()判断一个字符串是否包含其他字符串// 返回布尔值, 表示是否找到了参数字符串let s = 'Hello world!'s.includes('0') // true// 支持第二个参数,表示开始搜索的位置s.includes('Hello', 6) // falseendsWith()判断一个字符串的结尾是否包含其他字符串的字符// 返回布尔值,...
2019-07-11 18:15:34
126
转载 论jQuery的生前身后
注：摘自知乎文章：为什么说 jQuery 会退出前端的舞台？原文链接有人说jQuery已经退出历史舞台，非也，何？说这个问题之前，我们要先把关注点放在什么是库，什么是框架，什么是jQuery上。1、JS库直白点的话，JS库就是一堆工具函数写好了，放到一个文件里，让你用，有的函数是简化你的DOM操作，有的函数是给你解决逻辑问题，有的是增加对象的属性方法，有的则是给你提供一些特效功能....
2019-06-20 10:01:08
145
原创 JSX在vue中使用
什么是JSX?JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.vue中大部分场景是不需要用render函数的,还是用模板更简洁直观.使用template// item.vue<template> <div> ...
2019-05-29 18:54:35
8117
1
原创 UEditor的使用
一、下载包：从Ueditor的官网下载1.4.3.3jsp版本的Ueditor编辑器，官网地址为： http://ueditor.baidu.com/website/下载解压后会得到如果下文件目录：将上述Ueditor文件夹拷贝到vue项目的static文件夹中，此文件夹为项目的静态服务文件夹；二、修改配置在ueditor.config.js中修改如下代码：/...
2019-04-28 14:48:47
3006
原创 词云解决方案：js2wordcloud
JavaScript生成词云图。基于wordcloud2.jsGitHub传送门：Js2WordCloudInstallation：通过script标签引入：<script src="dist/js2wordcloud.min.js"></script>npm安装：npm install js2wordcloud --saveUsage：v...
2019-04-18 16:46:51
4708
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人