- 博客(45)
- 收藏
- 关注
RSS订阅
原创 css: deep深度作用选择器
前言当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。原理在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】...
2021-03-05 09:25:06
37778
2
原创 vue 路由守卫实现权限控制
在配置有菜单权限的系统中，根据菜单显示来控制是否能访问某页面，能看得到但菜单就能点击访问，但如果直接访问页面路径，则跳出了菜单控制的范畴，所以要在每次访问页面前，对当前访问对路径进行权限校验，才能达到权限控制的目的。
2024-02-28 09:59:23
397
原创 记一次webpack配置文件外置
众所周知，webpack配置环境变量文件，是根据打包命令寻找对应的环境变量文件，从而获取接口地址。所以触发时机是在每次打包的时候，接口地址才会被打包进去，无法自由修改。本次要求一次打包后，修改接口地址的文件，刷新页面可达到更新接口地址。有两种方法，一是安装generate-asset-webpack-plugin插件，二是把接口地址暴露在window成为全局变量。
2023-12-12 16:59:17
592
原创 web项目重新部署后提示用户获取最新版本
对于web项目，每次迭代发版后，都需要用户手动刷新获取最新版本，会出现由于用户不是使用最新版本导致的问题，增加了沟通成本，于是如何让用户被动检测到版本有更新迫在眉睫。
2023-06-27 11:31:56
346
原创 Depcheck 检查前端项目中未使用的依赖包
随着前端项目的迭代，项目中一部分的依赖包可能没被项目所使用的，手动查找这些依赖包耗时又繁琐，有没有根据能够快速的帮助我们识别和清理项目中未使用的依赖包呢？
2023-06-05 17:10:37
763
原创 uni-app电子签名功能
随着时代的发展，以前的手写签名，逐渐衍生出了电子签名，比如钉钉等系统中等电子签名，电子签名和纸质手写签名一样具有法律效应。作为前端等我们如何实现电子签名呢？其实在html5中已经出现了一个重要等辅助标签——canvas我们想要定义笔的颜色、宽度，可以怎么做呢，我们可以抽离成一个方法，后续需要什么颜色，什么宽度都可以直接改好lastX = x;lastY = y;lineWidth设置笔的宽度设置绘制线的颜色但是我们看到了新增了lastX和lastY。
2023-03-23 17:43:32
1393
1
原创 TinyPng图片压缩的正确打开方式
这种效果几乎是看不见的，但在文件大小上有非常大的差别。在打包「生产环境」代码之前，执行「压缩命令」，通过命令行交互，选择需要压缩的图片。虽然可以通过「配置」的方式解决上述问题，但每次打包都要特殊配置，略显麻烦，这样看来plugin好像不是最好的选择。使用过TinyPNG的都知道，他的压缩效果很好，肉眼几乎看不出区别，图片不失真，是个不错的选择。选择第二种方案，可能有人会说，直接用webpack的图片压缩插件也行啊，但是有两个问题。，就会把全部文件名匹配的路径显示出来，通过空格键选择图片所在的目录。
2023-01-06 15:44:44
1846
原创 浏览器http缓存机制
前端缓存主要是分为和。其中HTTP缓存是在HTTP请求传输时用到的缓存，;而浏览器缓存则主要由前端开发在前端js上进行设置。http缓存是web缓存的核心，是最难懂的那一部分,也是最重要的那一部分。从缓存位置上来说分为四种，并且各自有优先级，当依次查找缓存且都没有命中的时候，才会去请求网络。如果以上四种缓存都没有命中的话，那么只能发起请求来获取资源了。那么为了性能上的考虑，大部分的接口都应该选择好缓存策略，通常浏览器缓存策略分为两种：，并且缓存策略都是 来实现的。对于强制缓存而言，如果浏览器判断所请求的
2022-12-27 15:08:13
1473
原创 B站视频弹幕不挡住人脸效果
有天在B站看二舅的视频时，密密麻麻的弹幕居然没有二舅的人脸，很好奇是怎么做到的，于是决定一探究竟。高端的效果，往往只需要采用最朴素的实现方式，琢磨了好一会儿，打开了F12，豁然开朗。一张图片+一个属性，直接搞定。
2022-11-29 17:39:48
712
原创 Whistle 前端抓包
启动whistle及配置完代理后，用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器)访问配置页面，如果能正常打开页面，whistle安装启动完毕，可以开始使用。方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899。安装到这步访问http://127.0.0.1:8899正常，就证明可以抓取HTTP包啦。如果能正常输出whistle的帮助信息，表示whistle已安装成功。
2022-11-29 17:21:43
1618
原创 从输入url到页面展现的全过程
假定出现一种异常情况，即A发出的第一个连接请求报文段并没有丢失，而是在某些网络节点长时间滞留了，以致延误到连接释放以后的某个时间才到B。本来这是一个已失效的报文段。但是B收到此失效的连接请求报文段后，就误认为是A有发出一次新的连接请求。于是就向A发出确认报文段，同意建立连接。假定不采用三次握手，那么只要B发出确认，新的连接就建立了。由于现在A并没有发出建立连接的请求，因此不会理睬B的确认，也不会向B发送数据。但B却以为新的运输连接已经建立了，并一直等待A发来数据。B的许多资源就这样拜拜浪费了。
2022-11-24 11:00:20
1197
原创 vue 腾讯地图展示用户定位附近的门店
本需求主要是获取用户当前定位，并将定位返回的经纬度坐标请求到后端接口，后端返回距离用户最近的门店，并且前端把门店标记在地图上。
2022-07-27 15:39:34
1692
原创 记一次webpack -- 生产环境打包速度和包大小优化
（一）缩⼩⽂件范围 Loader使用include exclude配置项来缩⼩loader的处理范围，推荐使用include { test: /\.css$/, include: path.resolve(__dirname, "./src"), use: ['style-loader', 'css-loader'], },（二）优化resolve.modules配置resolve.modules⽤于配置webpack去哪些⽬录下寻找第三⽅模
2022-04-20 16:25:34
1577
原创 记一次webpack -- 提高开发效率优化
（一）优化resolve.alias配置resolve.alias配置通过别名来将原导⼊路径映射成⼀个新的导⼊路径，减少查找过程resolve: { alias: { // 引入vue的时候，直接指向vue打包好之后的文件 // 比如import Vue from 'vue/dist/vue.common.js'--> import Vue from 'vue' vue$: "vue/dist/vue.esm.js", // 减少查找过程 起
2022-04-19 17:03:20
233
原创 uni-app 小程序分包
前言微信小程序主包规定不能超过2M，当超过2M时候，可以通过分包的方式解决小程序体积限制的问题。微信小程序每个分包的大小是2M，总体积一共不能超过20M。如有更新，请参考uni-app官网 ???? 官网文档下面是一个uni-app小程序项目一、在pages的同级创建分包二、在分包下创建页面pages目录，模块vue文件*注意，配置的path路径是相对于root下的路径三、pages.json增加subPackages配置四、在manifest.json中开启分包优化加入代码 "opt
2022-01-27 16:54:33
927
原创 从零搭建SSR+VUE框架（附源码）
前言此文章从0开始搭建一个简易的ssr框架，需要有一定的ssr基础，用的是vue2.0，文末有GitHub源码地址1.新建一个vue项目vue init webpack my-ssr2.找到项目中router/index.js文件，修改如下import Vue from "vue";import Router from "vue-router";import HelloWorld from "@/components/HelloWorld";Vue.use(Router);// 通过$
2021-09-24 16:41:11
1490
1
原创 uni-app 小程序请求拦截
前言在小程序的开发中，经常会遇到登录过期让用户重新登录、请求header增加token、请求失败提示失败信息…等等，请求过多的时候，就会多了很多冗余重复的代码，所以必要时候我们需要做请求拦截和响应拦截。（一）新建https.js 文件/*** @param method {String} 'POST' 'GET' 'PUT'...* @param url {String} ：开发者服务器接口地址* @param data {Object/String/ArrayBuffer} ：请求的参数*/
2021-08-25 11:30:22
1510
原创 前端性能优化(四) 预渲染 prerender-spa-plugin
前言单页面应用中，整个web项目只有一个页面，使用路由机制进行组件之间的切换，动态的渲染页面内容。这就是客户端渲染，具有数据传输量小、减少服务器端压力、交互/响应速度快、前后端完全分离等优点。单页应用在优化用户体验的同时，也给我们带来了一些问题，例如对SEO不友好，首屏时间过长等。因此，服务端渲染（SSR）和预渲染（Prerender）技术应运而生。服务端渲染与预渲染的优点SEO：单页应用的网站内容是根据当前路径动态渲染的，html 文件初始只有<div id="app></div
2021-07-23 18:42:14
1920
原创 前端性能优化(三) vue性能优化九法
前言在2019年3月VueConf US 大会上 Vue开发核心团队成员 Guillaume Chau 发表了一个名为Vue性能优化9法的主题。演讲视频：http://www.youtube.com/watch?v=5B66qer8cZo演讲文稿：https://slides.com/akryum/vueconfus-2019#/演示网站：https://vue-9-perf-secrets.netlify.com演示代码：https://github.com/Akryum/vue-9-perf
2021-06-19 22:34:02
754
1
原创 前端性能优化(二) vue路由懒加载
路由懒加载的好处像vue这种单页面应用，用构建工具打包之后的包会非常大，导致网页白屏时间过长，影响用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时...
2021-06-17 16:09:04
595
2
原创 vue: table制作发货单表格并打印
最近做了个库存管理系统，产品经理要求前端页面展示表格内容，并且打印。首先是vue文件，（无需安装任何依赖，复制粘贴可用）<template> <div class="my-multi-table"> <div class="button_group"> <el-button type="primary" @click="editSend">编辑</el-button> <el-button t
2021-03-03 17:17:16
4086
3
原创 uni-app自定义tabBar
一个项目有多个角色，比如医生和患者，tabbar跳转的路径不一样，但是在pages.json中无法配置多个tabBar，这时候就要自定义tabBar了下面一个小小demo，场景是医生和患者端，一共四个不同的页面，分别是医生首页，患者首页，医生我的页面，患者我的页面，tabbar要求根据不同的角色跳转到对应的路径（一）配置pages.jsoncustom设置为true，并且把所有需要切换的页面都配置在list中，否则之后切换tab用switchTab方法无效"tabBar": { "cu
2020-09-08 17:38:16
6802
3
原创 小程序生成分享二维码 wxqrcode
（一）先到GitHub把qrcode.js的代码copy下来https://github.com/demi520/wxapp-qrcode（二）在项目js文件中引入let QR = require("xxxx/qrcode.js") // require方式import QR from 'xxxx/qrcode.js' // es6的方式（三）创建canvas节点,以及设置canvas-id注：canvas节点可以用visibility控制不显示，但一定要存在这个节点，二维码
2020-09-03 10:13:13
3192
3
原创 uni-app 图片上传组件 canvas压缩
前段时间刚入坑uni-app，就被分配到做图片上传的组件地位卑微，只能肝，先看看效果图单张图片上传多张图片上传点击图片的效果上代码：<template> <view class="uploadImage" :class="styleClass"> <view class="list-box" :class="onePicClass" :style="{ minHeight: height + 'rpx'}"> <vi
2020-08-31 15:56:16
1718
原创 vue-cli 自定义交互式命令环境及多配置打包
用vue-cli打包npm run serve 是不压缩文件，直接加载源码，并且此时的process.env.NODE_ENV是developmentnpm run build 命令会打包代码，并且此时的process.env.NODE_ENV是production在发送请求的时候通过process.env.NODE_ENV就能很好的区分要请求的后端接口路径但是最近遇到一个问题，我想要打包之后的代码分成测试环境和生产环境，但是通过npm run build打包之后的process.en...
2020-07-01 16:46:53
665
1
原创 gulp进阶插件 -- gulp-babel、gulp-postcss
gulp是一个流式构建系统（把源代码生成用户可以使用的目标的自动化工具），是基于Node.js实现构建，开发者可以使用它在网站开发过程中自动执行常见任务，比如编译预处理CSS，压缩JavaScript，转化es6语法等。gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问插件页面或者在npm搜索gulpplugin就能看到各式各样的插件。针对自己需要实现的功能寻找合适的插件。...
2020-02-26 23:52:41
500
原创 前端性能优化(一) IntersectionObserver 实现图片懒加载
主要实现流程：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。现将img标签的src设置为同一张图片，减少http的请求数量，给img标签自定义属性，把真正的路径挡在自定义属性中（比...
2020-02-24 14:36:59
1303
原创 从静态页面到服务端渲染 -- 浅析SPA和SSR的不同
我们刚开始接触到的就是一个静态页面，比如我们写了一个html文件，放在服务器上用户就能访问了，而后面网站需要展示更多的信息，或者提供用户操作数据，因此就要接入了数据库，数据库负责数据的处理，于是就有了一些html模板引擎，用于动态的把数据插入到html节点中，这也是我们刚开始接触到的动态页面。随着前端技术的发展，后面盛行的三大框架，是属于前后端分离的单页面应用（SPA），但单页面应用由于一开始从服...
2020-02-22 21:22:45
2644
原创 浏览器中的页面循环系统
浏览器中的页面循环系统目录 浏览器中的消息队列 浏览器中的延迟队列 V8引擎中的微任务队列 总结 浏览器中的消息队列我们先从最简单的场景来分析，然后一步步了解浏览器页面主线程是如何运作的，从中体会浏览器为什么要这样设计。使用单线程处理安排好的任务我们先从最简单的场景讲起，比如有如下一系列的任务： 任务1：1+2 ...
2020-01-12 11:13:40
523
原创 webpack 傻瓜式安装教程
在一个全英文目录下新建一个全英文的文件夹以命名为webpack为例，进入该文件夹里面shift+鼠标右键，点击在此处打开命令行安装webpack：npm install --save-dev webpack如果你使用的webpack 4+ 版本，还需安装cli：npm install --save-dev webpack-cli等待安装完成，输入以下命令：webp...
2019-08-18 22:24:25
254
原创 JavaScript的内存机制
JavaScript内存空间并不是一个经常被提及的概念，很容易被大家忽视。包括我自己，可是我发现由于对它们的模糊认知，导致了很多东西理解得并不明白。比如最基本的引用数据类型为什么会叫引用数据类型？浅复制与深复制有什么不同？还有闭包，原型等等。 了解JavaScript内存机制有助于开发人员能清晰的认识到自己写的代码在执行的过程中发生过什么，也能够提高项目的代码质量。JS的内存空间分为栈、...
2019-08-18 22:22:30
334
原创 实现多行文本垂直居中
方法一：1. 对父元素设置display:table属性2. 对文本设置display:table-cell和vertical-align:middle属性 <style> .box{ width: 500px; height: 500px; display: table; border: 1px solid #333; } .box ...
2018-08-29 00:06:58
367
原创 web前端面试题：用css实现幻灯片效果
题目：请写一个简单的幻灯效果页面（如果不使用JS来完成，可以加分）幻灯片效果其实就是实现图片的点击切换，一般情况下我们都会想到用js来做，但是用css方法要怎么实现呢可以利用CSS3的单选按钮radio和label标签的for属性来实现图片的切换label里面的for属性对应的是要显示的图片的id名字<!DOCTYPE html><html><h...
2018-08-23 16:28:21
2054
原创 babel的安装和配置
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而解决部分浏览器对es6 代码不兼容的问题。这意味着，你可以用 ES6 编写程序，而不用担心现有环境是否支持，因为babel可以将ES6代码转换成ES5代码。下面是babel的安装和配置步骤：新建一个全英文文件夹 babel在babel文件夹里面新建一个src文件夹、一个lib文件夹shift+鼠标右键 打开命...
2018-08-14 14:29:15
405
原创 Vue的安装步骤
在一个英文目录下，新建一个文件夹(以myvue为例，不能命名为vue)在myvue文件夹下，shift+鼠标右键打开命令行1.安装webpacknpm init -ynpm install webpack --save-devnpm install webpack-cli --save-dev2.安装vuenpm install vuenpm install vue...
2018-08-10 23:59:38
197
原创 Vue-demo（二）仿微博的发布和删除
用一个简单的微博demo实现Vue对html标签的插入和删除：首先是一些简单的CSS样式： <style> *{ margin: 0; padding: 0; } #box{ padding: 0 100px; margin-top: 30px; } ul{ margin-top: 30px; } li{ background: #ddd...
2018-08-08 11:01:52
2015
2
原创 Vue-demo（一）实现商品列表的展示
Vue实现商品列表的展示是一个比较简单的入门demo，下面是具体的实现：简单CSS样式：<style> #box ul{ display: flex; flex-wrap: wrap; } #box li{ padding: 3px; list-style: none; margin-right: 15px; border: 1px solid ...
2018-08-08 09:33:56
27733
2
原创 JS利用正则表达式去除字符串空格
// str是要去除空格的字符串 var str = ' as ddd ee 4kkk ,mm '; // 去除str所有的空格 var str1 = str.replace(/\s*/g,""); console.log(str1); // 去除str两头的空格 var str2 = str.replace(/^\s*|\s*$/g,""); console...
2018-08-01 16:28:52
5938
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人