sparrow的博客

原创 用nodejs获取文件夹下的全部文件名

nodejs 获取文件目录下全部文件名

原创 多行文字 省略号显示

存在问题：鼠标移入无法全部显示，在TODO 的地方给元素的title属性赋值为变量s的值 就可以了 el.title=s;需求中要求文字内容尽量丰富一些，但超出需要省略号显示在末尾，鼠标移入可显示全部内容。2.line-clamp属性非标准属性，在某些浏览器下可能不支持。存在问题：元素定位位置固定，无法准确定位到文本内容最后位置。存在问题：1.具体行数需要已知，

原创 array与tree结构互相转换

array 转 tree。tree转array。

原创 转义字符 \ 的字符化处理

作为方法使用，必须参数名称为raw,此时可与后面参数做交叉，交叉结果以raw的第一个字符开始，以raw的最后一个字符结尾。文件路径需要原样传递到后端，包括 \ 转义符，颇费周折，终于解决问题，特此记录一下。该方法是个标准的模板字符串处理方法。方法：String.raw 方法。注意是模板字符串 的写法。某些场景下需要，字符串组合。

原创 React form 提交后 数值处理问题

react antd form表单在modal中的默认值问题

原创 layui项目 table返回code处理

layui中table中返回数据的code为200不是默认0的处理

原创 文件上传及预览相关问题

Failed to execute ‘readAsArrayBuffer’ on ‘FileReader’: parameter 1 is not of type ‘Blob’ 文件上传及预览

原创 ts中配置sourcemap后编译生成js和js.map文件的处理办法

VSCode配置 ts生成js文件

原创 全国省市区获取链接

https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json 省https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_city.json 市https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_district.j

原创 element-ui的upload上传限制文件格式问题

case1 ： 上传文件选择框中过滤掉不想上传的文件 upload上传时，如希望在弹出窗的选择中限定能上传的制定文件，则可设定组件的accept属性，诸如 accept=".txt,.xls" 即表示只接受txt和xls两种格式文件，其他文件会默认在文件弹出框中过滤掉case2： 而如果希望限制文件大小或者内容，则可通过定义before-upload方法读取上传的文件大小及其他信息，以便判断能否上传...

原创 浮点数转有效位数字问题

