一颗lemon冰-CSDN博客

原创前端部分算法的实现

1. 通过快慢指针寻找链表中点function findCenter(head) { let slower = head, faster = head; while (faster && faster.next != null) { slower = slower.next; faster = faster.next.next; } // 如果 faster 不等于 null，说明是奇数个，slower 再移动一格 i

2021-10-20 16:23:24 233 1

原创前端图片上传时使用canvas进行图片压缩

使用场景：后端无需做图片大小验证，前端直接进行图片压缩，传给后端base64格式的图片地址。话不多说直接上代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="

2021-09-17 10:04:36 478

原创 vue+ts如何快速引入多个组件

vue+ts如何快速引入多个组件1.需求说明：在我们日常开发过程中经常会遇到某一个vue文件中要引入多个子组件，如果数量少的情况下我我们用传统方式引入还可以，如下import MainView from './components'2.实现方法：试想一下，如果你这个页面依赖几十个组件你还会选择这样引入吗？答案肯定是不会，话不多说直接上代码(示例为vue+ts语法)。const modulesFiles = (require as any).context('./components', t

2021-08-27 11:33:46 1524

原创简单理解浏览器重绘和回流以及react的数据渲染原理

1.重绘：在我们的页面中如果DOM只是外观风格发生变化，如颜色变化，会导致浏览器重绘界面。2. 回流：如果页面中的DOM树的结构发生变化，如尺寸、布局、节点隐藏等导致，浏览器就需要回流（及重新排版布局）。3. react渲染原理大家都知道浏览器的重绘和回流都是比较昂贵的操作，如果每一次改变都直接对DOM进行操作，这会带来性能问题，而批量操作只会触发一次DOM更新。在React中，状态变化后React框架并不会立即去计算并渲染DOM树的变化部分，相反，React会在DOM的基础上建立一个抽.

2021-05-26 09:08:00 544

原创一个页面同时使用两个video标签自动播放在各个移动端浏览器存在的问题

双video标签（一个为背景，一个屏幕居中展示）在各大浏览器中存在的问题：一、安卓端：1.华为自带浏览器：两个视频可以同时自动播放，但自动播放时默认都是静音播放。2.百度浏览器：上方视频播放时第背景视频自动暂停，且上方视屏自动播放时也默认为静音播放。3. QQ浏览器：上方视频播放时背景视频自动暂停，但上方视频自动播放时为有声播放。4. UC浏览器：两个视屏可以同时自动播放，背景视频自动播放时为静音播放，上方视频为有声播放。...

2021-05-21 12:02:43 3155

原创 echarts legend后边加入数据

有的时候业务会有在图例上边分别显示数据的情况，多数情况为数量或比例，我以比例为例给大家做一个演示，话不多说直接上代码。legend: { orient: 'vertical', x: 'right', //可设定图例在左、右、居中 y: 'center', //可设定图例在上、下、居中 align: 'left', // 文字位置 itemHeight: 16, // 每个图例的宽度 itemWidth: 16

2021-05-14 15:03:47 4184

原创 es6对象遍历方法

es6对象遍历方法1. for…infor…in循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。2. Object.keys(obj)Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。3. Object.getOwnPropertyNames(obj)Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。4. Object

2021-01-07 16:28:56 1233

原创记录一下ant-design-vue 如何清除表单残留信息（包括校验不通过提示语）

记录一下ant-design-vue 如何清除表单残留信息（包括检验不通过提示语）话不多说直接上代码HTML代码如下： <a-modal title="修改部门" :visible="visibles" @ok="handleEdit" @cancel="handleCancelEdit"> <a-form-model ref="editForm"

2020-08-25 18:13:31 8017

转载 AMD，CMD，CommonJs到底是何方神圣？以及三者之间的区别

这篇短文写的挺清晰。知道JS有模块化开发的说法，也偶尔听过requireJs,AMD,CMD等等名字，甚至使用node的时候，还用过require之类的方法，但是对这些一直没有一个明确的认识和概念。想必这就是许多新手刚接触这方面知识时的一个普遍状态。其实仅仅做一些基础的活儿的时候，并不需要对它们有太多的了解，知道怎么用就行了，管他是什么理念，是什么实现呢。于是人就懒下来了。终于有一天，下定决心，一定要把这一块知识搞清楚，至少对此有个鲜明的认知，不再那么朦朦胧胧，A/C不分。查了一些文章博客和知乎回答

2020-07-05 07:53:55 718 1

原创基于node.js，手动搭建webpack集成vue

什么是webpack，为什么要使用它？一. webpack核心entry:入口output:出口loader:资源转换器plugin:插件mode:模式还有其他的打包压缩工具：grunt：https://www.gruntjs.net/gulp：https://www.gulpjs.com.cn/fis3(百度)：http://fis.baidu.com/webpack：https://webpack.js.org/1、什么是WebpackWebPack可以看做是资源构建，模块

2020-07-04 18:39:23 259 1

原创小程序开发实践总结

小程序开发实践总结从微信发布小程序以来，各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外，我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么，既是记录那些年我们踩过的坑，也是希望大家别再掉坑。那些年我们踩过的坑css样式不能引用本地图片资源，只能引用线上资源(background-image)，引用本地图片资源只能用标签。{{}}不能执行函数方法，{{}}只支持基本的简单运算和ES6拓展运算符。如价格格式化这种常用的处理，只能.

2020-07-01 22:00:52 3752 2

原创谈谈微信小程序

谈谈微信小程序最近这段时间接触了微信小程序开发，也有一段时间没写博文了，也来写写简单的看法以及开发的部分问题与感想。微信小程序，何方神圣？有人可能会困惑微信小程序跟微信内嵌H5有什么区别？其实如果你玩过微信小程序，你就能发现流畅度以及体验方面，小程序是完胜的本质其实就是hybrid（混合）的app介于web app与native 原生app之间，具备丰富的调用手机各种功能的接口，同时又具备灵活性，跨平台，维护成本也相当原生app较低，开发迭代速度也比较快放一张网上的图,可以看出这三者的区别“操

2020-06-24 19:13:15 883

原创记录一些微信小程序常用api

1. 保存图片API： wx.getImageInfo():获取图片路径； wx.saveImageToPhotosAlbum() 保存图片关键点:通过模态框去引导用户进行授权操作: wx.showModal()，wx.openSetting()// 保存图片saveImg() { let current = this.data.imageurl let that = this console.log("saveImgBtn", current) wx.showLoa

2020-06-23 00:04:46 528

原创微信小程序中wx.setStorageSync与wx.setStorage的区别

wx.setStorageSync与wx.setStorage的区别关于同步缓存和异步缓存的区别：同步缓存就是必须要同步方法处理完，程序才能继续向下执行。异步方法无论方法执行成功与否，都会继续向下执wx.setStorage(Object object)是微信小程序异步缓存方法：是一个获取缓存值异步方法，参数object包含Key，data和success（即缓存成功）、fail（缓存失败）、complete（即缓存完成）3个通用方法。只要是异步的方法都会有这3个通用方法。优点：将过程细化，在

2020-06-21 22:43:45 4035

原创 Vue+Element-UI 开发电商管理系统旅行记(三)

用户列表页面1.添加面包屑导航el-breadcrumb > el-breadcrumb-item <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>用户管理</el-breadcrumb-it

2020-06-19 07:52:26 165

原创 Vue+Element-UI 开发电商管理系统旅行记(二)

登录页面的逻辑一 . 登录页面布局二 . elementUI表单验证及登录逻辑diansubmitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { login(this.ruleForm.username, this.ruleForm.password).then((res) => { // console.log(re

2020-06-18 00:49:55 169

原创 Vue+Element-UI 开发电商管理系统旅行记

文章目录1、引言2、整体布局3 、主页3.1 实现基本的主页布局3.2 美化主页的header区域3.3 实现导航菜单的基本结构3.4 通过axios拦截器添加token验证3.5 解决每次只能打开一个菜单项和边框问题3.7 实现首页路由的重定向3.8 实现侧边栏路由链接的改造5、结束语1、引言这是一个用于交流学习的后台管理系统，会陆续的更新开发进度，欢迎关注！2、整体布局3 、主页3.1 实现基本的主页布局3.2 美化主页的header区域3.3 实现导航菜单的基本结构 <e

2020-06-16 08:50:46 245

原创原生ajax的请求流程

//第一步，创建XMLHttpRequest对象var xmlHttp = new XMLHttpRequest();function CommentAll() { //第二步，注册回调函数 xmlHttp.onreadystatechange =callback1; //{ // if (xmlHttp.readyState == 4) // if (xmlHttp.status == 200) { // var

2020-06-15 08:09:23 329

原创想了解前端路由原理的小伙伴们快来观看

一 . 前端路由是什么前端路由主要应用在spa(单页面开发)的项目中。在无刷新的情况下，根据不同的URL来显示不同的组件或内容。前端路由实现的原理：hash值 + onhashchange事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in

2020-05-31 19:01:07 111

翻译 vant UI与rem适配问题

vue-cli4.x项目引入vant-ui,要求在项目中使用rem单位,但vant是px的.故,需要添加一个自动转换插件和一段修改html根元素的font-size值的脚本一.添加插件: npm i postcss-plugin-px2rem --save添加之后需要在vue.config.js文件中加一段该插件的配置.参考博客链接：https://www.cnblogs.com/taohuaya/p/10274993.htm使用默认配置即可,minPixelValuen设置为3.表示3px以上才转换

2020-05-21 21:52:11 903

weixin_45564474的博客