- 博客(64)
- 资源 (31)
- 收藏
- 关注
RSS订阅原创 Recommended Books：《Pride and Prejudice》
Recommended Books：《Pride and Prejudice》Author Introduction:Jane Austen, born on December 16, 1775, in Steventon, England, is one of the most renowned English novelists of all time. Her works, including “Pride and Prejudice,” are known for their wit, socia
2024-04-10 18:46:07
380
原创 JavaScript判断是否为数字的实用方法
isNaN(parseFloat(value))会将123abc当成数值，所以用isFinite额外判断一次，isFinite的另一个作用是排除无穷数。而且，因为parseFloat的解析是纯字符串解析，没有类型转换，所以不会将null、true、false、''当成数值。接下来我们看看它的原理，我们以字符串123abc为例，我们应该得到false。parseFloat(‘123abc’)得到123；isFinite(‘123abc’)得到false；isNaN(123)得到true；
2024-02-04 16:45:25
326
原创 vue3之shallowRef以及使用对element-plus table的优化尝试
element-plus table 的 ref 替换 shallowRef 后发现表格减少了大概60%~70%的渲染时间，而且数据量越大渲染时间越久，视觉效果也就更明显。shallowReactive只会响应第一层的数据，大部分的表格数据结构也都能适用，如果遇到表格数据中还有对象的形式，也就是得使用ref的形式了那么又一个想法来了，那我是不是可以做成属性控制的呢？深层响应、浅层响应，外部属性传值控制就好了，默认内部shallowRef，如有特殊需要就ref。
2023-04-01 20:50:42
1555
原创 一秒钟打开在线 VS Code 阅读 GitHub 代码 github1s.com
GitHub 上出现了这样一个项目，可以使用户直接在 VS Code 界面读取 GitHub 项目的代码，实现了 GitHub 项目与 VS Code 的无缝衔接。这个项目名为 github1s，只需要在浏览器地址栏 GitHub 网址链接中的「github 」后面添加 1s ，然后 Enter 键，即可在 VS Code 界面访问该项目的 Repo 代码。据项目主页显示，项目开发者来自百度。
2023-01-30 11:15:24
244
原创 浅谈图片宽度自适应解决方案
比较好的图片响应式设想便是在不同的屏幕分辨率下使用不同实际尺寸的图片，而达到在高速网络环境中使用大或超大高清图片，在低速网络或需要替用户节省流量资源的环境中使用小而清晰的图片，保证用户无论在何种环境下都能有良好的浏览体验。来处理，但是，我发现图片宽度并不统一，max-width需要针对每一个宽度去设置，那根本不可行，无疑是自找麻烦，因为实际应用中，我们完全无法预知用户将使用多大宽度的图片。但是，作为一个有点强迫症的开发者，虽然达到了我想要的效果，但加了那么多层嵌套标签，总让我感觉不舒服。
2022-08-22 16:11:39
782
原创 chrome中的一些调试工具
在控制台使用document.querySelector和document.querySelectorAll选择当前页面的元素是最常见的需求了，不过着实有点太长了，咱们可以使用。以前我总是通过JSON.stringify(fetfishObj, null, 2)打印到控制台，再手动复制粘贴，这效率实在是太低了。在与后端接口联调或排查线上BUG时，你是不是也经常听到他们说这句话：你再发起一次请求试试，我这边看下为啥出错了！还是联调或修BUG的场景，针对同样的请求，有时候需要修改入参重新发起，有啥快捷方式？..
2022-08-10 09:44:49
274
原创 macOS系统安装homebrew、nvm、node
2、 随便选一个镜像3、随后提问是否继续安装，输入y，等待…直到出现运行完成，配置完成等字眼，截图略。正常情况都会比较顺利安装完成。nvm是node version manager的简称,是nodeJs的版本管理器,他可以在一台主机上对n...
2022-07-13 17:18:45
561
原创 package.json ^ ~ 的区别
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }, "dependencies": { "vue": "^2.5.2", ..
2021-06-29 14:09:32
94
原创 安装node-sass正确姿势
windows下面安装node-sass，确实令人头痛，正确姿势如下：1、npm或yarm指定淘宝镜像查看镜像# npm命令npm config get registry# yarn命令yarn config get registry修改为淘宝镜像# npm命令npm config set registry http://registry.npm.taobao.org/# yarn命令yarn config set registry http://registry.npm.taoba
2021-06-25 20:47:14
244
原创 js颜色阶梯过渡（均匀渐变）Gradient算法（转）
html中颜色可以使用rgb和hex方式来表示。在色彩中，色相、明度、纯度也都可以产生渐变效果，并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33（即），g的值为16进制的66，和b为16进制的00，转换后用rgb完整表述为：rgb(51,102,0)。其中使用16进制进行加减乘除不方便，尤其还使用了rgb的16进制颜色组合（#336600）。因此我们可以将16进制转换为rgb单个进行梯级运算在进行组
2021-05-21 17:47:29
2881
原创 解决vue-router重复点击报错问题
解决vue-router重复点击报错问题在index.js路由配置文件```javascriptimport Vue from 'vue'import Router from 'vue-router'//解决vue-router重复点击报错问题（this.$router.replace()）const originalPush = Router.prototype.replace;Router.prototype.replace = function replace(location) {
2021-05-20 14:23:35
353
原创 升输入node报错 install [email protected] postinstall:`node scripts/build.js`
这个是因为sass安装时获取源的问题，先修改sass安装的源，再运行npm install就成功了npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
2021-02-26 11:39:44
331
原创 WEB 视频开发-MSE
如果检查主流视频网站的视频，就会发现网站的 video 元素的 src 属性都是 blob开头的字符串。为什么视频链接前面会有 blob 前缀？这是因为视频网站使用了这篇文章要讲的 MSE 来播放视频。Media Source Extensions虽然 video 很强大，但是还有很多功能 video 并不支持，比如直播，即时切换视频清晰度，动态更新音频语言等功能。MSE（Media Source Extensions）就来解决这些问题，它是 W3C 的一种规范，如今大部分浏览器都支持。它使用
2021-02-26 11:36:56
922
1
原创 PC端网页检测识别自动跳转移动端JS代码
把下面的JS代码放到网页的前面<script type="text/javascript"> var bs = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1
2020-12-17 15:24:43
718
原创 Heatmap.js 一个强大简易的web动态热图
Heatmap.js 一个强大简易的web动态热图最近在做热力图效果，背景图上绘制热力图，最开始使用的事Echarts，但是Echarts绘制是基于map，还其他一些第三方的库也很多基于map，还要进行坐标转化，麻烦的一批；最后还是研究一下heatmap.js这个库。by the way：需求迫于无奈使用了阿里的G2，交互效果勉强符合，但是看他们的API的时候，真的是麻烦的一批啊，API很多很乱，慎用。接下来看Heatmap.js:官网：http://www.patrick-wied.at/stat
2020-12-03 19:06:41
6194
原创 npm install 安装包报错（npm ERR! Maximum call stack size exceeded）
起初安装webpack的时候报的错，npm ERR! Maximum call stack size exceeded一开始以为版本问题，升级了一下；npm install -g npm还是不行，于是清除了一下缓存：npm cache clean -f好了，继续你的骚操作吧
2020-10-15 11:29:15
396
原创 微信小程序-live-player-实时视频-截图并转文件流
<live-player id="players" src="http://h5player.bytedance.com/video/flv/xgplayer-demo-360p.flv" mode="live" autoplay="true" style="width: 100%; height:500rpx;" />this.videoContext = wx.createLivePlayerContext("players");this.videoContext.snapshot(
2020-10-14 14:25:14
2479
2
原创 vue项目中遇到的一些问题和解决办法
自己平时开发笔记使用1、vue 生命周期 beforeDestroy 和 destroyed 调用情境一：离开当前路由，会直接调用；当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁情景二：离开当前路由，不会直接调用，需要程序控制调用；当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用beforeRouteLeave(to, from, next
2020-10-13 17:25:45
669
原创 HTML 回显HTML片段 保留换行空格问题
方法一：添加样式：white-space: pre-wrap;<div class="wrapper" v-html="content" ></div>.wrapper{ white-space: pre-wrap;}方法二：直接用pre标签<pre></pre>
2020-10-10 17:42:34
185
原创 视频截图、截图下载、图片base64转blob、blob转file文件流
工作中做视频相关的内容，实时视频播放、历史视频播放，视频为推拉流方式，遇到的一些处理方式，记录了一下，或许不完善，不定期更新完善直接先上代码了，后期整理let screenMagnify = function () { // debugger let player = playerInstance let root = player.root let screenShotOpt
2020-09-25 14:39:28
612
原创 JavaScript原生的一些东西（不定期更新）
节点操作添加节点：appendChild insertBefore删除节点：removeChild获取节点：getElementById getElementsByTagName getElementsByClassName querySelector querySelectorAll克隆节点：cloneNode创建节点： innerHTML createElement document.write()原型，原型链原型对象：系统会给我们定义的每一个构造函数都会默认绑..
2020-08-28 11:34:19
120
原创 前端blob对象创建文件并下载
一、Blob对象Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。var aBlob = new Blob( array, options );array 是一个由ArrayBuffer（二进制数据缓冲区）、ArrayBufferView（二进制数据缓冲区的array-like视图）、Blob、DOMString等对象构成的Array，或者其他类似对象的混
2020-08-04 18:45:01
991
原创 H5的input获取焦点滚动可视区域以及失去焦点情况
其实弹框之所以影响页面布局，我碰到的一般都是因为页面时position:fixed时，键盘一弹出，布局就乱了，我的解决方案是，首先就是把fixed尽可能的改成其他的，接着监听窗口大小变化事件，然后处理ios兼容问题代码//监听窗口大小变化事件window.addEventListener('resize', function () { if(document.activeElement.tagName === 'INPUT'){ document.activeElement.scrollI
2020-08-02 12:04:24
1057
原创 VSCode设置背景图
两种方式：一个是根据官方配置来改，只能覆盖半边背景；另一个就是暴力流直接改编辑器的样式文件就好了，可以任意位置改方式一，官方配置1.首先在vscode扩展中，找到background这个插件2.完成第一步就已经有默认背景了，可是想设置自己喜欢的怎么办？往下看打开 文件>首选项>设置 /** 编辑器背景 */ "window.titleBarStyle": "custom", //首先把标题栏改为非原生的 "background.enabled": true,
2020-07-22 13:50:17
2321
原创 call、apply 和 bind 能做什么？如何使用？之间的区别？模拟一个？
解析：这里我给大家画了一张思维导图：结合这张图来说明，会清楚得多：call、apply 和 bind，都是用来改变函数的 this 指向的。call、apply 和 bind 之间的区别比较大，前者在改变 this 指向的同时，也会把目标函数给执行掉；后者则只负责改造 this，不作任何执行操作。call 和 apply 之间的区别，则体现在对入参的要求上。前者只需要将目标函数的入参逐个传入即可，后者则希望入参以数组形式被传入。在实现 call 方法之前，我们先来看一个 call 的调用示范：结合 ca
2020-07-13 21:44:11
465
原创 通过几个面试题剖析vue源码
1. 说一下对MVVM原理的理解传统的MVC指的是，用户操作会请求服务器路由，路由会调用对应的控制器来处理，控制器会获取数据，将结果返回给前端，页面重新渲染MVVM：Model是数据模型；view代表UI组件界面视图；viewModel监听数据模型和控制视图行为，通过双向数据绑定把view和model连接起来，开发者只需要关注业务逻辑，不用手动操作DOM，数据状态的维护完全由MVVM来管理2. 响应式数据原理采用数据劫持结合 发布-订阅者模式，通过Object.definePrope
2020-07-13 15:03:27
319
原创 Js实现阻止浏览器返回的功能
无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回。目前有很多推广的朋友也在问,如何实现:“怎样才能禁用浏览器的后退按钮?”,或者“怎样才能防止用户点击后退按钮返回以前浏览过的页面？在禁止后退的页面直接添加下面的js代码即可:(function(){ if(window.history && window.history.pushState) { window.
2020-06-16 18:46:23
13643
4
转载 Async/Await替代Promise的6个理由
译者按: Node.js 的异步编程方式有效提高了应用性能；然而回调地狱却让人望而生畏，Promise 让我们告别回调函数，写出更优雅的异步代码；在实践过程中，却发现 Promise 并不完美；技术进步是无止境的，这时，我们有了 Async/Await。原文: 6 Reasons Why JavaScript’s Async/Await Blows Promises Away译者: Fundebug为了保证可读性，本文采用意译而非直译。Node.js 7.6 已经支持 async/await 了，
2020-05-29 11:44:08
339
原创 对于原型链的简单理解
上一篇说到 构造函数、原型、实例 之间的关系，再贴一下1、每个构造函数都有一个原型属性prototype，它指向原型对象2、原型对象都包含一个指向构造函数的指针（constructor）3、而实例都包含一个指向原型对象的内置指针（__ proto__）接下来说一下 原型链 的理解：假如让构造函数A原型对象等于另一个构造函数B的实例，那么A的原型对象包含了一个指向B原型的指针，相应的，A原型中也包含了一个指向B构造函数的指针；假如B原型又是另一个构造函数C的实例，那么上面这个关系依然成立，这
2020-05-26 18:18:52
585
原创 构造函数，原型，实例之间的关系
关系：1、每个构造函数都有一个原型属性prototype，它指向原型对象2、原型对象都包含一个指向构造函数的指针（constructor）3、而实例都包含一个指向原型对象的内置指针（__ proto__）代码：function Person(){ } //构造函数Person.prototype.name = "bree"; //在构造函数的原型对象上添加属性Person.prototype.isName = function(){ alert(this.name)}v
2020-05-18 18:58:42
335
原创 彻底弄懂HTTP缓存机制及原理（转）
前言Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确的理解前端...
2020-04-28 19:10:12
542
原创 vue项目性能优化（汇总）
Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。一、基础优化（代码以及编码规范）1、v-if 和 v-sh......
2020-01-16 10:27:43
2172
2
原创 关于Gzip压缩
一、Gzipgzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。gzip压缩比率在3到10倍左右，可以大大节省服务器的网络带宽。而在实...
2020-01-09 18:15:33
3458
原创 flex布局-所有属性整理
/* flex布局： 弹性盒布局，flex容器，子元素flex项目 默认两根轴：水平轴和垂直交叉轴，项目默认沿主轴排列 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。*//* 一、容器的属性 flex-direction flex-wrap f......
2019-12-18 15:04:12
846
原创 JS异常的处理
js中的异常处理语句有两个，一个是try……catch……，一个是throw。try……catch用于语法错误，错误有name和message两个属性。throw用于逻辑错误。对于逻辑错误，js是不会抛出异常的，也就是说，用try catch没有用。这种时候，需要自己创建error对象的实例，然后用throw抛出异常。1、try……catch……的普通使用 try{ ......
2019-12-17 12:06:54
5301
java堆内存分析工具EclipseMemoryAnalyzer
2020-12-03
nodeServer.rar
2020-06-08
Axure 8 实战手册(200个)+PC端&移动端+元件库+交互原型+系统框架.rar
2020-03-26
IE5,IE6,IE7,IE8的css兼容性列表
2018-11-15
全国省市地理位置经纬度一览表
2018-11-15
JS自增长效果(多个)
2018-11-15
微信企业号接口开发源码-Java
2018-08-22
一键抓取当前网站页-网站精灵
2018-03-08
canvas动态划线（canvas跟随鼠标变幻线条...）
2018-01-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人