- 博客(27)
- 收藏
- 关注
RSS订阅
原创 基于vue的长列表虚拟滚动插件
虚拟滚动插件1 背景一个长列表 Web 页面，如果需要展示成千上万条数据，那么页面中就会有数万甚至数十万的HTML节点，会巨大的消耗浏览器性能，进而给用户造成非常不友好的体验。主要体现在以下几个方面：页面等待时间极长，用户体验差；CPU 计算能力不够，滑动会卡顿；GPU 渲染能力不够，页面会跳屏；RAM 内存容量不够，浏览器崩溃。优化方案：不把长列表数据一次性全部直接显示在页面上；截取长列表一部分数据用来填充屏幕容器区域；长列表数据不可视部分使用使用
2021-07-04 17:15:58
2827
原创 webview使用uni.chooseImage从相册返回不触发回调的优化处理
webview使用uni.chooseImage从相册返回不触发回调的优化处理
2022-07-05 23:41:18
1497
原创 axios数组传参之后端无法解析
问题：现有一个post请求，需要把一个对象数组数据传给后端，如果直接把对象数组传给后端，发现后端接收后的值为[Object, Object]，后端无法解析。解决方案：再发送请求之前，先把该对象数组转化成json字符串，再传给后端，发现后端接收后的值就为json字符串，后端再通过相应的解析方法，最终解析成对象数组。const contactList = [ { username: '张三', mobile: '13578788989' }, {.
2022-04-16 01:41:50
711
原创 css实现switch开关状态切换
1 图标效果2 代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-09-30 01:05:39
535
原创 promise源码实现
class Promise { // 三状态：等待态、成功态、失败态 static PENDING = 'pending' static RESOLVED = 'resolved' static REJECTED = 'rejected' constructor(excutor) { // promise实例初始化 this.state = Promise.PENDING // 默认为等待态 this.value = undefin
2021-08-19 21:57:40
146
原创 vue2与vue3响应式数据原理的区别
1 vue2响应式数据原理vue2：通过es5的Object.defineProperty实现数据响应式// 数组响应式处理：覆盖原有数组原型方法，增加通知变更var originProto = Array.prototype// 创建一个含有原型的对象var arrayProto = Object.create(originProto);['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(key
2021-08-19 01:11:22
318
原创 input type=file选择图片按钮样式修改与图片预览
1 背景通过上图我们可以看到input=file按钮的默认样式，的确不怎么好看，如果要自定义按钮的样式，该如何实现呢？2 方式1样式input覆盖整个按钮区域，并且设置完全透明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
2021-08-19 00:48:36
3143
2
原创 vue插件开发
vue插件开发1 插件概念1.1 什么是插件随着项目编写的进行，代码量越来越多，重复的内容随之增加，比如每个页面可能都会有提示框，同个项目中这些提示的样式都是统一的，那么我们没必要每个页面每个交互动作都写一个提示组件，我们可以创建一个通用的组件〈全局组件)，然后再每个需要的地方调用，减少代码量，简化代码结构，同时如果有新的需求需要修改也方便快捷，只需修改全局组件即可，一处修改，全局有效。插件 (Plugin )是用来增强你的技术栈的功能模块，它的目标是Vue本身，简要的讲：插件是对 Vue的功能的
2021-07-27 17:23:51
448
原创 Node操作Mysql简单实现
Node操作Mysql简单实现通过express创建服务器;通过浏览器请求服务器，服务器收到浏览器请求后，根据不同的请求去操作Mysql数据库实现数据的增删改查1 配置开发环境npm init -ynpm install mysql express --save2 连接数据库const mysql = require('mysql');const express = require('express');// 创建服务器const app = express();// 1.创建
2021-07-27 15:28:41
1259
原创 http静态服务
http静态服务1 回调方式// 浏览器请求服务器的内容，进行回显const http = require('http');const url = require('url');const path = require('path');const fs = require('fs');// mime处理内容类型const mime = require('mime');const server = http.createServer((req, res) => { // 解析浏览器请
2021-07-27 15:00:17
368
原创 npm工具
npm1介绍node package manager 意为node包管理器安装node时会自带npmnpm网站，可以查找各种安装包2 npm常用命令更新npmnpm install npm@latest -g2.1 初始化项目npm init或npm init -y(--yes)2.2 安装依赖2.2.1 安装生产依赖npm v6版本开始不需要加参数，例如：安装 jQuerynpm install jquery或npm i jquery(install可用i
2021-07-27 13:57:34
175
原创 vue预渲染
vue预渲染 vue是一个单页面应用（spa），只有一个 html 文件（内容只有一个#app根节点），然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容，然而这种方式无法被爬虫和百度搜索到。如果想对某些页面进行SEO（搜索引擎优化）优化，可以通过预渲染实现，无需使用web服务器实时动态编译html，只需要在构建的时候简单的生成针对特定路由的 静态html文件。优点是设置预渲染更简单，并可以将你得前端作为一个完全静态的站点。1 安装预渲染插件npm install prerend
2021-07-27 01:34:35
2135
原创 js跨域解决方案
js跨域解决方案跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同， 都被当作是不同的域。 跨域原理，即是通过各种方式， 避开浏览器的安全限制。1 跨域资源共享(cors)后台服务器端通过设置 Access-Control-Allow-Origin 即可，前端无需设置，若要带 cookie 请求，前后端都需要设置 。res.header("Access-Control-Allow-Or
2021-07-10 21:26:36
426
原创 电商图片放大镜jquery实现
电商图片放大镜jquery实现1 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-07-06 17:04:54
133
原创 Vue2响应式原理简易实现
1 响应式原理概括2 响应式原理代码实现class Vue { constructor(options = {}) { // 1.保存数据 this.$options = options; this.$data = typeof options.data === 'function' ? options.data() : options.data; this.$el = options.el; // 2.将thi
2021-07-01 18:48:46
419
原创 web开发时手机浏览器无法通过ajax请求电脑本地服务器数据
web开发时手机浏览器无法通过ajax请求电脑本地服务器数据电脑本机ip：192.168.1.102电脑本地服务器：localhost:4000电脑web静态服务器：localhost:8080电脑和手机都连接同一个网络，因此他们都处于同一个网段，可以进行数据通信。在电脑浏览器上访问web应用（比如：localhost:8080/home）时，会发送ajax请求（比如：localhost:4000/data），请求电脑本地服务器api接口数据，可以成功获得数据刷新页面，证明不存在跨域问题，但.
2021-06-28 01:30:36
801
原创 Vuex源码简易实现
Vuex源码简易实现let Vue;class Store { constructor(options = {}) { // 普通变量不具响应式，数据改变不能触发视图更新 // this.state = options.state; // Vue实例中的data才具有响应式，数据改变才会触发视图更新 this.s = new Vue({ data() { return {.
2021-06-20 20:53:11
107
原创 原生js实现dom元素节点添加类名&移除类名
给dom元素节点的class属性任意位置添加类名，移除类名时不留空格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
2021-06-10 00:18:43
1537
原创 移动端1个像素边框线sass实现
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-06-08 13:29:13
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人