JS
more名奇妙
青山不改,绿水长流。
展开
-
js延迟加载的六种方式
把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行JavaScript的代码所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度3.上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。原创 2022-12-28 16:07:12 · 7636 阅读 · 2 评论 -
跨域时发送post请求 出现了两次请求
服务端在接收到预检请求后,根据资源权限配置,在response-header头部加入access-control-allow-headers(允许跨域请求的请求头)、access-control-allow-methods(允许跨域请求的请求方式)、access-control-allow-origin(允许跨域请求的域)。总结:只要是带自定义header的跨域请求,在发送真实请求前都会先发送OPTIONS请求,浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。原创 2022-12-28 14:53:45 · 1272 阅读 · 0 评论 -
前端性能优化
等到B运行结束,将结果返回到A,B的调用帧才会消失。它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点,即插入的是括号里的节点。注意,只有不再用到外层函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧,否则就无法进行“尾调用优化”。尾调用由于是函数的最后一步操作,所有不需要保留外层函数的调用帧,因为调用位置、内部变量等信息都不会再用到了,只要直接用内层函数的调用帧,取代外层函数的调用帧就可以了。原创 2022-12-28 11:56:51 · 180 阅读 · 0 评论 -
cursor:hand和cursor:pointer的区别(vue前端鼠标悬浮变小手)
cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手形。向上右改变大小(North East) cursor: ne-resize;向上左改变大小(North West) cursor: nw-resize;向下右改变大小(South East) cursor: se-resize;向下左改变大小(South West) cursor: sw-resize;向上改变大小(North) cursor: n-resize;原创 2022-12-13 14:42:35 · 1516 阅读 · 0 评论 -
只能输入数字的正则表达式
1)整数正数:/^[1-9][0-9]*$/非负数:/^[0-9]*$/负数:/^-[1-9][0-9]*$/非正数:/^-[0-9]*$/所有整数:/^(-)?[0-9]*$/2)小数正数:/^[0-9][.][0-9]{1,}$/负数:/^-[0-9][.][0-9]{1,}$/3)整数和小数非负数:/^[0-9]+([.][0-9]{1,})?$/ 非正数:/^-[0-9]+([.][0-9]{1,})?$/ 所有数字:/^(-)?[0-9]+([.][0-9]{1,})?原创 2022-12-08 10:00:25 · 5267 阅读 · 0 评论 -
数组合并8种方法
1.ES6 解构[...arr, ...array]不改原数组值,生成新的数组。 2.遍历添加array.forEach(item => { arr.push(item)})遍历方法:forEach、map、filter、every、for、for in、for of等。添加方法:push(后追加)、unshift(前追加)等。arr值改变成追加后的样子,array值不改变3.concatarr.concat(array)不改原数组值,生成新的数组。 4.join原创 2022-12-07 17:23:28 · 3725 阅读 · 1 评论 -
js实现数组扁平化
ES6 中的 flat。原创 2022-10-26 22:17:53 · 67 阅读 · 0 评论 -
js隐式类型转换
在js中,当运算符在运算时,如果两边数据不统一,CPU 就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换,转成一样的数据类型再计算这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换例如1 > "0"这行代码在js中并不会报错,编译器在运算符时会先把右边的 "0" 转成数字 0 然后在比较大小。原创 2022-10-26 21:29:44 · 120 阅读 · 0 评论 -
null与undefined的区别是什么
JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。目前,null和undefined基本是同义的,只有一些细微的差别。undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。(3)对象没有赋值的属性,该属性的值为undefined。(1) 作为函数的参数,表示该函数的参数不是对象。(2) 作为对象原型链的终点。原创 2022-10-19 14:16:50 · 141 阅读 · 0 评论 -
require 和 import 的区别
我们在 node 中使用 babel 支持ES6(在 node 当中,比如 node.js 代码,也不能直接使用 import 来导入,必须使用 babel 支持才能使用 import 语法),实际上也是将 ES6 转码为 ES5 再执行,import 语法实际上会被转码为 require。但是在 node 模块中,使用module.exports导出接口,使用 require 引入模块。,在引入模块时使用 import 仍然起效,因为本质上,import 会被转码为 require 去执行。原创 2022-10-19 14:10:34 · 304 阅读 · 0 评论 -
JS中的this指向
普通函数:关于this,谁调用就指向谁,没有调用者,就指向全局对象window。箭头函数:箭头函数的this指向于函数作用域所用的对象。原创 2022-10-13 16:23:19 · 65 阅读 · 0 评论 -
js 深拷贝正则和Date
【代码】js 深拷贝正则和Date。原创 2022-10-12 15:40:49 · 177 阅读 · 0 评论 -
数组方法总结、vue组件通讯(父子,隔代,兄弟)、 如何封装组件、 axios 与ajax比较、对async await理解、 对媒体查询的理解、null和undefined区别
d)遇到复杂html时候 一套无法满足时 隐藏html显示htmlaxios 比 ajax对async await理解。原创 2022-10-08 16:37:43 · 93 阅读 · 0 评论 -
宏任务和微任务 常见的微任务和宏任务 事件循环机制 同步异步
● 异步指的是当一个进程在执行某个请求时,如果这个请求需要等待一段时间才能返回,这个时候进程会继续往下执行,不会阻塞等待消息的返回,当消息返回时系统再通知进程进行处理。● 同步指的是当一个进程在执行某个请求时,如果这个请求需要等待一段时间才能返回,那么这个进程会一直等待下去,直到消息返回为止再继续向下执行。当一个宏任务队列中的任务全部执行完后,会查看是否有微任务队列,如果有就会优先执行微任务队列中的所有任务,如果没有就查看是否有宏任务队列。宏任务是由宿主发起的,而微任务由JavaScript自身发起。原创 2022-10-08 16:03:34 · 496 阅读 · 0 评论 -
如何减少重绘和重排
浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。3、当dom元素position属性为fixed或者absolute, 可以通过css形变触发动画效果,此时是不会出发reflow的。2、尽量减少table使用,table属性变化使用会直接导致布局重排或者重绘。4、不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。原创 2022-09-27 19:55:52 · 1811 阅读 · 0 评论 -
实现移动端适配或者和响应式布局
本身设置html字体大小100px(1rem=100px),相对于设计图375px,计算出rem(比如某个元素,设计稿设计宽度为 640px, 我们需要在css中设置 width: 6.4rem,又比如某个元素,设计稿设计字体大小是 16px, 我们需要在css中设置 font-size:0.16rem,从而达到rem适配。设计图是375px,根据设计图和1rem = 375px写出页面 200/375算出比例,因为rem是动态获取的,乘以rem就是相对于当前屏幕大小设置的大小。原创 2022-09-24 21:52:38 · 1291 阅读 · 0 评论 -
JS 面向对象编程(工厂模式实现、构造函数模式实现、原型模式实现、组合构造函数及原型模式实现)
目前最为常用的定义类型方式,是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方方法的引用,最大限度的节约内存。此外,组合模式还支持向构造函数传递参数,可谓是集两家之所长。...原创 2022-08-23 11:50:19 · 225 阅读 · 0 评论 -
JS call/apply/bind 简单的用法和区别
有这样一个构造函数想给下面的person添加两个属性,使用构造函数生成,应该如何去做呢这就需要用到改变this指向的方法了。原创 2022-08-23 15:28:10 · 122 阅读 · 0 评论 -
自己使用ES6 class类,手写一个Promise类,实现原型方法then/catch/finally,实现静态方法resolve/reject/all/race。
好了本篇文章就到这里了,喜欢的话可以关注我,会持续更新的,有错误欢迎大家指出,大家可以在我这里互相讨论学习,一起进步。青山不改 绿水长流 我们下篇文章见😋。原创 2022-08-28 23:52:48 · 205 阅读 · 0 评论 -
Cookie、Session、Token
由于HTTP协议是一种无状态的协议,为了让服务端能够辨认客户端的身份,在客户端第一次请求服务器的时候,服务器还可以根据需要来修改Cookie的内容。这就是Cookie的工作原理。查看网站颁发的Cookie可以通过javascript:alert (document. cookie)。原创 2022-09-24 10:10:52 · 413 阅读 · 1 评论 -
javascript中的typeof返回值类型
比如:typeof(eval),typeof(Date)返回的值都是function。一、对于数字类型的操作数而言, typeof 返回的值是 number。比如typeof(window),typeof(document),typeof(null)返回的值都是object。三、对于布尔类型, typeof 返回的值是 boolean。上面是举的常规数字,对于非常规的数字类型而言,其结果返回的也是number。JavaScript中代表的是特殊非数字值,虽然它本身是一个数字类型。原创 2022-09-24 09:47:25 · 6039 阅读 · 0 评论 -
cookie/localStorage /sessionStorage的区别
webStorage是HTML5引入的一个重要的功能,在前端开发的过程中会经常用到,它可以在客户端本地存储数据,类似cookie,但其功能却比cookie强大的多。cookie的大小只有4Kb左右(浏览器不同,大小也不同),而webStorage的大小有5MB。sessionStorage也有length属性,其基本的判断和使用方法和localStorage的使用是一致的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据,使用的方法如上所示。原创 2022-09-23 19:49:37 · 188 阅读 · 0 评论 -
Event loop 宏任务微任务 详解
Event Loop是一个程序结构,用于等待和发送消息和事件。简单说,就是在程序中设置两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为"消息线程")。官方解释:JavaScript主线程从"任务队列"中读取异步任务的回调函数,放到执行栈中依次执行。这个过程是循环不断的,所以整个的这种机制又称为EventLoop(事件循环)我们都知道 js是单线程的原因:。作为浏览器脚本语言,原创 2022-09-23 19:46:23 · 563 阅读 · 0 评论 -
JS中转为number类型的方法 parseInt()使用规则
4.非数字字符 true false null undefined 对象 数组一律NaN。2.从第一个字符开始检索,忽略空格,如果第一个字符是数字,继续检索第二个。1.parseint() 空字符NaN (将其他类型转化为整数)3.遇到非数字字符停止检索,返回检索结果。5.二 八 十六进制转化为十进制输出。原创 2022-09-21 23:27:37 · 155 阅读 · 0 评论 -
web workers
早期计算机浏览器是单核的,随着时代的发展计算机演变成了多核,这样如果还是使用单线程就会导致一些资源的浪费,所以HTML5的规范中提供了一个多线程的解决方案,这就是WEB-WORKER。浏览器支持一般会在使用前增加前置校验,检测当前浏览器版本是否支持postMessage():向html页面传递数据。terminate():中止web workers,并释放浏览器/计算器资源。事件onmessage:监听通过postMessage方法发送过来的数据变化。原创 2022-09-22 16:14:54 · 546 阅读 · 0 评论 -
如何 将扁平数组转为树形数组 将树形数组拉平为偏平数组
将以上扁平数组转为树形数组 将树形数组拉平为扁平数组。原创 2022-09-22 14:19:00 · 106 阅读 · 0 评论 -
js如何给ul的所有的li绑定事件,打印他们的索引
console.log(this.innerHTML+",索引是"+ n) }itemli[i].index=i;//给每个li定义一个index属性。(function(n){ //利用闭包,原创 2022-09-22 08:52:59 · 939 阅读 · 0 评论 -
JS不同数据类型转Number 转为?
2.如果无法从valueOf()方法中获取Primitive值,那么调用object的toString()方法;如果toString()返回的是Primitive值,则将该Primitive值转换成number后返回。1.调用object的valueOf()方法,如果得到的是Primitive值,则将该Primitive值转换成number后返回。2、String转Number:数字字符串转成对应数字,空字符串转为0,其他均为NaN;3、Boolean转Number:true为1,false为0;原创 2022-09-21 23:19:58 · 226 阅读 · 0 评论 -
forEach的使用 使用forEach循环改变原数组的值
而Object对象的真正的数据是保存在堆内存,栈内只保存了对象的变量以及对应的堆的地址,所以操作Object其实就是直接操作了原数组对象本身。基本类型我们当次循环拿到的element,只是forEach给我们在另一个地方复制创建新元素,是和原数组这个元素没有联系的,所以不直接去改变element。好了本篇文章就到这里了,喜欢的话可以关注我,会持续更新的,有错误欢迎大家指出,大家可以在我这里互相讨论学习,一起进步。或者修改callbackFn的第三个参数,原理是一样的。青山不改 绿水长流 我们下篇文章见😋。原创 2022-09-11 12:25:51 · 3958 阅读 · 0 评论