面试题：要求输出如下1.234=>1.24 100.123=>100.13 0.00232323=>0.01即保留两位小数，如后面不为0 则前一位加1代码如下： function num2Str(num){ var numStr=String(num) var dotIndex=numStr.indexOf('.') if(dotIndex===-1) return numStr+'.00' dotIndex=dotIndex+2 var dotStr=nu

原创 循环打印输出

面试中手写循环打印输出function random(){ return new Promise(resolve=>{ resolve(Math.random()) })}// case 1for(var i=0;i<10;i++){ setTimout(()=>{ random().then(res=>{ console.log("current:"+i+"rendom result:"+res) }) },0,i)}// c

原创 判断对象的值是否完全相等

function isEqual(objA,objB){ var keysA=Object.keys(objA); var keysB=Object.keys(objB); if(keysA.length!==keysB.length) return false; for(var i=0;i<keysA.length;i++){ var key=keysA[i] if(typeof objA[key] !== typeof objB[key]) re

原创 算法-数组随机生成

随机打乱数组，数组原地交换不依赖新的数组变量function sort(arr){ for(var i=0;i<arr.length-1;i++){ var randIdx=Math.floor(Math.random()*(arr.length-i)); [arr[randIdx],arr[arr.length-i-1]]=[arr[arr.length-i-1],arr[randIdx]]; } return arr}...

原创 算法-判断字符串闭合

(),{},[] 三种类型符号组成未知长度字符串，判断该字符串是否是闭合字符串是闭合则返回true 否则返回false例如：(){}[] // true([) // false({[]}) // truefunction judge(str){ var length=str.length; var right=[']','}',')']; var strArr=[]; for(var i=0;i<length;i++){ var cur=s

原创 base64字符串转canvas

dom:<canvas id="myCanvas" width="800" height="800"></canvas>js: var imgbase64 = yourBase64String; //your own param let img = new Image(); img.src = imgbase64; let myCanvas = document.getElementById( "myCanvas" ).getContext( '

原创 css实现文本溢出时 ...在左侧

width: 100px;direction: rtl;overflow: hidden;text-overflow: ellipsis;更多后续规范及属性，可参见MDN

原创 vue-antd的table中多行数据某一列合并-代码实现

const renderContent = (value, row, index) => {const obj = {children: value,attrs: {},};if (index >= 4) {obj.attrs.colSpan = 0;}return obj;};

原创 react高阶函数用法实例

原创 手写深拷贝-代码实现

function deepClone(obj){function isObject(para){return ((typeof para===‘object’||typeof para ===‘function’)&&para!==null)}if(!isObject(obj)){return obj}let cloneObj=Array.isArray(obj)?[]:{}for(let key in obj){if(obj.hasOwnProperty(key)){

原创 vue中防抖函数指令实现

Vue自定义防抖指令实现Vue.directive(‘throttle’,{bind:(el,binding)=>{let throttleTime=binding.valueif(!throttleTime){throttleTime=2000}let cbFun=nullel.addEventListener(‘click’,event=>{if(!cbFun){cbFun=setTimeOut(()=>{cbFun=null},throttleTime)}e

原创 js之reduce操作

js操作之reduce1.遍历求和 const arr=[ {id:1,value:1}, {id:2,value:1}, {id:3,value:1}, {id:3,value:2}, {id:2,value:5} ]预计输出[ {id:1,value:1}, {id:2,value:6}, {id:3,value:3},]2.方法reducearr.reduce((pre,next)=>{ let findIndex=p

原创 git多账号配置

一台电脑多git账号：1.移除git全局配置git config --global --unset user.namegit config --global --unset user.email2.生成github并部署ssh-keygen -t rsa -C “yongjun.zhang@email1.com”2.1 生成此账号对应的公钥和私钥3.生成gitee并部署ssh-keygen -t rsa -f ~/.ssh/id_rsa2 -C “yongjun.zhang@email2.c

原创 vue2项目实现对打包文件分析

问题场景：jenkins打包发布时间较长，故对项目打包后文件进行查看实现步骤：step1： npm install webpack-bundle-analyzer 安装分析包step2: 在vue.config.js文件中的先定义模块const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPluginstep3: 在webpack的configureWebpack中引入config.opt

原创 前端this使用总结

1.全局环境下：this始终指向window2.函数直接使用时，2.1 严格模式下：this为undefined2.2 非严格模式：this为全局window3.对象中使用时，3.1 对象内部方法的this指向调用此方法的对象本身3.2 多层嵌套对象，内部方法的this指向最近的调用对象3.3 原型链中的this,也指向调用它的对象4.构造函数中的this4.1 如返回值不是对象，则this指向创建的对象本身4.2 如人为指定返回为对象，则this指向该对象4.3 call&a

原创 promise.all用法实例

场景描述：step1: 请求list接口获取数据，item中有一个url属性，值为stringstep2: 请求url的链接获取页面渲染所需的json数据由于需要循环调用与then中重新组装数据，因此入坑(无法在调用的then中获取到数据)问题写法(简写)：.vue中store.js中以上问题写法 sore.js中返回的backList为空，vue中then方法获取的res数据为空，原因即为异步问题使用promise.all的正确写法vue中不变store.js中修改如下：根据

原创 element-ui的modal使用问题小计

问题描述：在a-modal的弹出层隐藏之后，会有一个没消失的div遮盖住dom节点，使dom节点事件点击无效，代码如下：解决定位：由于考虑全局影响，所以加了class名称，并对改class定义宽高及垂直水平居中，由于有visible.sync的定义，modal本身是可以隐藏的，但发现dom节点被遮盖，点击事件无法响应发现就是这个宽高的影响，查看dom节点发现该div下面的mask和warp都有了display:none的样式，故将对该class定义的宽高及垂直水平居中移入warp的设置里，此问题解决

原创 vue 父组件props传值子组件时 的更新问题

问题描述：父组件通过props的形式传值到子组件，子组件获取的数值可以更新，但视图不更新解决方法：方法1.在子组件中监听此prop属性，并在nexttick中调用更新方法，子组件中如下图监听prop对象originData,update方法为子组件自己的更新方法，如引入的时vue则无需注解形式，直接监听即可方法2.可以考虑计算属性，同事也有同样问题，计算解决，区别点在，计算属性时需单独定义计算属性，而且计算属性需要定义get与set方法，容易造成误解，此处待更新完善...

原创 vue-property-decorator 引入的组件路由钩子函数写法

问题：vue-property-decorator 方式引入的vue组件中 无法正常使用组件自己的钩子函数解决：方法1. 在@Component 中定义组件的钩子函数，如下：方法2. 在路由的定义里，全局注册组件的钩子函数，如下：整理：vue-router的钩子函数定义及形式展现。a.全局的钩子函数beforeEach,beforeResolve,afterEach 如：b.路由的独享钩子函数beforeEnterc.组件的钩子函数beforeRouteEnter,beforeRout

原创 前端跨域的几种方法与区别

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。2.同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为：1.) Cookie、LocalStorage 和 IndexDB 无法读取2.) .

原创 Promise相关技能

=promise请求相关=定义:Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值参数: 带有 resolve 和 reject 两个参数的函数 。Promise构造函数执行时立即 调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回所建promise实例对象前被调用）。resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或r

原创 vue中页面跳转杀掉pending请求

解决思路：引用axios的CancelToken方法vue目录，常规用法如下：1.在router的index文件中引入a. import cancelTokenSources from ‘…/xhr/ajax’b. router.afterEach(() => {// 路由跳转杀请求for (const [cancelToken, cancel] of cancelTokenSources) {cancel(cancelToken) // cancel 正在pending的请求}

原创 html css js项目总结-官网

项目介绍：官网展示技术点：js,html,css，swiper轮播，pdjjs文档在页面预览加载首页：1布局 场景一、左边img 中间是两头虚线中间实线 右边文字 结构如下： <div class="headerLeft"> <div class="headerLeftImg"> <img src='./public/imgs/to...

原创 通过js的File对象获取图片的base64字符串

自己定义一个方法名，将下面代码加入即可：//1:获取file对象var upImage = document.getElementById(‘fileId’);// 页面上input框标签对应的idvar objImage = upImage.files[0]; // 获取第一个文件的对象var reader = new FileReader(); // 实例化File对象//2:解析对...

原创 js中Date对象的format方法无效之解决办法

在前端vue或者react结构中，并不会有此问题，直接用date对象实例之后调用formate的方法即可(即可返回yyyy-MM-dd HH:mm:ss也可自己设定想要的形式)Date.prototype.Format = function(fmt) {var dateStr = {“M+”: this.getMonth() + 1, //月份“d+”: this.getDate(), /...

原创 js获取每10分钟一个点的方法

直接贴方法和代码：var dateStr = new Date().toLocaleString().substring(0, 10); // 获取当前的年月日信息var xAxisBegin = dateStr + " 00:00:00";var axisData = [];var step = 10 * 60 * 1000; // 十分钟一个点 for (var i...

原创 git commit时的提交信息修改

使用环境 window , git commit 之后 git push之前如发现commit的说明信息有误的话 需要重新修改即可按照如下方法操作, window下 亲测好用commit之后push之前 在当前目录下step1: git commit --amend (进入修改)step2: 在弹出窗口 输入字母i 进入编辑模式step3: 开始修改时注意文字 在有...

原创 BOM(Browser Object Model)浏览器对象模型 / DOM (Document Object Model)文档对象模型

BOM对象详解对象一 window常用方法 ① prompt：弹窗接受用户输入； ② alert：弹窗警告； ③ confirm：带有确认/取消按钮的提示框； ④ close：关闭浏览器窗口； ⑤ open：重新打开新窗口，传入参数URL/窗口名称/窗口特征； ⑥ setTimeout：设置延时执行，只会执行一次（两个参数：需要执行的function/毫秒数）； ⑦ setI...

原创 Object的方法之assign方法/create方法的理解

assign方法的理解:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。语法Object.assign(target, …sources)target 是目标对象 sources是源对象返回值是目标对象深拷贝问题Object.assign()拷贝的是属性值。假如源对象的属性值是一个指向对象...