一个昵称叫铃风的小前端

原创 Content-type的不同属性值的使用场景

1.multipart/form-data常用post请求，主要用于表单上传和上传文件2.application/json最常用，axios默认方式3.application/x-www-form-urlencoded普通get请求，key1=1&key2=2原生表单提交方式，jquery默认方式...

原创 文件下载

1.window.location.hrefblob URL.createObjectURL(blob) 实现下载//axios需要添加responseType：'blob'let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});let url = window.URL.createObjectURL(blob...

原创 vue多入口配置——实现公共部分复用

场景：公司基于微信公众号的保险产品有多种，增删频繁。但不同产品间仅仅是page部分不同，其他配置、js等都可复用。若每增加一个产品，就新拉一个git库，独立开发打包，过于繁琐、不易维护。假如需要改变一些公关部分，需要每个库代码单独更改一次。所以科研使用多入口配置，每个产品一个page文件夹，其他assets、static、components等文件夹复用，做好二级即可文件夹分类。参考：http...

原创 webpack中文文档——指南笔记

npm i安装依赖node_modules起步准备文件：略构建：npx webpack，默认打包main.js到src目录管理资源加载 CSS：1.依赖2.配置3.新建css文件4.index.js引入5.打包加载图片字体加载数据管理输出输出多个bundle.jsHtmlWebpackPlugin注意：webpack和webpack-cli不...

原创 iframe——父子域通信

场景描述：前端常用iframe来嵌入其他域名页面，通常只是静态展示；如果是自己系统群的两个站点嵌套，则可以通过代码配合实现互相通信，实现父子域相互操作。前提是父子域名相同，否则浏览器出于安全协议会阻止跨域操作。我的需求：https://mh.cmft.com站点需要嵌入https://fhdmp.cmft.com站点的页面，且通过操作https://mh.cmft.com可以触发https:/...

原创 前端使用pdfjs-dist包实现pdf文件预览

包：pdfjs-dist文件目录：封装组件：使用：预览页面：

原创 前端js十六进制格式的颜色和rgba格式颜色互转

