JavaScript
文章平均质量分 67
Markov Zheng
认真填坑
展开
-
Vue + html2canvas截图时 不能使用跨域图片或图片不展示
Vue + html2canvas截图时 不能使用跨域图片的解决方案需要修改三个地方:1、修改源码 node_modules/html2canvas/dist/html2canvas.js5710行和5714行 case 2:this.context.logger.debug("Added image " + key.substring(0, 256));return [4 /*yield*/, new Promise(function (resolve, reject) { var img原创 2022-01-12 17:24:21 · 1558 阅读 · 0 评论 -
Js中? ?和? .
Js中??和?.和 ||空值合并操作符 ??只有当左侧为null或者undefined的时候才输出右侧的值逻辑或操作符 ||左侧的值为假值的时候就输出右侧的数假值:null undefined '' 0例子:console.log(null ?? 'ss') // 输出ssconsole.log(undefined ?? 'ss') // 输出ssconsole.log(0 ?? 'ss') // 输出0console.log(0 || 'ss') // 输出ss原创 2021-11-17 18:11:46 · 264 阅读 · 0 评论 -
双token校验机制
双token校验机制什么是tokentoken是客户端登陆的时候由服务端生成,之后每次请求都需要携带token进行请求。校验用户身份呢的作用为什么使用token减少敏感信息的传递可以校验用户身份的准确性以及有效期单token登录流程以及请求校验流程注意token是使用base64的形式进行加密的 是有一部分存储在客户端中,所以,token中不建议存放敏感信息双token校验机制场景设想: 用户正在app或者应用中操作 token突然过期,此时用户不得不返回登陆界面,重新进行一原创 2021-11-15 17:37:29 · 13157 阅读 · 3 评论 -
Js去格式粘贴和指定位置插入内容
Js去格式粘贴和指定位置插入内容描述: uniapp项目,使用webview新建了一个脱离于项目而存在的一个编辑器,并实现数据交互,事件共同的功能,此处仅记录去格式粘贴和指定位置插入内容页面中新建了div设置 contenteditable="true" 允许在指定位置插入复制 粘贴的内容 指定位置插入内容思路通过设定contenteditable=true开启div的编辑模式2个步骤:① 获取DIV中的光标位置② 改变光标位置去格式粘贴思路document绑定paste事件 然原创 2021-09-17 10:35:33 · 639 阅读 · 1 评论 -
点击去他区域 阻止input/textarea 失去焦点
点击去他区域 阻止input/textarea 失去焦点需求描述:点击搜索按钮 搜索框不失去焦点 或者 富文本编辑器(设置了 contenteditable=“true” 的编辑区)中点击上传图片的按钮 编辑器的光标不会消失以点击搜索按钮 搜索框不失去焦点需求为例子解决方案1 blur事件中 重新让input获取焦点<el-input @blur='blurFn' ref='inp'/>·····blurFn(){ this.$refs.inp.focus()}原创 2021-08-23 16:27:46 · 2297 阅读 · 0 评论 -
Vue的按需加载
Vue的按需加载按需加载,又称延迟加载或者懒加载,只有在使用到的时候才会加载进来import引入的模块,会在加载imdex.js文件的时候,去加载所有的模块Vue中提供import的加载方式import Vue from 'vue'import Router from 'vue-router'import '@/components/Base'import '@/co...原创 2018-08-14 16:48:33 · 2428 阅读 · 0 评论 -
Mock.js-拦截Ajax请求
Mock.js-拦截Ajax请求在团队开发项目时,由于不是一个人去写前端,后端代码,开发进度的不同导致一个团队等待另一个团队的情况,后端人员除了要写接口,还要写接口文档,进度可能比前端人员略慢,前端人员停下来等待接口又十分的不友好,拖慢项目的进度,有的人定义一个json,模拟返回数据,但是这样的话又不够灵活,不能模拟后台返回的不同类型的数据,于是Mock.js就是一个解决这种问题的神器,...原创 2018-07-27 10:24:50 · 4757 阅读 · 0 评论 -
SEO优化(二)
SEO优化(二)蜘蛛爬取我们的网站信息很重要一点,就是通过html代码爬取信息,那么有选择性的让爬虫爬取网站中重要信息是十分必要的,这里是一些优化html代码的方式head中添加title标签title标签可以告诉爬虫,接下来的内容的主要思想是什么,一般来说title中可包含接下来内容的关键字3-5个左右,并且和内容高度相关,每个页面都应该有自己的title标签headin...原创 2018-06-15 11:09:20 · 384 阅读 · 0 评论 -
SEO优化(一)
SEO优化开发一个网站,制胜的关键有以下几点内容博人眼球渲染速度快兼容性好,不同环境下运行正常与用户存在互动服务器端使用CDNCDN 指内容分发网络CDN加速是指加速项目中静态资源的下载速度,比如图片,js,css等CDN加速的原理:将网站的内容分发至离用户最近的节点,使用户就近取得所需要的内容,提高响应速度,适用于 站点加速,直播,点播等场景。提高爬...原创 2018-06-14 09:16:50 · 4158 阅读 · 2 评论 -
APP兼容4.X版本
APP的向下兼容今天再做APP向下兼容4.X版本,发现他不支持ES6的新语法,包括模板字符串,箭头函数等, js的向下兼容使用babel编译,具体步骤如下安装gulp和babelnpm install gulp --save-devnpm install gulp-babel --save-devnpm install babel-preset-es2015 --save-d...原创 2018-06-07 10:40:31 · 295 阅读 · 0 评论 -
解决移动端的滑动事件总是出现无法侦听被动事件?
使用 swiper.js jquerymobile.js 等移动端js库的时候,如果使用了滑动事件,不时会看到报错:“ Unable to preventDefault inside passive event listener due to target being treated as passive”。但奇怪的是脚本运行正常,解决方法 css中加上这句* { touch-action...原创 2018-06-11 16:58:47 · 1478 阅读 · 1 评论 -
在线压缩图片---*.jpg *.png
在线压缩图片的网址使用方式—–直接将需要压缩的文件拖入指定区域,压缩完成后可直接下载压缩包 https://tinypng.com原创 2018-04-17 11:54:16 · 982 阅读 · 0 评论 -
JS问题整理(三)
JS踩坑整理(三)push:数组尾部添加pop:数组尾部删除shift:数组开头删除一个元素,返回删掉的值unshift:数组开头添加一个或多和元素,返回长度声明变量的提升无论在哪个地方声明了变量,js引擎都会将他的声明放在 范围作用域的顶部函数声明的提升代码执行之前会读取函数的声明,也就是说函数的调用可以放在函数的声明之前无论在那个地方声明了变量,js...原创 2018-04-10 15:14:39 · 193 阅读 · 0 评论 -
JS中数字的精度损失
JS数字的精度损失所有数字都是以 64 位浮点数形式储存,即便整数也是如此。 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00任何一门语言都会存在数字的精度损失问题,计算机只识别二进制,用户输入十进制的数字之后,计算机会将其转化成二进制进行运算,在转化成10进制返回给用户,在这些转化中可能会存在一些误差,这里有一些经典的例子0.1 + 0.2运算结果:0.300...原创 2018-08-02 13:19:59 · 3379 阅读 · 0 评论 -
vux获取PopupRadio子组件的值
在使用VUX的组件中,用到了PopupRadio组件,但是在文档中,并没有表明如何去获取select中的值,于是,我在这里使用了$refs与ref,直接上代码<template> <div class="getOilCard"> <ul> <li> <PopupRadio :opt...原创 2018-08-28 11:50:42 · 3216 阅读 · 0 评论 -
axios的使用.md
axios的使用在本次的项目中使用Vue构建 的项目需要向后台发起请求,Vue本身并不支持发起请求,需要使用vue-sour或者axios等插件,在新版本中对vue-souurce的支持并不友好,我在这里使用了axios,引入的方式有多重,这里只记录通过标签对侵入的方式引入<script src="https://unpkg.com/axios/dist/axios.min.js"&g...原创 2018-09-18 22:00:44 · 633 阅读 · 0 评论 -
浅谈for、for in 、for of 、map、forEach、each
浅谈for、for in 、for of 、map、forEach、eachfor循环多次遍历代码块for (let i = 0; i < 5; i++) { if(i==1){ break //-continue } console.log(i)}语句 1 在循环开始之前设置了一个变量(let i = 0)。语句 2 定义运行循环的条件(...原创 2019-10-11 13:09:48 · 344 阅读 · 0 评论 -
Curve25519加密解密
Curve25519加密解密出于安全性的考虑,在原本明文传输的基础上需要对传输内容进行加密,首先,curve25519是一个不对称加密算法,需要前后端相配合,双方一起使用该加密算法,逻辑如下:前端使用generateKeyPair得到自己的公钥和私钥,用自己前端的公钥去交换后端的公钥后端使用generateKeyPair得到自己的公钥和私钥,将后端的公钥返回给前端,同时,用自己的私钥...原创 2019-09-16 11:30:29 · 7166 阅读 · 2 评论 -
JS判断手机是安卓还是IOS,以及监听软键盘弹出收起
JS判断手机是安卓还是IOS,以及监听软键盘弹出收起直接上代码,踩得坑都在代码里var u = navigator.userAgent; //获取到的是个字符串,包括很多信息,我只匹配我想要的信息var isAnd = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //判断是安卓手机var isIOS = !!u.m...原创 2019-09-02 17:09:10 · 1044 阅读 · 2 评论 -
vue组件重载
Vue的组建重载项目开发中遇到需要重载组件的需求,根据我自己的理解有3种方法一、重新加载路由相当于按F5 整个页面重载location.reload();//js的方法//重新替换当前路由 replacethis.$router.replace({ path:"/index/main?name=name", name:"index"});//go(0)刷新当前页 go(-1...原创 2019-06-21 10:29:43 · 5360 阅读 · 0 评论 -
input 事件
input 事件1.onfocus 当input 获取到焦点时触发2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js3.onchange 当input失去焦点并且它的value值发生变化时触发4.onkeydown 在 input中有键按住的时候执行一些代码5.onkeyup 在input中有键抬起的时候触发的事件,...原创 2018-12-24 11:42:33 · 5732 阅读 · 0 评论 -
Vue动态给一个元素添加类名,兄弟元素移除类名
Vue动态给一个元素添加类名,兄弟元素移除类名直接上代码,亲测可用<template> <div> <ul> <li v-for="(item,index) in list" @click="do(item,index)" :class="{'color':index==current}">{{item.name}}&原创 2018-11-02 16:17:44 · 6341 阅读 · 0 评论 -
通过为Jquery二次封装获取获取地址栏中的参数
通过为Jquery二次封装获取获取地址栏中的参数需要先引入jQuery(function ($) { $.getUrlParam = function (name) { var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"); var r = window.locati原创 2018-10-17 10:34:59 · 321 阅读 · 0 评论 -
在网站中接入 客服QQ
在网站中接入 客服QQ,实现联系在线客服打开网址http://shang.qq.com/v3/widget.html<div data-toggle="tooltip" data-placement="left" title="联系客服"> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&am原创 2018-10-19 11:03:18 · 1329 阅读 · 2 评论 -
JS踩坑整理(二)
js问题整理(二)IOS端滑动不流畅的问题在安卓端滑动非常流畅,但是在IOS端,滑动非常卡顿,OK,很简单,使用overflow-x:auto;谷歌模拟器一切正常,安卓正常,可是打完包在IOS上,滑动效果慢到完全跟随手指的移动而移动,这样是肯定不行的经过百度发现了解决之道;-webkit-overflow-scrolling: touch;在body标签中添加ontouch...原创 2018-04-09 16:44:54 · 634 阅读 · 0 评论 -
nw.js学习日志(一)
NWjs学习日志首先nwjs能干什么通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许您从 DOM 调用 Node.js 的模块 ,实现了一个用所有 Web 技术来写原生应用程序的新的开发模式。完全支持nodejs所有api及第三方模块可以使用DOM直接调用nodejs模块它以前被称为“node-webkit”项目,package.json必须...原创 2018-03-06 14:34:20 · 950 阅读 · 0 评论 -
小程序踩坑日志(三)----Labrador
小程序模块化开发框架—–Labrador网址:https://github.com/maichong/labrador之前一直用的微信开发者工具去直接修改代码,倒不是说这样不行,就是不太友好,目录结构混乱,逻辑不清晰,身为开发者,我有时候都会混淆一些东西,更何况团队开发,所以不建议使用微信开发工具去直接修改代码,今天在网上看见一个Labrador框架,所以准备研究一下,正式学习之前需要原创 2018-01-31 15:09:50 · 2138 阅读 · 0 评论 -
React原理的认识
React原理的认识今天被一个朋友问到React的背景和原理,我记得自己以前总结过,但是还是有点懵,所以再写一下,增加自己的认知。React是MVC架构的V层,React把每一个组件当成一个状态机在通常web应用开发时,我们总是需要将数据实时的展示到页面中去,以往的开发模式是每当数据产生变化,总是重新渲染整个页面,即使只改变一小部分,也会渲染整个页面,这就导致了性能的低下。为此Re原创 2018-01-31 11:26:23 · 1052 阅读 · 0 评论 -
小程序踩坑日志(二)--modal的使用
小程序踩坑日志(二)小程序弹出框modal的使用modal弹出框经常用在提示一些信息,比如退出应用,清除缓存,修改资料。常用属性 属性名 默认值 说明 title 标题 hidden false 是否隐藏整个弹窗 no-cancel false 是否隐藏cancel按钮 confirm-text原创 2018-01-23 16:03:37 · 1689 阅读 · 1 评论 -
我为什么要学习微信小程序
我为什么要学习微信小程序在前端摸爬滚打的人大都听过微信小程序,不少公司招聘的的时候,也标注着 有微信小程序开发经验者优先,那么微信小程序的价值到底在哪里呢?特点首先我们需要知道他为什么存在,微信小程序的特点是小而块他主要解决的是小应用的问题,用完即走,不占用手机内存。触及范围广对于用户来说,小程序涉及PC端网页,公众号,H5,APP无法触及到的部分满足用户特殊需求当用户没有时间,想控制手机内存,原创 2018-01-15 11:05:05 · 2113 阅读 · 0 评论 -
小程序踩坑日志(一)
微信小程序踩坑日志起步申请账号查看AppID—“设置”-开发设置 小程序的appid相当于小程序平台的一个身份验证安装开发者工具https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818以及查阅开发者工具介绍https://mp.weixin.qq.com/debug/wxadoc/dev/d原创 2018-01-22 16:01:01 · 11523 阅读 · 0 评论 -
前端面试题(一)
浏览器内核谷歌 blink内核火狐 gecko内核ie trident内核opera presto内核js中定义一个类DOM元素.classList.add(“类名”)js中的数据类型初始数据类型:null undefined number boolean symbol string引用数据类型:数组 对象 函数装箱和拆箱装箱:把原创 2018-01-12 10:42:21 · 1448 阅读 · 0 评论 -
jQuery
jQueryhttp://jquery.com/ :官网js框架jQuery的目的用jQuery实现某些效果学习jQuery的编程思想(隐式循环,异步机制)了解到后面框架的走向发起http请求:script标签对 css 所有有链接的地方js语言的核心概念 :单线程异步机制如何优化HTML页面 加载 渲染速度 1.将js文件中放到HT原创 2018-01-11 11:02:44 · 391 阅读 · 0 评论 -
JavaScript基础(三)
流程控制while循环语法while(条件){ 循环体}dowhile语法do{ 循环体}while(条件)while do while 的区别while:先判断条件是否成立,然后执行循环体do while :新执行一次循环体,在判断条件如果初始条件不成立,do while 会执行一次循环体for 和while 和do w原创 2018-01-11 10:50:15 · 1230 阅读 · 0 评论 -
JavaScript基础(二)
07-28==比较判断符运算符关系运算符 运算结果是布尔值,值是ture/false = >= ===:全等 ==:判断两个值是否相等 =:代表赋值 ===:不仅比较数值还比较数值类型,判断是否全等比较两个数字比较正数>负数,负数 绝对值大的反而小字符串比较,比的是首字符对原创 2018-01-11 10:48:30 · 287 阅读 · 0 评论 -
Redux学习日志(一)
Redux学习日志(一)Redux中文文档:http://www.redux.org.cn/阮一峰的网络学习日志:http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.htmlRedux是js的状态容器,提供可预测化状态管理Redux除了和React一起用之外还支持 其他界面库他体原创 2018-01-25 14:00:34 · 422 阅读 · 0 评论 -
SomeProblem(二)
let O = function(name){ this.name = name || ‘world’; }; O.prototype.hello = function(){ return function(){ console.log(‘hello ’ + this.name); }; }; let o = new O; le原创 2018-01-26 10:28:26 · 299 阅读 · 0 评论 -
异步的问题
promise async await generators之间的关系和区别async/await的主要益处就是有效的避免的回调地狱async表示这是一个async函数,await只能用在这个函数里。async也是一个promise对象await表示在这里等待promise返回结果了,再继续执行await后面跟着的应该是一个promise对象Promise的含义Prom原创 2018-02-02 10:51:57 · 303 阅读 · 0 评论 -
SheetJS---(js-xlsx)
SheetJS的使用(js-xlsx)使用纯前端的方式实现对excel表格的读取和导出功能github地址:https://github.com/SheetJS/js-xlsx学习地址:https://www.jianshu.com/p/74d4059403051.导入功能实现下载js-xlsx到dist复制出xlsx.full.min.js引入到页面中 然后通过File...原创 2018-03-06 10:28:30 · 21552 阅读 · 5 评论 -
React-Native基础知识
React-NativeReact-Native看起来很像React,不同的是,基础组件是原生组建而非web组件,编写“hello world”import React,{Component} from "react";import {AppRegistry,Text} from "react-native";class Hello extends Component{ ...原创 2018-03-19 09:53:06 · 943 阅读 · 0 评论