![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
mrzhangdulin
这个作者很懒,什么都没留下…
展开
-
axios如何取消重复请求
axios如何取消重复请求在开发中,经常会遇到接口重复请求导致的各种问题。对于重复的get请求,会导致页面更新多次,发生页面抖动的现象,影响用户体验。对于重复的post请求,会导致在服务端生成两次记录(例如生成两条订单记录)。如果当前页面请求还未响应完成,就切换到了下一个路由,那么这些请求直到响应返回才会中止。无论从用户体验或者从业务严谨方面来说,取消无用的请求确实是需要避免的。当然我们可以通过页面loading来避免用户进行下一次的操作,但本文只讨论单纯的如何取消这些无用的请求。axios原创 2020-09-02 20:16:10 · 561 阅读 · 0 评论 -
如何使用chrome调试iphone页面?win10 remotedebug-ios-webkit-adapter 安装与使用
先放个原版教程链接,请戳这里 https://github.com/RemoteDebu…使用chrome devtools 调试 iphone 页面,需安装 remotedebug-ios-webkit-adapter 工具。这个 adapter 可牛批坏了,可以通过VS Code,Chrome DevTools,Mozilla Debugger.html和其他与Chrome调试协议兼容的工...原创 2020-04-27 13:54:59 · 3564 阅读 · 0 评论 -
那些让开发如虎添翼的在线工具
那些让开发如虎添翼的在线工具网上可以找到前端开发社区贡献的大量工具,这篇文章列出了我最喜欢的一些工具,这些工具给我的工作带来了许多便利。EnjoyCSS老实说,虽然我做过许多年前端开发,但我并不擅长 CSS。当我陷入困境时,EnjoyCSS 是我的大救星。EnjoyCSS 提供了一个简单的交互界面,帮助我设计元素,然后自动输出相应的 CSS 代码。EnjoyCSS 可以输出 CSS、L...转载 2020-04-26 20:06:18 · 182 阅读 · 0 评论 -
移动 web 最佳实践(干货长文,建议收藏)
移动 web 最佳实践(干货长文,建议收藏)笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile[1] 的基础上修改的(ma...转载 2020-04-26 14:11:14 · 352 阅读 · 0 评论 -
手机状态栏高度
this.$nextTick(() => { var immersed = 0; var ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent); if (ms && ms.length >= 3) { // 当前环...原创 2020-04-21 10:36:42 · 1293 阅读 · 0 评论 -
判断 浏览器 手机 版本信息
export function getBrowser () { const u = navigator.userAgent; // const app = navigator.appVersion; const data = { // 移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, // IE内核 presto: u...原创 2020-04-16 19:41:50 · 294 阅读 · 0 评论 -
前端之浅谈浏览器的垃圾回收机制和内存泄露
JavaScript使用垃圾回收机制来自动管理内存。JS的回收机制分两种:1.标记清除 2.引用计数。各大浏览器常用的是前者。比如,Chrome浏览器限制的所能使用的内存极限(64位为1.4GB,32位为1.0GB),这就意味着浏览器将无法直接操作一些大内存对象。标记清除:定义和用法:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:“离开环境”。某一个时刻,垃圾回收器会...原创 2020-03-07 11:47:03 · 632 阅读 · 1 评论 -
前端安全 xss csrf 点击劫持
一、基础知识1、XSS(Cross Site Scripting)跨站脚本攻击(1)原理:页面渲染的数据中包含可运行的脚本(2)攻击的基本类型:反射型(url参数直接注入)和存储型(存储到DB后读取时注入)(3)注入点:HTML节点内的内容(text);HTML中DOM元素的属性;Javascript代码;富文本复制代码//HTML节点内容注入 //DOM属性注入//java...原创 2020-02-24 11:27:15 · 341 阅读 · 0 评论 -
js 点击拖动
点击拖动 (function(){var transform = getTransform();function Drag(selector){this.elem = typeof selector == ‘object’ ? selector : document.querySelector(selector);this.startX = 0;...原创 2020-02-02 10:36:46 · 544 阅读 · 0 评论 -
js基础易忽略点
1if ( typeof v === 'undefined') { // true}if ( typeof null === 'object') { // true}2Number(null) //05 + null //5Number(undefined) //NaN5 + undefined //NaN3 整数和浮点数JavaScript 语言的底层根本...原创 2020-01-19 18:26:49 · 601 阅读 · 0 评论 -
绕开 referrer 防盗链 以及服务器nodejs 作防盗链图片中转
最近处理了一个与referer有关的需求,发现里面还是有一点门道的。因此在本篇文章整理了referer相关知识点,主要涉及图片防盗链与如何绕开防盗链限制。参考:Referer-MDN使用refererReferer是HTTP请求头的一个字段,包含了当前请求页面的来源页面的地址,通过该字段,我们可以检测访客是从哪里来的。那么,referer到底有啥作用呢?交互优化在某些web应用的交互...原创 2019-12-13 14:14:11 · 1543 阅读 · 0 评论 -
notification2017_v0118.js
/**@浏览器桌面提醒@author limeizhang#tencent.com@time 2017-05-24@https*/window.FERD_UserData = function(res){var _this = FERD_NavNotice,_data = “”,date = new Date();if(res.code === 0){_data = res...转载 2019-11-30 10:28:37 · 480 阅读 · 0 评论 -
js 获取剪切板内容,控制图片粘贴。
目前只有Chrome支持获取剪切板中的图片数据。还好需要这个功能的产品目前只支持Chrome和Safari,一些Chrome的新特性是可以尽情使用了,还是能够覆盖到大部分用户的。所以本文只讨论Chrome如何使用和如何阻止Safari,原理大概了解了,再研究其他浏览器相关的问题就容易多了。paste事件可以用js给页面中的元素绑定paste事件的方法,当用户鼠标在该元素上或者该元素处于focu...原创 2019-11-21 13:31:57 · 1808 阅读 · 0 评论 -
防盗链 nginx 配置防盗链
防盗链产生效果描述:在页面中引入一个链接,在页面中点击访问这个链接(注:直接页面通过浏览器打开是无效的,需要通过服务器访问页面)而通过地址栏与直接打开页面(不通过服务器)直接访问是返回正常的页面。看到这里也许你也猜到了这应该是跳转页面的后台做的访问限制。是的,对方做了防盗链处理了。什么是防盗链?要了解什么是防盗链,那就得先说说什么是盗链。盗链:盗链简单地可以理解成别人偷偷盗用了访问...原创 2019-05-09 13:30:25 · 223 阅读 · 0 评论 -
前端单元测试
为保证代码的质量,单元测试必不可少。本文记录自己在学习单元测试过程中的一些总结。TDD与BDD的区别TDD属于测试驱动开发,BDD属于行为驱动开发。个人理解其实就是TDD先写测试模块,再写主功能代码,然后能让测试模块通过测试,而BDD是先写主功能模块,z再写测试模块。详见示例服务端代码测试所谓服务端代码,指的就是一个node的模块,能在node的环境中运行。以一个项目为例,代码结构如下:...转载 2019-05-05 15:10:16 · 751 阅读 · 0 评论 -
axios finally
HTTP请求库使用axios,Promise对象有一个finally方法,但是在低版本浏览器不支持,所以需要引入对应的polyfill先安装promise.prototype.finally包npm install promise.prototype.finally --save然后在vue项目中需要用到finally的文件中引入import promiseFinally from 'pr...转载 2019-06-04 09:07:31 · 2127 阅读 · 0 评论 -
js 数字三位加逗点
function formatNum(str) { var newStr = ""; var count = 0; // 当数字是整数 if (str.indexOf(".") == -1) { for (var i = str.length - 1; i >= 0; i--) { if (count % 3 == 0 ...转载 2019-06-12 09:57:56 · 838 阅读 · 0 评论 -
http、TCP/IP协议与socket 之间的区别
http、TCP/IP协议与socket之间的区别网络由下往上分为: www.2cto.com物理层–数据链路层–网络层-- IP协议传输层-- TCP协议会话层–表示层和应用层-- HTTP协议1、TCP/IP连接手机能够使用联网功能是因为手机底层实现了TCP/IP协议...转载 2019-07-02 09:55:31 · 162 阅读 · 0 评论 -
JS实现判断滚动条滚到页面底部并执行事件的方法
需要了解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面...转载 2019-06-27 13:48:42 · 556 阅读 · 0 评论 -
数组去重 JS数组reduce()方法详解及高级技巧
reduce()方法可以搞定的东西,for循环,或者forEach方法有时候也可以搞定,那为啥要用reduce()?这个问题,之前我也想过,要说原因还真找不到,唯一能找到的是:通往成功的道路有很多,但是总有一条路是最捷径的,亦或许reduce()逼格更高…1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数,不包括数...转载 2019-07-10 13:18:07 · 3332 阅读 · 0 评论 -
JavaScript 正则表达式匹配汉字
一个可能有 20 年历史的正则表达式在谷歌搜索「JavaScript 正则表达式匹配汉字」的时候,前几条结果全都是/[\u4e00-\u9fa5]/。没有人怀疑这个正则表达式有什么问题,那么在 2018 年的今天,让我们站在 Chrome 64 的肩膀上,放飞一下自我。汉文(Han Script)是汉语、日本语、朝鲜语、韩国语的书写系统中的一种文字(Script),越南语在早期也曾在书写系统中...原创 2019-07-31 18:01:45 · 595 阅读 · 0 评论 -
实现双向绑定Proxy和defineproperty
<main> <p>请输入:</p> <input type="text" id="input"> <p id="p"></p></main>const obj = {};Object.defineProperty(obj, 'text', { get: function() { ...原创 2019-08-13 15:20:52 · 227 阅读 · 0 评论 -
JavaScript 正则表达式匹配汉字
一个可能有 20 年历史的正则表达式在谷歌搜索「JavaScript 正则表达式匹配汉字」的时候,前几条结果全都是/[\u4e00-\u9fa5]/。没有人怀疑这个正则表达式有什么问题,那么在 2018 年的今天,让我们站在 Chrome 64 的肩膀上,放飞一下自我。汉文(Han Script)是汉语、日本语、朝鲜语、韩国语的书写系统中的一种文字(Script),越南语在早期也曾在书写系统中...转载 2019-08-10 15:20:57 · 997 阅读 · 0 评论 -
axios 发送post请求下载文件
发送post请求下载文件先说一下背景:这是一个以vue作为框架并用Axios来发送http请求的项目。我想要实现用axios来发送post请求,然后服务器会返回的response是一个文件流,我希望能将这个文件流写入excel,从而实现该excel文件的下载。可以实现的一种方案:exportData () { const form = this.getSearchForm()...原创 2019-09-02 17:15:12 · 1678 阅读 · 1 评论 -
eslint配置
/** * 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring * 【eslint中文文档】http://eslint.cn/docs/rules/ *//** * eslint有三种使用方式 * 【1】js代码中通过注释的方式使用 * 【2】通过webpack的eslintConfig字段设置,e...原创 2019-09-23 16:33:19 · 519 阅读 · 0 评论 -
css样式转换为based4
var fs = require('fs');function base64_encode(file) { var bitmap = fs.readFileSync(file); return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');}console.log(base64_encode('./qrcode...原创 2018-09-25 09:41:39 · 350 阅读 · 0 评论 -
vue js工具函数
/**Created by jiachenpan on 16/11/18.*/export function parseTime(time, cFormat) {if (arguments.length === 0) {return null}const format = cFormat || ‘{y}-{m}-{d} {h}:{i}:{s}’let dateif (type...转载 2019-04-29 15:13:17 · 930 阅读 · 0 评论 -
html禁止自动填充input表单的完美解决办法
首先设置input为只读readonly,当页面加载完成后,浏览器不会自动填充内容,但是也不可以进行编辑。然后我们再用js的定时器延迟一段时间后移除input的只读属性readonly,输入框便可进行再次编辑!完美解决!<form method="post" action=""> <input type="text" name="username" readonly="...转载 2019-04-29 14:31:31 · 2326 阅读 · 0 评论 -
函数防抖和节流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢?一般来讲,防抖和节流是比较好的解决方案。让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。html 文件中代码如下<div id="content" st...转载 2019-04-17 16:55:06 · 136 阅读 · 0 评论 -
js如何判断一个对象{}是否为空对象,没有任何属性,为空对象的几种方法
1.将json对象转化为json字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) {return false;}retur...原创 2018-10-30 09:22:05 · 4824 阅读 · 0 评论 -
slice,substr和substring的区别
首先,他们都接收两个参数,slice和substring接收的是起始位置和结束位置(不包括结束位置),而substr接收的则是起始位置和所要返回的字符串长度。直接看下面例子:1 var test = ‘hello world’;23 alert(test.slice(4,7)); //o w4 alert(test.substring(4,7...转载 2018-10-31 18:51:56 · 156 阅读 · 0 评论 -
动态定义正则表达式
强烈建议使用常量形式(如 /^a*b+/g)来定义正则表达式,这样不仅语法简单,执行效率也更高,因为 JavaScript 引擎在代码执行前会对它们进行预编译和缓存。与前面的构造函数不同, RegExp(…) 有时还是很有用的,比如动态定义正则表达式时:var name = "Kyle";var namePattern = new RegExp( "\\b(?:" + name + ")+...原创 2018-10-31 13:17:00 · 2247 阅读 · 0 评论 -
dom元素增加resize,以及echart增加resize
通过 vuex 实现 vue-echarts 图表的手动 resize背景:项目有用到 vue-echarts, 百度推出的 vue 版本的 Echarts,图表自带响应式属性 auto-resize, 来实现窗口尺寸变化时,图表的尺寸自适应,但是发现它是靠监听 window 的 onresize 来实现的,而有时候当chart 容器 尺寸变化时,window 窗口大小是不变的,比如我这次遇到的...转载 2018-10-29 09:28:05 · 1787 阅读 · 0 评论 -
中国省市区三级联的JSON格式
网上的json中国省市区好像都不全,不然就是格式不对,自己费了好大功夫,终于弄好了,分享给大家,有钓鱼岛的哦 [{ "name": "北京", "city":[{"name":"北京", "area":["东城区","西城区","崇文区","宣武区","朝阳区","丰台区&转载 2017-09-08 22:50:15 · 7944 阅读 · 0 评论 -
node生成随机手机号
var fs = require('fs')function makeNum() { let num = '1', random = Math.random(); if (random >= 0.1 && random < 0.2) {//15概率 num += '5'; } else if (random >= ...原创 2018-09-25 09:47:41 · 790 阅读 · 0 评论 -
深拷贝js
function find(list, f) {return list.filter(f)[0]}export function deepCopy(obj, cache = []) {// just return if obj is immutable valueif (obj === null || typeof obj !== ‘object’) { return obj }// ...原创 2018-09-19 16:09:56 · 122 阅读 · 0 评论 -
金额转汉字以及复制到面板
/* 金额转大写 */ /* ================================================== */ DX(n) { if (!/^(0|[1-9]\d*)(.\d+)?/.test(n))return;letunit=“千佰拾亿千佰拾万千佰拾元角分”,str=“”;n+=“00”;letp=n.indexOf(“.”);if(...原创 2018-08-02 13:35:40 · 94 阅读 · 0 评论 -
jqGrid userdata 获取不属于表格的其他数据
在某些情况下,我们需要从服务器端返回一些参数但并不想直接把他们显示到表格中,而是想在别的地方显示,那么我们就需要用到userdata标签· jsonReader: { · total: "xxx", · page: "yyy", · records: "zzz", · userdata: "userdata", · rows : [ · {id:"1...原创 2018-03-20 17:28:39 · 1682 阅读 · 0 评论 -
let const var
随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var、let、const 三种之多。var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?我们先来絮叨絮叨 var 方式定义变量有啥 bug ?Js没有块级作用域请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部。 for(var i=0;i<10;i++){ ...原创 2018-03-12 20:27:34 · 128 阅读 · 0 评论 -
concat和map异步调用
var res = [];// response(..)从Ajax调用中取得结果数组function response(data) {// 添加到已有的res数组res = res.concat(// 创建一个新的变换数组把所有data值加倍data.map( function(val){return val * 2;} ));}// ajax(..)是某个库中提供的某个Aj...原创 2018-11-09 09:07:12 · 797 阅读 · 0 评论