一.十六进制转RGBA/** @param hex 例如:"#23ff45"* @param opacity 透明度 { string || number }* @returns { string }*/function hexToRgba(hex, opacity) { return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + ","...

原创 前端js处理后台返回的含换行符的字符串

network里面显示：enter键图形，下左转弯箭头console.log字符串显示：换行transformLineBreak (str) { if (!str) { return [] } let arr = str.split(/\n/g) if (!arr[arr.length]) { // 如果最后一行后面有换行符，删除数组最后一项空字符串 arr.p...

原创 vue-cli2：引入less和配置less变量可全局使用

一.安装lessnpm i less less-loader --save-dev二.设置less变量到全局// 1.安装sass-resources-loadernpm install sass-resources-loader --save-dev// 2.配置build/utils.js，找到exports.cssLoaders函数，如下exports.cssLoaders ...

原创 vue中引入图片的方式

一.对于静态的img，正常引入即可：<img src="@/assets/img/login/user.png"> // 可以使用@二.当使用模板绑定src时：// 不可以使用@，无法解析；也无法找到assets目录<img :src="@/assets/img/login/user.png"> 方式1：// 将图片放到static目录下<img :...

原创 前端url编码

为什么要编码：  Http协议中参数的传输是"key=value"这种简直对形式的，如果要传多个参数就需要用“&”符号对键值对进行分割如"?name1=value1&name2=value2"，这样在服务端在收到这种字符串的时候，会用“&”分割出每一个参数，然后再用“=”来分割出参数值。  针对“name1=value1&name2=value2”我们来说一下客...

原创 base64加密url参数

base64编码函数btoa()，解码函数atob()但它只支持ASCII，如果你调用btoa(“中文”)会报错，所以一般先使用encodeURIComponent()对url进行编码，再加密vue中使用query传参：编码函数：encrypt64 (obj) { // 判断参数是对象 if (Object.prototype.toString.call(obj) !==...

原创 axios下载文件（responseType:‘blob‘），判断是下载成功返回了二进制流还是失败返回了对象（比如服务端拒绝，返回对象，前端如果依然按二进制流处理会导致下载undefined文件）

描述：当下载文件时，axios配置responseType: ‘blob’，此时后台返回的数据会被强制转为blob类型；如果后台返回代表失败的data，前端也无法得知，依然会下载得到名为undefined的文件。解决：将blob转回json格式，通过code判断是否下载成功主要技术点：FileReaderaxios配置：axios({ method: ‘post’, baseUR...

原创 通过async await和Promise解决多个ajax异步请求之间存在依赖的情况

异步ajax请求之间可能会有依赖情况，本篇以定时器模拟请求，总结了几种通过async await和Promise将异步转为同步的方案// get1请求、get2请求function get1 () { return new Promise((resolve, reject) => { setTimeout(() => { num1 += 1 co...

原创 浅拷贝和拷贝的概念和实现

一.从简单类型和复杂类型数据的存储来认识深拷贝二.区分常用操作是深拷贝还是浅拷贝：1.= 赋值不论是简单的对象或数组还是复杂的对象或数组，都是浅拷贝以简单数组示例：let arr = [1, 2, 3]let newArr = arrnewArr[0] = 0console.log(arr[0]) // 02.循环赋值简单的对象或数组可以实现深拷贝，复杂的对象或数组，内部的...

原创 长列表优化加载基本实现——方案2：虚拟列表

场景：虚拟列表一般适用于前端一次获取大量数据，优化展示性能思路：实际只渲染start至start+n，总共n个数据；滚上去的元素使用父元素的padding进行模拟占位html:<div id="container"> <div id="wrap"> <p class="item" v-for="(item) in list.slice(start, start + 5)" :key="item.id">p{{item.name}}</p&g

原创 无限滚动长列表懒加载基本实现——方案1：懒加载

html结构：<div id="container"> // 视觉容器 <div id="wrap"> // 实际滚动的元素 // 无限列表，倒数第3个出现时加载下一页 <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p>

原创 接口返回html字符串，含\n换行符，前端识别\n

v-html不能识别\n方法1：正则匹配，将\n替换为方法2：v-html标签添加css属性white-space: pre-wrap

原创 讲得比较好的博客

https://zhuanlan.zhihu.com/p/97768916https://blog.csdn.net/weixin_33978044/article/details/91369173

原创 letcode-算法-20（简单）：有效的括号

给定一个只包括 ‘(’，’)’，’{’，’}’，’[’，’]’ 的字符串，判断字符串是否有效。有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。注意空字符串可被认为是有效字符串。// {([])}// 思路：1）length不是偶数或者长度是0，返回false；2）给符号设置数字，匹配的两个符号一正一负，依次判断第一个和最后一个和是否为0、// 第二个和倒数第二个和是否为0export default function toJudge(str) { con

原创 js文件操作——文件与base64互转

先看一下base的字符串，常见格式文件转base64：格式为：data:文件格式;base64,****比如图片：data:image/png;base64,****将图片转换为Base64function tansformImgToBase64(imgId,callback){ let img = document.getElementById('imgId') let canv...

原创 el-tree:懒加载可选树状图&&服务端返回节点选中状态&&前端手动组装完整treeData

问题：1.懒加载时，当前展示的节点的子节点是未知的，假如之前编辑过，那前端需要字段来判断某个节点当前应该是什么状态：未选 半选 全选。2.如果前端需要当前已获取的treeData,应该如何手动组装treeData。一.懒加载必要性当tree数据量过大时，服务端一次性返回全量的数据，服务端查表时间过长，http传输可能会时间过长，前端浏览器渲染时间也会过长。以我的项目为例，大集团作为一级，二级是大集团下的组织和子公司，二级下依然包含组织和具体人员。tree总共四级，叶子节点上万。二.代码实现1）

原创 二叉树遍历之深度遍历1——前序

// 递归function DLR(tree){ console.log(tree.value); if(tree.left){ DLR(tree.left); } if(tree.right){ DLR(tree.right); }}// 非递归function DLR(tree){ const queue = [] if (tree) queue.push(tree) while (queue.le

原创 vuex状态持久化：vuex-persistedstate解决刷新浏览器后vuex状态重置问题

一.问题和原因问题和现象：刷新浏览器后vuex状态重置原因：vuex将数据保存在cache(运行内存)中，内存中的数据是临时数据，刷新浏览器就会释放。类似于js创建一个变量，刷新浏览器变量会销毁，代码重新执行创建的是一个新的变量。二.解决方案解决方案就是使用前端存储，常见的是localstorage/sessionstorage，说到这里大家应该都有思路了，就是前端自己存一份，当vuex获取不到数据时尝试向localstorage/sessionstorage获取。当然，相关的npm包有很多，大多

原创 二叉树的序列化和反序列化（牛客网-题库-在线编程-剑指offer题目）

请实现两个函数，分别用来序列化和反序列化二叉树。二叉树的序列化是指：把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串，从而使得内存中建立起来的二叉树可以持久保存。序列化可以基于先序、中序、后序、层序的二叉树遍历方式来进行修改，序列化的结果是一个字符串，序列化时通过 某种符号表示空节点（#），以 ！ 表示一个结点值的结束（value!）。先序序列化和反序列化：// 序列化function Serialize(pRoot, arr = []) { if (!pRoot) { arr.

原创 二叉树遍历之广度（层次）遍历2——之字形顺序输出（牛客网-题库-在线编程-剑指offer题目）

请实现一个函数按照之字形打印二叉树，即第一行按照从左到右的顺序打印，第二层按照从右至左的顺序打印，第三行按照从左到右的顺序打印，其他行以此类推。分析：实现思路和普通层次从左到右输出基本一致，只在每层的数组perLevelItem输出到最终数组arr前，隔一行反转一次。可先参考普通层次遍历：https://blog.csdn.net/qq_37246828/article/details/106351448，两者另外一个区别是，普通层次遍历，输出arr是一维数组；而本题的输出arr为二维数组；该区别点可互

原创 二叉树遍历之广度（层次）遍历1（牛客网-题库-在线编程-剑指offer题目）

/* 先把pRoot根节点压入queue,while循环每次取出 queue第一个元素，将val push到arr，同时依次 将left和right压入queue，进入下一次while循环*/function Print(pRoot) { let queue = [] let arr = [] queue.push(pRoot) while (queue.length) { let head = queue.shift() arr.push(head.val

原创 判断二叉树是否是对称二叉树（牛客网-题库-在线编程-剑指offer题目）

请实现一个函数，用来判断一颗二叉树是不是对称的。注意，如果一个二叉树同此二叉树的镜像是同样的，定义其为对称的。分析：// 模拟对象的格式{ val: 0, left: { val: 1 }, right: { val: 1 } }如果left和right一个存在一个不存在，则返回false；如果left和right都不存在，返回true;left和right都存在，如果left.val !== right.val，返回false;如果前面三

原创 求连续整数的和，不能使用乘除法、for、while、if、else、switch、case（牛客网-题库-在线编程-剑指offer题目）

求1+2+3+…+n，要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句（A?B:C）。分析：递归，通过0的布尔值为false终止function Sum_Solution(n) { return n + (n - 1 && Sum_Solution(n - 1))}...

原创 报数出圈问题（牛客网-题库-在线编程-剑指offer题目）

这是一个经典的算法例题，但是我没有用固定算法。题目：每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此。HF作为牛客的资深元老,自然也准备了一些小游戏。其中,有个游戏是这样的:首先,让小朋友们围成一个大圈。然后,他随机指定一个数m,让编号为0的小朋友开始报数。每次喊到m-1的那个小朋友要出列唱首歌,然后可以在礼品箱中任意的挑选礼物,并且不再回到圈中,从他的下一个小朋友开始,继续0…m-1报数…这样下去…直到剩下最后一个小朋友,可以不用表演,并且拿到牛客名贵的“名侦探柯南”典藏版(名额

原创 一副扑克随机抽出n张，恰巧可以组成顺子（牛客网-题库-在线编程-剑指offer题目）

LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张_)…他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决定去买体育彩票,嘿嘿！！“红心A,黑桃3,小王,大王,方片5”,“Oh My God!”不是顺子…LL不高兴了,他想了想,决定大\小 王可以看成任何数字,并且A看作1,J为11,Q为12,K为13。上面的5张牌就可以变成“1,2,3,4,5”(大小王分别看作2和4),“So Lucky!”。LL决定去买体育彩票啦。 现在,要求你

原创 输出和为sum的连续正数序列（牛客网-题库-在线编程-剑指offer题目）

牛客网-题库-在线编程-剑指offer题目：小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100。但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数)。没多久,他就得到另一组连续正数和为100的序列:18,19,20,21,22。现在把问题交给你,你能不能也很快的找出所有和为sum的连续正数序列? Good Luck! // 穷举法 /*因为至少是两个数相加，所以只需要考虑i < Math.ceil(sum / 2)；

原创 css画任意角度饼图

<div class="shanxing shanxing1"> <div class="sx1"></div> <div class="sx2"></div></div>.shanxing{ position: relative; width: 200px; height: 200px; bor...

原创 react使用redux react-redux

https://blog.csdn.net/weixin_34191845/article/details/93167825// 1.// store/action-types.js// Counter组件用到的typesexport const ADD = 'ADD';export const MINUS = 'MINUS';// 2.store/actions/counter.j...

原创 js——事件队列的宏任务和微任务

先放个不错的别人的，有空再自己整理：https://www.cnblogs.com/yinzhida/p/12009738.html

原创 js易错点

function fn() { var a = b = 1}fn()console.log(b) // 1重点：b不算是var定义的，所以是隐时定义，作用域是全局这个我还没搞清楚，我觉得输出应该是3 3 3 3，因为i是全局的。但是在浏览器里显示是0 1 2 3，那var和let就没区别了啊，我觉得是浏览器问题for (var i = 0; i < 3; i++)...

原创 娱乐

原创 常见问题

1.滑动不顺畅一般出现在IOS设备中，自定义盒子使用了overflow: auto || scroll后出现的情况。-webkit-overflow-scrolling: touch;2.长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单3.避免自动识别手机号、邮箱4.自动识别手机号、邮箱5.有遮罩，body依然可以拖动...

原创 谷歌浏览器实用的调试技巧

1.通过element元素直接滚动到对应的元素（页面比较长时实用）2.从network复制ajax请求3.console.table(obj)打印对象，更易阅读4.在element点击选中某个元素，在console中获取对应的dom...

原创 函数的四种调用模式