- 博客(61)
- 收藏
- 关注
RSS订阅原创 谷歌浏览器更新后不能手动修改cookie
更新最新版本谷歌浏览器后，发现无法直接在控制台修改cookie了解决：在谷歌浏览器中搜索chrome://flags/将页面中Partitioned cookies属性设置为enabled重启浏览器
2022-02-21 14:01:08
687
1
原创 前端多字段模糊查询
这里写自定义目录标题const arr = [ {id: "1", en: "Afghanistan", cn: "阿富汗", code: "93"}, {id: "2", en: "Iraq", cn: "伊拉克", code: "964"}, {id: "3", en: "Qatar", cn: "卡塔尔", code: "974"}, {id: "4", en: "China", cn: "中国", code: "933"},]/** * @descriptio
2021-09-28 19:11:09
919
转载 dependencies与devDependencies区别，以及peerDependencies的作用，npm2和npm3区别
作者：报道出了偏差链接：https://www.zhihu.com/question/310545060/answer/584122572来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。问题一：为何一个依赖（比如jquery）不管是放到dependencies还是devDependencies下，在打包的时候（NODE_ENV两种情况下都试过）都会把jquery打进去（这跟上面的大多数人解释的貌似不符呀，按照上面的理解如果是放到devDependencies里面并且在
2021-02-24 15:20:54
2035
原创 JS跳出for循环三种方法的区别(break, continue, return)
breakfor(let i = 0; i < 5; i++) { if(i == 3) { break; } console.log(i);}// 0 1 2break会终结当前for循环体continuefor(let i = 0; i < 5; i++) { if(i == 3) { continue; } console.log(i);}// 0 1 2 4continue仅仅停止该
2021-02-09 16:07:09
15270
原创 Safari浏览器兼容性问题
1.Safari下父元素设置flex后，子元素img设置width后，高度异常。<style> div { display: flex; width: 600px; } img { width: 100%; }</style><div> <img src="https://img-blog.csdnimg.cn/cover1/248667912046641316.jpg" alt="" />
2021-02-08 18:14:58
3203
1
原创 npm常用命令(清除缓存，查看源，修改源为淘宝镜像)，npm ci 命令
package-lock.json 用于锁住 package 的版本号，避免在生产环境中因版本导致的构建错误或者运行时错误，对于前端工程化也意义非凡。安装各种npm 包的时候，经常会出现有些包被墙导致下载不下来等等各种问题，但是明明已经开了代理，且都是全局代理了，但就是下载不下来包？端口号改为自己代理的端口号，该窗口的命令就会走代理了，但是是单次的，且只在当前窗口生效。查看某个包的依赖项，多少个版本，协议，最近版本号等信息（以webpack举例）查看本地是否全局安装某个包，以及包版本。
2021-01-25 16:34:18
12481
1
原创 最新前端面试题整理（持续更新中）
1.写出下面程序的运行结果：console.log([] == ![])console.log([] == [])console.log([] == {})console.log(new String('a') == new String('a'))console.log(isNaN(NaN))console.log(isNaN('32131dsafdas'))console.log...
2020-09-28 14:10:20
1661
1
原创 详解函数表达式与函数声明的区别
函数声明function a() { console.log("函数声明");}函数表达式var b = function () { console.log("函数表达式");};看一道常见面试题：getName(); //函数声明var getName = function () { console.log("函数表达式");};getName(); //函数表达式function getName() { console.log("函数声明");}getNam
2020-09-11 11:50:15
408
转载 具名的IIFE函数内部对函数再次赋值问题
var b = 10; (function b(params) { b = 20; console.log(b); }); console.log(typeof b);函数表达式与函数声明不同，函数名只在该函数内部有效，并且此绑定是常量绑定。对于一个常量进行赋值，在 strict 模式下会报错，非 strict 模式下静默失败。IIFE中的函数是函数表达式，而不是函数声明。另外，JS将function 关键字当做函数声明的开始，但是函数声明后面不能跟圆括号表.
2020-09-11 11:16:06
483
原创 better-scroll 在ios下，滑动过快时触发回弹(看到滑动之后，又弹回原处再次滑动)
问题出现背景：IOS版本：13.4版本，在Safari以及iphone微信下在better-scroll区域快速滑动时，均会出现该问题处理办法经查询是better-scroll插件在ios下的兼容性问题，github下有对应issue目前插件在2.x版本已修复该问题，如果还在使用1.x，需要升级到2.x版本，1.x版本下插件作者目前尚未修复该bug备注better-scroll 2.x文档...
2020-08-10 09:57:36
1399
原创 html2canvas生成图片底部白边问题
html2canvas(document.getElementById("poster-canvas-box"), { useCORS: true, height: document.getElementById("poster-canvas-box").clientHeight - 2, // canvas高度与所截图高度相同或者更小，解决底部白边问题}).then((canvasElement) => { // do something});...
2020-07-28 15:42:35
1864
1
原创 ios Safari浏览器下audio音频播放延迟问题，自动播放失效问题
问题背景audio标签在chrome和Firefox浏览器下效果均正常，但是在Safari浏览器下，执行audio.play()方法后，音频会有延迟效果，迟钝一小段时间后才会播放，很影响用户体验。问题原因反正就是safari浏览器做了一些特殊限制，具体原因，请自行google。解决方案项目中引入howler.jsimport {Howl} from 'howler';var sound = new Howl({ src: ["xxxx"]}); sound.play();再次在S
2020-07-22 14:55:29
3831
7
原创 prettier升级2.0后报错
报错如下：[error] No files matching the pattern were found: "src/**/*.js".[error] No files matching the pattern were found: "src/**/*.jsx".[error] No files matching the pattern were found: "src/**/*.json".[error] No files matching the pattern were found: "s
2020-05-13 18:43:04
5431
原创 JS获取指定日期和当前日期关系(前天，昨天，今天，明天，后天)
项目中用到ts，如不需要请手动删除相关代码/** * 获取当前日期零点的时间戳 * @param date */function getStartTimestampOfDay(date: Date): number { try { return new Date( date.toISOString().replace(/\d{2}:\d{2}:\d{2}\.\d{...
2020-03-06 17:24:15
710
原创 JS格式化时间为各种常用字符串类型
可以将Date转为项目中常用到的各种string类型// 项目中使用到了ts，不需要请手动删除掉ts相关代码function formatDate(format: string, date: Date): string { const o: { [key: string]: number; } = { "M+": date.getMonth() + 1, // 月份 ...
2020-03-06 17:06:57
683
原创 去除移动端alert弹框中title(网页地址)
function test(){ // 覆盖默认alert方法 window.alert = function (name) { var iframe = document.createElement("IFRAME"); iframe.style.display = "none"; iframe.setAttribute("src", '...
2019-10-14 17:02:42
2241
原创 Webpack相关面试题整理
1. gulp/grunt 与 webpack的区别是什么?grunt 与 gulpGrunt和Gulp属于一类的都是构建工具，只是Grunt是根据配置来的，Gulp是采用代码优于配置的原则，Gulp的性能要比Grunt的性能要高，它们可以执行指定的任务。webpack的特点：Webpack 是目前最热门的前端资源模块化管理和打包工具。把一切都视为模块：不管是 CSS、JS、Image...
2019-04-18 17:32:18
7363
2
原创 js获取url参数
function getQueryVariable(variable) { var query = window.location.search.substring(1); var params= query.split("&"); for (var i=0;i<params.length;i++) { var param= params[i].split("="); ...
2019-04-02 11:18:43
268
原创 ajax使用post请求中的数据的 '+&='等特殊字符丢失(变成空格)
出现场景 var params={"strStartDt":"/Date(1553702400000+0800)","strEndDt":"/Date(1553788799000+0800)","iQueryType":0,"strCondition":"67sdsafOOK+aJhfdfw=="} $.ajax({ url:'http://192.168.67.1/te...
2019-03-29 10:54:56
3309
原创 Css圣杯布局和双飞燕布局
圣杯布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
2019-03-24 14:49:14
1307
原创 JS 随机打乱数组
以前项目中常用的打乱数组的方法[1,2,3,4,5,6].sort(function(){ return Math.random() - 0.5})或者使用更简洁的ES6代码[(1, 2, 3, 4, 5, 6)].sort(() => Math.random() - 0.5)但是，实际上这种方法并不能真正的随机打乱数组，每个元素有很大几率还在它原来的位置附近出现。具体原因...
2019-03-12 17:58:59
1647
原创 [] == []、[] == ![]、[] == {}、new String('a') == new String('a')引出转换类型比较运算符('==') 使用时的各种隐式类型转换
严格比较运算符(===)使用严格比较运算符时，不存在隐式类型转换，就不做太多说明。转换类型比较运算符(==)在使用’=='时，如果两个类型的值进行比较，会出现隐式类型转换。具体转换规则大致如下：类型类型比较时的转换对象对象同类型比较不发生类型转换，但是会比较两者所指向的内存地址，此处需要注意的是，new String(‘a’) == new String(‘a’)...
2019-02-21 16:01:17
426
原创 微信公众号踩坑笔记
记录一些在微信公众号开发中碰到的问题配置IP白名单需要动态获取当前页面完整的URL地址（包括?后面的参数，但不能包含#号），如若URL地址为：http://www.xxx.xxx/payment/wxpay/jspay?oid=xxxx&attr=xxxx#wechat，那么完整的URL地址应该是截取#号之前的部份。为什么会出现#号呢？因为你的URL在被分享到朋友圈等微信系统自动会...
2018-09-13 15:48:12
602
原创 在https下使用require.js加载百度地图api
百度地图的加载方式比较奇葩，百度提供的cdn加载地址是这样的http://api.map.baidu.com/api?v=2.0&amp;ak=xxx,但是实际上，在网页上直接打开这个地址，返回的内容如下(function () { window.BMap_loadScriptTime = (new Date).getTime(); document.write( ...
2018-09-12 19:44:31
2230
原创 构造函数中return 不同类型的值（对象或非对象）
function F1() { this.name= 'zhangsan'; return [];}var f1=new F1();console.log(f1);//[]console.log(f1.name);//undefinedfunction F2() { this.age = 10; return 20; }var f2=n...
2018-09-05 15:57:48
1091
转载 详解JS继承的多种实现方式
(1) 借助构造函数实现继承function Parent(){ this.name = ‘lxf’;}function Child(){ Parent.call(this); this.age = 18;}这种方式只能实现部分继承，即父类的构造方法中的属性，子类可以继承，其缺点是，父类原型上的属性或方法，子类无法继承。(2)借助原型链实现继承func...
2018-07-25 10:48:34
264
原创 ES6中Class的继承 学习笔记
class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // ...
2018-07-19 16:44:17
245
原创 ES6 Map学习笔记
MapJavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。const data = {};const element = document.getElementById('myDiv');data[element] = 'metadata';data['[object HTMLDivE...
2018-07-19 15:05:23
206
原创 ES6 Set学习笔记
SetSet 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。const set = new Set([1, 2, 3, 4, 4]); // 可用来实现数组去重set.size // 4 [...set] // [1,2,3,4]向 Set 加入值的时候，不会发生类型转换，Set 内部判断两个值是否不同，使用的算法叫做“Same-v...
2018-07-19 11:27:18
180
转载 数组对象根据某个key相同合并分组
var arr = [ {"id":"1001","name":"值1","value":"111"}, {"id":"1001","name":"值1","value":"11111"}, {"id":"1002&q
2018-07-19 10:09:14
16461
6
原创 ES6中class 学习笔记 (二)
1.this的指向，类的方法内部如果含有this，它默认指向类的实例class Logger { printName(name = 'there') { this.print(`Hello ${name}`); } print(text) { console.log(text); }}const logger = new Logger();cons...
2018-07-18 14:54:55
282
原创 ES6中class学习笔记 (一)
1.类的数据类型就是函数，类本身就指向构造函数，这与 ES5 的行为是一致的。class Point { // ...}typeof Point // "function"Point === Point.prototype.constructor // true2.类的所有方法都定义在类的prototype属性上面，在类的实例上面调用方法，其实就是调用原型上的方法。 3.Ob...
2018-07-17 16:09:10
238
原创 使用正则从字符串中截取出img标签、以及对应src地址
1.从字符串中匹配出所有的img标签var str = "this is test string <img src=\"http:baidu.com/test.jpg\" width='50' > 1 and the end <img src=\"所有地址也能匹配.jpg\" /> 33! <img src=\"/uploads/attached/image/20...
2018-07-13 16:21:18
24302
3
原创 for in与Object.keys与Object.getOwnPropertyNames的区别
var parent = Object.create(Object.prototype, { a: { value: 123, writable: true, enumerable: true, configurable: true }});// parent继承自Object.protot...
2018-07-12 14:57:53
391
原创 ES5实现Array.from（类数组转为数组）
直接上代码var a={length:2,0:'aaa',1:'bbb'}; Array.prototype.slice.call(a);// ["aaa", "bbb"] var a={length:2}; Array.prototype.slice.call(a);// [undefined, undefined]
2018-06-23 10:59:27
3499
转载 HTTP 错误 500.21 - Internal Server Error以及aspnet_regiis.exe 不是有效的 Win32 应用程序的解决方法
通过vs附加进程的方式调试网站过程中遇上了“HTTP 错误 500.21 - Internal Server Error”的错误提示，查找资料之下知道了可以通过cmd命令本来输入命令解决该问题。通过我大百度，了解到是因为在安装Framework v4.0之后，再启用IIS，导致Framework没有完全安装此时我的机器又提示“aspnet_regiis.exe 不是有效的 Win32 应用...
2018-06-21 10:25:20
849
原创 js 根据日期判断周几
直接上代码var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; var myDate = new Date(Date.parse("2018/5/19")); console.log(weekDay[myDate.getDay()]); // 星期六...
2018-05-21 17:42:59
15903
原创 for in 循环不要用来遍历数组！
1.for in循环会遍历到数组中的原型链中的属性 只有具有 Enumerable （可枚举）属性的属性才能被 for … in 遍历。例如constructor 便是最常见的不可枚举属性之一。let arr=[1,2,3]Array.prototype.xxx=1231235for(let i in arr){ console.log(arr[i])}// 1// 2/...
2018-04-08 15:47:49
4077
转载 使用serializeObject()将form表单中的数据序列化成对象
在ajax中有 serializeArray()方法 可以将form表单中的数据序列化成如下的格式[ { name: "a", value: "1" }, { name: "b", value: "2" }, { name: "c", ...
2018-03-08 18:43:44
18070
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人