js
文章平均质量分 63
haoyanyu_
这个作者很懒,什么都没留下…
展开
-
Sass报错: Using / for division is deprecated
: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.Recommendation: math.div($px, $screenWidth)More info and automated migrator: https://sass-lang.com/d/slash-div原创 2021-08-30 15:51:31 · 6120 阅读 · 0 评论 -
ArrayBuffer、TypedArray、DataView的关系
三者关系ArrayBuffer是原始的二进制数据缓冲区。TypedArray是描述一个底层的ArrayBuffer的类数组视图。DataView视图是可以从ArrayBuffer对象中读写多种数值类型的底层接口。ArrayBufferArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区,是一个字节数组。只能通过TypedArray和DataView来操作其内容。ArrayBuffer的格式如下:通用属性:ArrayBuffer.prototype.byteLengt原创 2021-01-08 16:00:07 · 600 阅读 · 0 评论 -
js实现行内多个元素动态均匀分布
需求背景平台首页有选货市场,商品大图展示时,要求根据浏览器宽度均匀排布。即浏览器宽度不同,一行展示的商品数量不同,通过改变外边距,让商品均匀填充满容器盒子。原实现方案通过css的flex布局和justify-content: space-between让商品元素均匀排布。效果如下:可见,当商品铺差不多够满了一行时展示效果是ok的,不足一行时,就会有问题。新思路不再用flex布局,使用float浮动,让商品元素一行展示;根据父容器的宽度,计算出一行可以展示的数量 n;计算每个商品的mar原创 2020-10-20 15:49:10 · 1621 阅读 · 0 评论 -
URL查询字符串的处理小妙招——URLSearchParams
URLSearchParamsURLSearchParams接口定义了一些很实用的处理URL查询参数的方法;例如:从查询参数里获得某个属性的值,把一个对象转成查询参数,修改查询参数等。以前不知道这个接口的时候,是用正则表达式来处理,好痛苦的呢。直接用在 for…of 结构中一个实现了 URLSearchParams 的对象可以直接用在for...of结构中(跟map很像);for (const [key, value] of mySearchParams) {}for (const [key,原创 2020-06-15 17:39:33 · 891 阅读 · 0 评论 -
React Hook之useEffect的使用和源码分析
作用副作用前端开发中的副作用一般有:dom操作、浏览器事件的绑定和取消绑定、http请求、打印日志、访问系统状态、执行IO更新等。在class类组件中,副作用一般写在componentDidMount,componentDidUpdate, componentWillUnMount, componentWillUpdate里,但是函数组件没有生命周期,这个时候就可以用useEffect来解决了,这一个hook可以替代以上四个生命周期;useEffect的使用useEffect是组件第一次渲染和每次原创 2020-06-07 22:06:59 · 961 阅读 · 1 评论 -
React Hook 遇到的小坑--持续记录
1. 依赖项没指定好hook是利用闭包的特性来生成对应的方法;当不传依赖项,方法内部的状态值都是取的在定义hook的初始值;当传入了依赖项,那么依赖项值发生改变,hook会被更新,这个时候它内部用的变量也都会更新到最新。所以,如果hook里用了状态变量,一定要记得作为依赖项传入,否则会遇到坑哦。尤其是hook之间互相调用的时候,很容易指定不好依赖项。如下例子:本意:merchantChartQuery作为fetchOrder的依赖项,控制fetchOrder的更新。当执行setCpsOrder原创 2020-06-07 21:25:27 · 1093 阅读 · 0 评论 -
给大金额数字添加逗号分隔符
方法一:思路:split()方法截取整数部分,整数部分reverse()后,每隔三位插入一个逗号,最后一个三位不加逗号。方法二:利用正则/** * 格式化金钱格式 * @memberof module:money * @param {number} value 待格式化的金额数字 * @param {boolean} cent 是否是分 * @param {boolean} showComma 是否显示千分位逗号 * @returns {string} 格式化原创 2020-05-09 09:58:57 · 5661 阅读 · 0 评论 -
记一道字节跳动的面试题 js操作dom的执行顺序
面了一轮字节跳动,遇到一个面试题记录一下题目如下function demo () { const now = new Date().valueOf() document.body.style.backgroundColor = 'red'; while(new Date().valueOf() - now <= 2000) { continue; } document.bo...原创 2020-03-18 23:45:31 · 601 阅读 · 1 评论 -
window.performance对象
通过window.onpageshow的事件对象的persisted属性可以判断页面是否是从缓存读取的。但试了几次,不管刷新还是前进后退persisted都是false。查了一下看到一个新对象window.performance属性如下:其中有个navigation属性,里面的type也是来标记当前页面是刷新还是前进后退打开的memory表示js占用的内存情况;navigation....原创 2020-03-10 15:58:16 · 533 阅读 · 0 评论 -
js里的位运算|&^~>>
几种位运算的含义:| 按位或运算 0010 | 1000 = 1010 & 按位与运算 0010 & 1000 = 0000 ^ 按位异或运算 >> 右移一位,高位原本是1就补1,否则补0 << 左移一位,低位补零,高位移除 ~ 取反, 0变1, 1变0 举例子说明:(位运算前先把数字转为...原创 2020-03-08 20:49:16 · 1086 阅读 · 0 评论 -
git踩坑系列 — git pull 代码时报错refusing to merge unrelated histories
出现场景:本地新建一个文件夹开始开发项目,开发完成后要同步到git仓库,此时在根目录运行以下指令git initgit add .git commit -m 'initial commit'git pull origin dev // 执行这里就报错了执行到git pull 时,会报题目显示的错误,主要还是因为这是两个独立的仓库此时git pull origin dev -...原创 2020-02-27 23:52:01 · 279 阅读 · 0 评论 -
过滤emoji表情
实际项目中,input输入框经常用来输入手机号,姓名,邮箱等内容,会对文本格式进行限制,例如只能输入数字,字幕或者汉字。而iOS输入法中自带emoji表情,要过滤emoji表情时可以使用以下方法filterEmoji(str) { if (typeof str !== 'string') return str; // eslint-disable-next-line re...原创 2020-01-19 14:45:54 · 830 阅读 · 0 评论 -
qs—对象序列化为查询参数和URL解析成对象的库
安装npm install qs使用let qs = require('qs')// 或者 import qs from 'qs'方法对象序列化为URL查询参数let obj = {a: 1, b: 2, c: 3};let str = qs.stringify(obj); // a=1&b=2&c=3URL查询参数解析为对象let str = '...原创 2020-01-02 16:21:38 · 3986 阅读 · 2 评论 -
React系列: immutable.js的使用方法
immutable常用api一,Listimport {List} from 'immutable'1.List()const emptyList = List() //创建一个空的List结构的数据const plainArray = [ 1, 2, 3, 4 ]const listFromPlainArray = List(plainArray) // List [ 1, 2...原创 2019-10-25 10:51:20 · 630 阅读 · 0 评论 -
IOS浏览器点击后退后,页面空白
问题场景:项目中在别人的APP中嵌入一张卡片,作为入口进入自己项目的sdk, 需求是只有高版本的用户才能进入sdk,低版本的需要引导用户更新APP在APP和sdk之间,加入一个H5页面,在APP中点击入口后,进入H5页面,页面内容是引导用户更新,在H5页面加载(window.onload)时,判断APP传来的版本号,如果是低版本,继续渲染H5页面,完成引导用户更新。高版本则直接跳转(window....原创 2018-07-06 16:27:40 · 2851 阅读 · 0 评论 -
Compression Plugin Invalid Options options should NOT have additional properties
webpack打包时想要压缩js和css文件, 按照以前的项目拷贝了如下配置new CompressionWebpackPlugin({ asset: '[path].gz[query]', algorithm: 'gzip', test: new RegExp( '\\.(js|css)$' ), threshold:...原创 2019-08-26 13:59:39 · 1835 阅读 · 1 评论 -
H5把页面表格数据导出到本地文件,导出为本地csv文件
参考iview的表格导出导出表格需要有表头数据和具体数据//表头let columns = [ { title: '品牌', key: 'brandName' }, { title: '品种', key: 'breedName' }, { title: '平均零售价', key: 'avgRetailPrice' }, { title: '平均批发价', key: 'avgBat...原创 2019-08-27 15:34:27 · 2222 阅读 · 0 评论 -
vue里使用bpmn绘制流程图(二)
上回记录到在页面上生成并编辑流程图;但是实际使用中,往往需要进行自定义;下面就根据实际需求来一步一步实现自定义。不同的节点用不同的颜色区分插件提供的接口方法this.viewer.importXML(diagramXml, err => { if (err) { throw (err) } var overlays = this.viewer.get('overlay...原创 2019-09-10 18:02:31 · 4449 阅读 · 0 评论 -
vue里使用bpmn绘制流程图(三)
自定义工具栏和节点形状工具栏的源码在bpmn-js\lib\features\palette\PaletteProvider.js中PaletteProvider中定义了getPaletteEntries方法,用于新增工具栏项目PaletteProvider.prototype.getPaletteEntries = function(element){...//这里就是工具栏内容,...原创 2019-09-11 09:15:48 · 5034 阅读 · 0 评论 -
vue里使用bpmn绘制流程图(四)
1. 替换节点汉化点击扳手图标可以将当前节点替换成新的节点。节点名称默认是英文,此处可以汉化控制弹框显示的源码在 bpmn-js\lib\features\popup-menu\ReplaceMenuProvider.js中import translation from './translationsGerman'; //引入翻译文件ReplaceMenuProvider.proto...原创 2019-09-11 10:58:17 · 5880 阅读 · 2 评论 -
函数柯里化应用
函数柯里化把使用多个参数的函数转换成一系列使用一个参数的函数,返回接受余下参数并且返回结果的新函数;(也就是:只传递一个部分参数来调用这个函数,让他返回一个新函数去处理余下的参数)日常应用动态创建函数:(dom元素添加事件监听是,根据兼容性判断生成不同的函数)//只在函数第一次执行时判断一次,用到了闭包和立即执行函数const addEvent = (function(){ ...原创 2019-08-12 16:16:55 · 170 阅读 · 0 评论 -
安卓Android系统,H5页面键盘弹出后,页面挤压变形或者底部输入框被遮挡的解决办法
键盘弹出挤压页面至变形如下页面,背景图片height: 100%; 底部输入框部分用position:absolute定位,当键盘弹出时,页面整体被挤压;解决方法页面加载后获取视图高度为height,监听window.onresize,指定容器高度为height存在的问题: 偶尔会出现input框获取焦点后,被键盘覆盖,但是在输入内容后滚动到可视区域的现象底部的输入框获焦后,被键...原创 2019-08-08 16:31:07 · 1878 阅读 · 0 评论 -
vue2项目从webpack3升级到webpack4过程全记录以及多页面打包
升级各种插件,尤其是babel系列,从6升级到了7babel7系列的安装大多是@babel/开头,至少需要安装以下插件 "@babel/core": "^7.4.5", //核心包 "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-runtime": "^7.4.4", ...原创 2019-07-29 15:08:00 · 987 阅读 · 0 评论 -
移动端时间显示 invalid Date
最初写法://str: '2018-10-10 23:00:00'forMateDate(str) { if( str ) { return new Date(str).toLocaleDateString() }}PC端:移动端:解决方法:调整格式为 ‘2018/10/10 10:10:10’forMateDate(str) { if( st...原创 2018-11-19 17:01:42 · 4799 阅读 · 0 评论 -
-webkit-overflow-scrolling:touch及ios滚动
https://www.cnblogs.com/xiahj/p/8036419.html转载 2018-11-21 09:51:58 · 480 阅读 · 0 评论 -
H5带地理位置API获取地理位置
支持地理位置API的浏览器会定义navigator.grolocation属性,该属性拥有三个方法:1,navigator.geolocation.getCurrentPoaidion(); //获取当前地理位置是异步的,需要接受一个回调函数作为参数(还可以接受第二个参数,当获取失败后执行的回调,第三个参数是配置对象,包括是否需要高精度的位置信息、位置信息的过期时间、允许在多长时间内获取位...原创 2018-10-11 09:34:44 · 4423 阅读 · 0 评论 -
JS获取鼠标位置
html代码:js代码: 页面效果,鼠标滑动时实时获取鼠标位置原创 2018-09-20 11:22:10 · 307 阅读 · 0 评论 -
H5禁止弹出手机自带的软键盘 控制键盘输入手机号
1.禁用手机软键盘document.querySelector('input').addEventListener('focus', function(){ document.activeElement.blur();}, false)2.input 输入手机号<input type="tel" placeholder="请输入手机号码"/>input获取焦点后,弹出的是数字键盘...原创 2018-07-06 11:46:50 · 1270 阅读 · 0 评论 -
移动端禁止页面滚动
H5页面 超过一屏,点击某处 弹出弹出框提示,默认情况下,页面还可以滑动。解决方法://添加禁止屏幕滚动document.querySelector('element').addEventListener('touchmove', stopScroll, false);//移除禁止滚动事件监听document.querySelector('close').removeEventListener('...原创 2018-07-06 11:39:15 · 2076 阅读 · 0 评论 -
函数节流与分时函数
1.当js中定义的函数被短时间内多次执行时,会大大降低页面性能。例如当添加了window.onresize方法后,页面窗口变化时会自动调用N多次该方法。于是可以使用函数节流:给将要执行的方法做个延迟执行,当该方法还未结束延迟执行时,则自动忽略再次触发的该方法。直到延时结束。以下实现是,在点击按钮后,4秒内,再次点击按钮不再触发事件。// 函数节流代码实现//将要执行的方法延迟一段时间执行,...原创 2018-03-21 11:00:08 · 312 阅读 · 0 评论 -
js获取客户端操作系统
function detectOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows"); var isMac = (navigator.platform == "Mac68K") || (转载 2017-11-22 13:54:45 · 653 阅读 · 0 评论 -
H5中,FileReader使用
FileReader允许web应用程序异步读取存储在用户计算机上的文件的内容。使用File 或 Bolb 对象指定要读取的文件或数据。file对象可以是来自<input type="file" /> 选中的文件(拥有files属性,由传入的file对象组成),也可以是来自拖放操作的DataTransfer对象。 1、创建FileReader对象var reader ...原创 2018-12-13 17:33:24 · 1334 阅读 · 0 评论 -
html2canvas将HTML转为图片并保存以及Document.createEvent() 创建指定类型的事件
需求: vue(PC)项目中,页面上根据提供的信息生成一个审核报告,需要把该报告生成图片并自动保存到本地 实现思路: 1、使用html2canvas 将HTML转成canvas npm install html2canvas import html2canvas from 'html2canvas'--------------------------------------...原创 2018-12-27 09:26:17 · 1017 阅读 · 0 评论 -
https通信机制(http + ssl/tls)
https(http+ssl)https协议不是应用层的新协议,只是HTTP通信接口部分用SSL 或 TLS协议代替 一般情况,HTTP直接和tcp通信,使用SSL时,变成HTTP先和SSL通信,然后SSL在和TCP通信 SSL独立于HTTP,其他运行在应用层的协议,比如SMTP,Telnet等都可以配合SSL使用SSL采用的是公开密钥加密:公开密钥加密: 非对称的秘钥, 一把私有秘...原创 2019-07-29 11:02:57 · 394 阅读 · 0 评论 -
nvm管理node版本
1,安装nvm下载链接nvm安装包选择“nvm-noinstall.zip”包下载2,解压安装包,双击indtall.cmd,输入nvm包所在的路径,C:\nvm-noinstall然后回车例如解压到C:\nvm-noinstall3,生成setting.txt文件后,输入root: C:\nvm-noinstallpath: C:\nvm-noinstall\nodejsarch...原创 2019-07-09 11:11:52 · 134 阅读 · 0 评论 -
npm ERR! Unexpected end of JSON input while parsing near '...d5fc50e0944437e48e8 ae'
npm install 时报错如下:npm ERR! Unexpected end of JSON input while parsing near '...d5fc50e0944437e48e8ae'网上搜到解决办法是:npm cache clean --force清除缓存后,确实生效了,但是安装几次后还是会报错以上错误。。。...原创 2019-07-09 09:49:46 · 439 阅读 · 0 评论 -
js获取页面滚动条宽度
let cached;function getScrollBarSize(fresh){ //fresh 是否重新获取, cached: 是否获取过 if(fresh || cahced===undefined) { const inner = document.createElement('div'); inner.style.width = '100%'; inner.sty...原创 2019-07-08 13:31:45 · 2727 阅读 · 0 评论 -
XMLHTTPRequest的status为0
项目中用到XMLHTTPRequest进行数据交互,H5页面嵌入APP,突然一次预发布环境测试遇到status是0;印象中status是1,2,3,4,5开头的三位数。经过百度得知,是接口请求中遇到了跨域问题,所以status是0了此时readyState是4,status!=200...原创 2019-05-09 10:01:22 · 5143 阅读 · 2 评论 -
H5嵌入APP后,通过window.WebViewJavascriptBridge原生APP与H5之间交互
原生APP跳转到H5页面时,往往需要携带一些用户信息,之前做法是在跳转的地址中拼接H5页面需要的参数,现在通过window.WebViewJavascriptBridge悄悄的进行数据交互。本文主要从H5的角度记录交互思路:1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在wi...原创 2019-04-12 15:13:44 · 13426 阅读 · 3 评论 -
在H5中使用qrcode, qrcodejs2生成二维码
在H5中使用qrcode生成二维码安装插件```javascriptnpm install --save qrcode```使用插件按需引入 //index.html &lt;html&gt; &lt;head&gt;···&lt;/head&gt; &lt;body&gt; &lt;canv原创 2019-03-01 10:49:39 · 9652 阅读 · 0 评论