
JavaScript
js
风兮w
始终
展开
-
用Promise实现前端并发请求
【代码】用Promise实现前端并发请求。原创 2024-09-27 15:59:35 · 412 阅读 · 0 评论 -
正则表达式
转载自一看就懂:正则表达式关于^符号的作用,如果在[]中,^表示取反,否则表示以此开头转载 2022-03-27 17:46:06 · 141 阅读 · 0 评论 -
IntersectionObserver图片懒加载及用户体验优化
前提熟知的图片懒加载的方式是使用getBoundingClientRect函数判断是否在可视区域内,但是调用这个函数会引起回流,影响浏览器性能。可替代的方式是使用IntersectionObserver对象,使用方式参考IntersectionObserver API 使用教程——阮一峰关于回流,参考前端优化总结正题先看效果:模拟图片加载堵塞的情况,图片到达可视区域2s后才加载出图片,在图片加载出来之前鼠标移动到图片上时可显示图片描述文字上代码://html: <!-- 模原创 2022-03-24 22:30:10 · 576 阅读 · 0 评论 -
es6 Class语法
Class定义的属性和方法都定义在prototype上,除非显式(this)的定义在其本身Class定义的属性和方法都是不可枚举,可以通过Object.getOwnPropetyNames获得,而Object.keys不可Class不存在变量提升,与子类继承有关static定义的静态方法中的this指向类父类的static方法不能被实例继承,但可以被子类继承class中使用#表示私有属性和私有方法私有属性只要在定义该属性的class内部(包括子类),即使是static函数也可以通过类的实例读取.原创 2022-02-23 16:27:49 · 566 阅读 · 0 评论 -
js数组去重
function unique(arr){ let res=[] for(let i in arr){ if(res.indexOf(arr[i])===-1) res.push(arr[i]) } return res}function unique2(arr){ return Array.from(new Set(arr))}function unique3(arr){ return [...new Set(arr)]}原创 2022-02-13 11:38:58 · 360 阅读 · 0 评论 -
js多维数组展开为一维数组
function flatten(arr) { let res=[] for(let i in arr){ if(!Array.isArray(arr[i])) res.push(arr[i]) else{ res=res.concat(flatten(arr[i])) } } return res}function flatten2(arr){ return arr.reduce((pre,原创 2022-02-13 11:26:51 · 263 阅读 · 0 评论 -
理解js中this的指向
转载自彻底理解js中this的指向,不必硬背。转载 2022-02-12 20:59:18 · 87 阅读 · 0 评论 -
js将阿拉伯数字转换为大写中文金额
moneyToCaptital = (money: string) => { //将小数点前后划分开 const dots=money.split('.') const dotFor=dots[0] const dotBehind=dots[1] //小数点前一部分,先反转一下,如'123'变成‘321’ money = dotFor.split('').reverse().join('') const原创 2022-02-12 17:58:46 · 969 阅读 · 1 评论 -
js原型链和类的继承
1. 原型链原型链描述了实例对象和构造函数的关系,每个实例对象obj都包含一个__proto__属性,每个构造函数Class都有一个prototype原型对象,两者的关系是obj.__proto__===Class.prototype,而构造函数的原型和构造函数的关系是Class.prototype.constructor===Classinstanceof就是按照上图,从左侧的__proto__向上查找,从右侧的prototype向下查找判断是否指向同一个终点2. new操作符function原创 2022-02-11 10:38:47 · 489 阅读 · 0 评论 -
addEventListener第三个参数useCapture
参考博客addEventListener()中的第三个参数参考博客addEventListener()第三个参数useCapture (Boolean)详细解析总结:W3C标准中event触发的顺序:先捕获再冒泡 | | / \-----------------| |--| |-----------------| element1 | | | | || -------------| |--| |---------原创 2022-02-09 11:06:50 · 1051 阅读 · 0 评论 -
浏览器的各种宽高
宽高相关的属性(即带有Width/Height,如offsetHeight):client是不包括边缘(滚动轴)的宽高,offset包括边缘,scroll是包含所有滚动区域的整个正文文档的宽高参见博客距离相关的属性(即带有Top/Left,如offsetTop):offset是相对于父元素的距离参见博客...原创 2021-07-26 11:46:22 · 413 阅读 · 0 评论 -
视图封装
1. 视图封装模式有哪几种借用angular对三种视图模式的解释:ShadowDom 模式使用浏览器原生的 Shadow DOM 实现(参阅 MDN)来为组件的宿主元素附- 加一个 Shadow DOM。组件的视图被附加到这个 Shadow DOM 中,组件的样式也被包含在这个 Shadow DOM 中。(译注:不进不出,没有样式能进来,组件样式出不去。)Emulated 模式通过预处理(并改名)CSS 代码来模拟 Shadow DOM 的行为,以达到把 CSS 样式局限在组件视图中的目的。(原创 2021-04-02 16:47:28 · 314 阅读 · 0 评论 -
JavaScript之name和id
在HTML4和XHTML1标准化之前,为元素命名常使用name属性,现在则经常使用id。但是为了向后兼容,name还用来为一些元素命名,包括:<a> <applet> <button> <embed> <form> <frame> <iframe> <img> <input原创 2019-02-23 20:44:37 · 395 阅读 · 0 评论 -
随手记JavaScript——不一样的函数
参数变量不确定或者个数很多的函数,在定义函数时可以保留参数列表为空,在函数内部使用arguments数组来调用程序传递的参数。例如:function unsurep(){ var m="";for(var i=0;i<arguments.length;i++) m=m+arguments[i];alert(m);}//测试unsurep(123,"aaa",1);...原创 2019-02-19 18:15:17 · 149 阅读 · 0 评论 -
es6语法区——let、const和var
let、const声明的变量不可重复声明let、const不存在变量提升let、const会造成暂时性死区,即在声明前使用都会报错ReferenceErrortypeof一个没有使用let、const声明的变量为undefined,但是使用let、const声明变量前使用typeof报错ReferenceErrorconst声明的变量,如果是基本数据类型不可改变值,如果是引用数据类型,只是不可改变对象本身,但是可以改变引用对象的属性,如数组的push方法,改变对象的属性let、const声明的全.原创 2020-07-04 15:35:44 · 266 阅读 · 0 评论 -
JavaScript 函数的length
详细参见博客length 是函数对象的一个属性值,指该函数有多少个必须要传入的参数,即形参的个数,且仅包括第一个具有默认值之前的参数个数例如: console.log("function(a = 1, b, c)",(function(a = 1, b, c) {}).length); // 0 console.log("function(a, b = 1, c)",(function(b, a = 1, c) {}).length); // 1arguments.length 是函数被调转载 2020-06-17 17:28:46 · 1609 阅读 · 0 评论 -
JavaScript 原型链继承问题
一道问题: function A(x){this.x = x;}A.prototype.x = 1;function B(x){this.x = x;}B.prototype = new A();var a = new A(2), b = new B(3);delete b.x;问:a.x和b.x答案:2 undefined解释:首先寻找自身的属性,也就是通过this.x设置的属性,如果没有再寻找prototype上的属性子对象不能更改删除父对象的属性寻找父对象的属性也原创 2020-06-17 17:25:25 · 391 阅读 · 0 评论 -
JS中的 map, forEach 无法跳出循环, return和 break不起作用
转载自博客需要使用every和some跳出循环:some : 当内部return true时跳出整个循环every : 当内部return false时跳出整个循环(需要写 return true )转载 2020-06-17 16:51:27 · 1322 阅读 · 0 评论 -
JavaScript中的 +
转载自博客1、数+数 = 数2、数+null = 数3、数+其他数据类型 = string (强制转换成string 再相加)4、其他数据类型 + 其他数据类型 = string(强制转换成string 再相加)5、数+undefined=NaN6、数+布尔值,会将布尔值转为数字,false为0,true为1所以({}+{}).length=30的原因是:{}+{}="[Object Object][Object Object]"...转载 2020-06-17 16:07:05 · 203 阅读 · 0 评论 -
JavaScript string类型数据考题
var s = 'test';s.length = 4;var t = s.length ;console.log(t);输出undefined解释:s不是对象,所以没有length这个属性,但是它能使用length属性是因为这相当于使用了一个临时String对象,即new String(s).length,所以改变s.length是改变的这个临时对象的length,而这个临时对象在使用后就销毁了,所以没有起到什么作用,相当于下列代码:var tmp = new String(s);tmp原创 2020-06-17 15:59:49 · 262 阅读 · 0 评论 -
JavaScript中的几个阻止事件
来自牛客的一道练习题:假设DOM结构为:<div id="a"><div id="b"></div></div>JS代码为:document.getElementById('a').addEventListener('click', e => {console.log(1)});document.getElementById('b').addEventListener('click', e => {e.preventDefault();c原创 2020-06-17 15:42:18 · 399 阅读 · 0 评论 -
JavaScript对象类型
JavaScript有三种对象:内置对象:Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象宿主对象:执行JS脚本的环境提供的对象,如Window和Documen,Element,form,image等自定义对象:开发者自己定义的对象...原创 2020-06-17 15:34:31 · 240 阅读 · 0 评论 -
nodejs sequelize参考及问题
sequelize是什么ORM:把关系数据库的表结构映射到对象上sequelize是把对象映射到数据库中的表和数据中sequelize的用法从基础开始创建项目并使用:参考廖雪峰的网站node.js 使用 sequelize 操作数据库(可以不用创建koa项目,直接创建app.js文件,并在其中使用立即执行函数或者其他方式进行数据库操作)基本的操作函数基本的操作事务S...原创 2020-04-14 15:51:19 · 1207 阅读 · 0 评论 -
jquery动态生成瀑布流内容重叠问题
在写瀑布流的时候遇到了一个坑,我这个瀑布流的单个内容块是从后台获取的数据,因此需要动态创建元素,大概生成的动态元素是这样的:<div> <img src="url"/> <p>texttexttext...</p></div>因为其中含有动态生成的img,所以很容易出现问题:许多内容块折叠在一起,即使设置了margin也不能解...原创 2020-03-12 10:59:41 · 1074 阅读 · 0 评论 -
JavaScript中的逗号运算符
逗号运算符,它将先计算左边的参数,再计算右边的参数值。然后返回最右边参数的值。<script>var a = 10, b = 20;function CommaTest(){return a++, b++, 10;}var c = CommaTest();alert(a); // 返回11alert(b); // 返回21alert©; // 返回10</s...转载 2020-03-08 10:04:40 · 751 阅读 · 0 评论 -
express+ajax提交表单易错点
ajax提交表单后页面自动刷新看不到后台返回数据原因:form里面的button元素默认type=submit, 所以每次点击登录button后都会执行提交表单的操作,表单操作默认有刷新页面的功能解决:将所有元素外层的form标签去掉或者换成div,或者将button显示声明为type="button"并使用onclick属性定义表单提交函数如下:前端HTML代码: <form...原创 2020-03-07 16:31:46 · 234 阅读 · 0 评论 -
JSONP原理解析
什么是JSONP?先说说JSONP是怎么产生的:其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web...转载 2020-03-07 10:34:28 · 191 阅读 · 0 评论 -
XHTML基本事件以及处理器
本文转载自achenb博主的https://blog.youkuaiyun.com/achenb/article/details/46982459HTML 4.0 的新特性之一是使 HTML 事件触发浏览器中的行为,比方说当用户点击一个 HTML 元素时启动一段 JavaScript 。以下就是可被插入 HTML 标签以定义事件行为的一系列属性。窗口事件 (Window Events)仅在 ...转载 2019-02-23 10:52:02 · 149 阅读 · 0 评论 -
JavaScript鼠标事件之Event的附加信息
鼠标事件发生时Event对象的附加属性 属性 描述 altKey / ctrlKey / shiftKey /metaKey 表示某个键是否按下,是返回true,否则返回false button 表示哪个鼠标键被按下,0为左键,1为中键,2为右键 clientX / clientY / screenX / screenY 鼠标点击时在浏...原创 2019-02-23 11:27:53 · 246 阅读 · 0 评论 -
JavaScript之事件(一)
首先明确概念:事件是页面通过脚本相应的动作,事件处理器用于触发事件。触发事件的方式:直接使用事件处理器,如<button onclick="myFun()"> 将对象与事件处理器绑定,即在<script>标签中使用document.id.onclick=myFun() 使用IE浏览器的绑定处理器至对象,即利用id.attachEvent("onclick",f...原创 2019-02-23 11:51:08 · 155 阅读 · 0 评论 -
JavaScript的document的属性和方法
本文转载自https://www.cnblogs.com/yansheng/archive/2010/01/25/1656014.html看到一篇比较全的关于document的属性和方法的文章,特地将链接放在这里以供学习 document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor ...转载 2019-02-23 14:50:52 · 540 阅读 · 0 评论 -
JavaScript之对象(一)
对象的创建一——构造函数自定义对象:function Create(name,age){this. name=name; this. age=age;}实例:var stu=new Create("lil",15);创建实例之后可以给对象加入新属性:stu.class=1; 对象的创建而——直接创建利用Object内部对象: var obj=new Object();...原创 2019-02-19 19:46:10 · 166 阅读 · 0 评论 -
javaScript之DOM(document object model)节点
DOM节点属性 属性 描述 nodeName 节点名称 nodeValue 节点值,通常只用于文本节点 nodeType 节点类型的数字,数字值如下表 parentNode 双亲节点 childNodes 子节点列表 firstChild、lastChild 第一个、最后一个子节点 previousSibling、ne...原创 2019-02-25 19:36:15 · 314 阅读 · 0 评论 -
JavaScript随手记之insertBefore
最初学习用insertBefore(new,old)函数操作DOM节点时总是没有作用,后来才发现原来使用insertBefore的对象必须是当前节点的parentNode,比如以下HTML:<div id="parent"> <div id="child">text</div></div>如果要在id为child的元素(curno...原创 2019-03-04 19:05:52 · 404 阅读 · 0 评论 -
JavaScript获取文件扩展名
获取文件扩展名的两种方法:substring,lastIndexOf联合使用 split,pop联合使用下面贴上代码://获取文件后缀的js代码<script type="text/javascript"> var strp; function getEx(){ var filepath=document.getElementById('fileEx').va...原创 2019-03-11 21:04:14 · 1520 阅读 · 0 评论 -
JavaScript之对象(二)
js内部具体对象及其成员: String对象:需要创建实例来调用其属性和方法。也可以在用引号括起来的字符串后直接加上" . "来调用String的属性方法。 属性:length;方法:anchor,big,在字符串两边加上相应的HTML标签对;bold,fontcolor,将字符串转换为HTML代码;charAt返回指定字符的位置;indexOf返回某字符串在对象中第一次出现的位...原创 2019-02-22 18:43:12 · 159 阅读 · 0 评论