- 博客(125)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 CSS color-mix() 函数
color-mix() 是一个即将推出的 CSS 颜色函数，它能够根据指定的颜色模型（如 RGB、HSL 或 Lab）对两个或多个颜色进行混合。mix-color: 想要混合到背景颜色上的颜色。background-color: 背景色，即混合的基准颜色。[weight]（可选）: 一个介于0到1之间的数字，表示混合色的比例，默认值为 50%（即0.5）。当 weight 更接近 0 时，混合结果更接近 background-color；反之，更接近 mix-color。例如：body {
2024-03-22 14:02:22
598
原创 vite打包配置基础
Vite（法语意为“快速”）是由 Vue.js 之父尤雨溪开发的一款现代化的前端构建工具，其设计目标是通过提供更快的冷启动速度、更高效的热更新和智能的按需编译打包机制，极大地提升前端开发体验。本文将详细介绍如何利用 Vite 对项目进行优化打包。
2024-03-21 09:36:23
595
原创 webpack和vite的区别是什么
2.Vite使用的 rollup (注：Rollup 是 ESModule 的产物)，在 Tree Shaking 上有着天然的优势，打包体积更小，运行速度更快。esbuild 是采用 Go 语言编写的，Go 语言是纳秒级别的，而 Node.js 是毫秒级别的。ESModule 可以在编译时进行静态优化，还支持 Tree shaking，可以在代码打包时删除未使用的代码，从而减少打包后代码的体积和加载时间，这也是 ESModule 比 CommonJS 更快的原因之一。
2024-03-15 11:10:00
605
原创 JavaScript获取字符串的字节长度
TextEncoder() 构造函数总是返回一个新创建的 TextEncoder 对象，该对象将生成具有 UTF-8 编码的字节流。TextEncoder 接口不继承任何属性。我们可以换一种思路，既然要求是获取字符串的字符长度，我们可以先把字符串直接转换成字节，然后直接获取字节的长度就可以了。是一个内置的API，可用于将字符串转换为字节数组。
2023-09-13 15:47:45
1337
原创 web浏览器打开本地exe应用
像百度网盘那样打本地exe应用的办法。我们可以通过添加注册表. 向系统添加一个类似于http的私有协议（仅本地有效），然后浏览器调用。
2023-08-07 14:59:25
3593
3
原创 centos7（虚拟机）下安装nginx，及Nginx配置报错处理，Nginx常用命令
centos7（虚拟机）下安装nginx，及Nginx配置报错处理nginx: [error] open() “/usr/local/nginx/logs/nginx.pid” failed (2: No such file or directory)nginx -s reload报错[error] invalid PID number "" in "/usr/local/nginx/logs/nginx.pid"
2022-11-29 11:44:41
1720
1
原创 最新uniApp微信小程序获取头像open-type=“chooseAvatar“ @chooseavatar方法
最新uniApp微信小程序获取头像open-type="chooseAvatar" @chooseavatar方法
2022-11-25 10:22:07
20449
21
原创 JSON.stringify进阶
JSON.stringify(value[, replacer [, space]])：参数value将要序列化成 一个 JSON 字符串的值。replacer 可选如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。space 可选指定缩进用的空白字符串，用于美化输出（pretty-prin
2021-10-13 11:19:35
172
原创 Vue3 watch与watchEffect区别与进阶
Vue3 watch与watchEffect区别watch 手动(定向)依赖特性示例watchEffect 自动依赖特性示例watchEffect 与 watch 有什么不同？watchEffect 进阶停止监听onInvalidate()watch 手动(定向)依赖watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。
2021-10-09 16:51:19
625
转载 你需要知道的30个ES6—ES12开发技巧！
又是一顿爆肝，又是一篇万字长文，重新梳理了一下ES6——ES12的常用新特性，很多特性在开发中还是很实用的，希望对你有一点点帮助！文章内容较多，建议先收藏在学习呢！ECMAScript是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言，这种语言被称为 JavaScript 。简单来说，ECMAScript 是 JavaScript 的标准与规范，JavaScript 是 ECMAScript 标准的实现和扩展。自2015年开始，ECMAScript发布的版本如下：发布时间.
2021-09-29 16:04:20
260
原创 前端IndexedDB数据库封装
IndexedDB介绍浏览器数据库 IndexedDB IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。 IndexedDB 是一个比较复杂的 API，涉及不少概念。它把不同的实体，抽象成一个个对象接口。学习这个 API，就是学习它的各种对象接口。
2021-09-13 16:26:10
904
原创 2021 年全球最受欢迎的 11 个 Node.js 框架
2021 年将使用的 11 个 Node.js 框架在我们看到 2021 年最佳 Node.js 框架之前，让我们先谈谈 Node 及其在编程中的作用。Node.js 是一个开源的 JavaScript 运行时。换句话说，一个在浏览器之外运行 JavaScript 的执行环境，就像任何编程语言一样。这是一场革命，允许将世界上最著名的语言之一 (JavaScript) 用于客户端和服务器端脚本编程。自 2009 年诞生以来，Node.js 的受欢迎程度一直在稳步上升。随着 Node 开发.
2021-09-13 16:02:14
3778
原创 JavaScript 生成txt文件并下载到本地
function download(filename, text) { var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); pom.setAttribute('download', filename); if (document.createEvent) { v.
2021-08-16 14:46:55
1991
原创 javaScript 中 reduce() 详解、示例
javaScript 中 reduce() 详解、示例定义和用法educe() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数参数描述书functio
2021-07-01 11:13:16
252
原创 vue 自定义指令过滤特殊字符
export default (app) => { app.directive('emoji', { mounted(el, binding) { // console.log(binding) el.oninput = (e) => { if (e.target.value != '') { const pattern = new RegExp(/[^a-zA-Z0-9_\u4e00-\u9fa5 ]+$/gi); .
2021-06-01 09:50:48
1475
原创 前端面试题总结（一）
Promise.all()异常处理promise.all中任何一个promise 出现错误的时候都会执行reject，导致其它正常返回的数据也无法使用。解决办法：由于Promise.all(request).then(…).catch(…) 会在所有request都resolve时才会进then方法，并且把所有结果以一个数组返回，只要有一个失败，就会进catch。而如果在单个请求中定义了catch方法，那么就不会进Promise.all的catch方法。因此，可以在单个的catch中对失败的pr
2020-11-19 11:54:36
185
原创 nvm安装、更新，管理node.js版本
nvmnvm是node版本管理工具。为了解决node各种版本存在不兼容现象，nvm是让你在同一台机器上安装和切换不同版本的node的工具。nvm安装在安装nvm之前，首先需要卸载电脑上已安装的node/npm。Windows nvm安装下载nvm-windowshttps://github.com/coreybutler/nvm-windows/releasesMacOS安装nvmcurl -o- https://raw.githubusercontent.com/creationix/nv
2020-11-12 14:55:08
10144
转载 美不可言的CSS 三
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。内发光注意到box-shadow还有个inset，用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形再加点动画和滤镜效果，“猩红之月”闪亮登场！注意到它散发着淡淡的红光，其实就是2个伪元素应用了模糊滤镜所产生的效果本demo地址：Crimson Crescent Loadingtext-shadow文本阴影，本质上和box-sh...
2020-11-06 15:05:31
325
转载 美不可言的CSS 二
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟（delay）这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚0.5秒（也就...
2020-11-06 15:00:04
215
转载 美不可言的CSS 一
3D 方块如何在 CSS 中创建立体的方块呢？用以下的 SCSS mixin 即可方块的长度、高度、深度都可以通过 CSS 变量自由调节@mixin cube($width, $height, $depth) { &__front { @include cube-front($width, $height, $depth); } &__back { @include cube-back($width, $height, $depth); }
2020-11-06 14:53:42
241
转载 他写出了 Vue，却做不对这十道 Vue 笔试题
请原谅我起了这么个浓浓营销号味道的标题。但这可丝毫没有夸大宣传，而是前端娱乐圈今日份的瓜——有十道关于 Vue 的选择题，在群里引出了一众社区知名人士竞折腰，最后钓出了 Evan You 本人亲自挑战……然后他自己也做错了（其中的某两道）。鲁迅会做错鲁迅文选的阅读理解？有截图为证：所以，只要答对这十道题里的九道以上，你就实打实地（在做题这个维度上）超越了尤大，比他更懂 Vue 了噢！是不是很心动？其实要求都不用这么高，只要做对六七道，就已经可以吊打一群小有名气的社区选手了。所
2020-11-04 16:02:22
394
1
转载 让你30分钟快速掌握vue 3
让你30分钟快速掌握vue 3经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。setup() ref() reactive() isRef() toRefs() computed() watch() LifeCyc
2020-11-04 11:02:10
193
原创 2020年前端面试题
节前公司突然决定解散技术部，整的小伙伴们手忙脚乱，怎么好好的公司就突然要解散呢！博主刚来这个公司才4个多月，被整的一脸懵逼。剩下就是一些扯皮的事，遇到这么坑的公司也是没有办法。都说金九银十，称这大好的日子赶紧去面试找个靠谱的公司吧！下面整理了一些前端面试题，希望能给在找工作的小伙伴一些帮助。基础的面试题，在这里就不一一说了，主要说一下进阶的面试题。一、Vue Key指令的作用key是为每个vnode指定唯一的id，在同级vnode的Diff过程中，可以根据key快速的进行对比，来判断是否为相同节
2020-10-14 12:55:50
234
转载 webpack(基础篇)
一、基本使用先让我们来看看最基本的一种使用webpack的方式.首先你得知道, webpack和其它依赖一样, 是包括本地安装和全局安装的, 但是在此我建议你使用本地安装的方式, 不推荐全局安装。因为使用了全局安装之后, 会使你的项目中的webpack锁定到指定版本中，并且在使用不同的webpack 版本的项目中，可能会导致构建失败.所以在后面的教材中, 我都会以本地安装webpa...
2020-06-09 14:15:08
373
原创 Vue打包优化之gizp压缩
前言：gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。在 Vue CLI3 中webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。安装插件：npm i -D compression-webpack-pluginwebpack配置在 vue.config.js 中按照如下方式进行配置const CompressionPlugin = r
2020-05-22 12:00:07
577
原创 Vue打包优化之路由懒加载
前言当打包构建项目时，js包会变得非常大，影响页面加载，我们把不同路由的对应组件分割成不同的代码块，然后当路由被访问的时候加载对应的组件，这样能提升访问效率。切分之后，并不是浏览器访问某个路由，才去下载对应的模块，仍然在首次访问程序时，下载所有模块，只不过每个模块分的很小，加载首页时需要的模块能够更快的下载下来，所以能够更快的显示解决方案 基础写法，没有懒加载，打包分离代码 路由懒加载，import()方法。（按需加载） vue的异步组件+webpack的ensure(
2020-05-14 18:20:43
531
原创 前端代码优化（基础）
索引优化代码先来看一个简单的例子：需求是星期回显，传 1 回显 星期一,传 7 回显 星期日,其他类推，无效回显空字符串；类似的需求还有回显月份第一种实现方法： switch 实现function previewWeek(i){ switch(i){ case 1: return '星期一' break;...
2020-04-19 13:53:59
814
原创 埋点与监控
什么是埋点？百度原话：埋点分析，是网站分析的一种常用的数据采集方法其实通俗的讲前端埋点主要是为了运营以及开发人员采集用户行为数据，以及页面性能等数进行后续的数据分析，举一些例子：比如，拿到页面在各种网络下的加载时间，再比如拿到用户在某个页面的停留时间！埋点的目的是什么？在现今用户就是上帝的年代，互联网竞争如此之大的时代，有针对性的对每个用户的喜好定制不同的内容，按照用户的喜好去...
2020-04-19 12:48:21
2412
原创 关于Element-UI Upload 上传图片第二次或第N次无反应的问题
如果我们设置了 :limit="1" ，在我们上传完成第一张图片后，如果想更改当前的图片那么很幸运的告诉你，不行、没效果。发现后是不是立刻百度，会发现很多错综复杂的解决方案！直到自己眼晕脑胀也没有一点办法，那么很幸运的告诉你，你找到了我！导致整个问题的原因是因为你没有清除当前files，导致他一直保存这你第一次上传文件的信息，只要你把他一刀切掉就好了！那么问题来了，应该怎么清除呢！看下面...
2020-03-11 19:07:17
7504
12
原创 Vue 图片加载错误处理（显示默认图片）
在Vue H5项目中，图片加载错误，需要给图片一个默认的配图，如图：如果不给默认图片的话会是这样，如图：这样是不是很丑，哈哈哈哈！那么我们应该怎么处理呢？上码：<img :src="图片地址变量" alt="" @error="imgError(图片地址变量)">imgError(图片地址变量){ 图片地址变量 = require(...
2020-01-20 16:51:50
3266
原创 简版仿vue双向数据绑定
简版双向数据绑定 了解Object.defineProperty()： 这个API是实现双向绑定的核心，最主要的作用是重写数据的get、set方法，现在的三大框架(vue react angular)也都是通过这个API来实现双向绑定的。使用方式：let obj = { singer: "周杰伦"};let value = "青花瓷";Object.defineProper...
2020-01-06 11:23:07
272
原创 Vue的钩子函数-守卫篇
前言说到Vue的钩子函数，可能很多人只停留在一些很简单常用的钩子(created,mounted)，而且对于里面的区别，什么时候该用什么钩子，并没有仔细的去研究过，且Vue的生命周期在面试中也算是比较高频的考点，那么该如何回答这类问题，让人有眼前一亮的感觉呢…Vue-Router导航守卫：有的时候，我们需要通过路由来进行一些操作，比如最常见的登录权限验证，当用户满足条件时，才让其进入导...
2020-01-06 10:02:08
350
原创 vue 复制剪切板功能
在没项目中经常遇到要求可以复制一东西便于用户去粘贴。下面就说说两个简单粗暴的方法第一种：利用document.execCommand() 这个方法 执行浏览器复制领命<template> <div class="seller-box" @click="Copy('我要复制')"></dev></template>meth...
2019-12-31 11:49:07
477
原创 CSS 修改滚动条样式、信封边框样式
CSS 全局修改滚动条样式::-webkit-scrollbar { /*滚动条整体样式*/ width : 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 4px; /*box-shadow : inset 0 0 2...
2019-12-23 17:10:01
827
原创 Vue 配置postcss.config.js CSS处理和移动端适配方案！
今天跟大家聊了一下 vue 中的CSS 处理：postcss.config.js首先我们要了解一下什么是 postcsspostcss：它是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。拥有极高的处理性能（3倍以上的处理速度） 你既可以写正常的CSS，也可以结合LESS或者SASS一起编写 对Source Map支持更好 他的插件真的太多太强大太便利...
2019-11-22 18:06:46
32513
5
原创 JS 计算某个时间到现在时间
var day = Math.floor(new Date().getTime() / 1000) - (new Date('年-月-日 时:分:秒').getTime() / 1000),day2 = Math.floor(day / (24 * 3600)),day3 = day2 * 24 * 3600,day4 = day - day3,day5 = Math.floor(day...
2019-11-05 19:13:11
1791
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人