![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 71
牛牪犇0
这个作者很懒,什么都没留下…
展开
-
深入理解JavaScript模块化开发
随着JavaScript应用程序的复杂性不断增加,模块化开发成为了一种必备的技术。通过将代码划分为模块,我们可以提高代码的可维护性、可重用性和可扩展性。在本文中,我们将深入探讨JavaScript模块化开发的概念、优势和不同的模块化方案。原创 2023-06-12 10:24:20 · 2828 阅读 · 0 评论 -
日常问题----如和解决跨域
跨域不是问题,是一种安全机制。同源策略是浏览器一个重要的安全策略,一个url由三部分组成:协议,域名(ip地址),端口。所谓的同源就是指两个域有相同的协议(protocol)、域名(host)、端口(port),这三者之间任何一个不同都会构成跨域的情况,比如说前后端分离之后,前后都在两个域之下,前端的浏览器请求后端服务器的数据的时候就需要做跨域处理。可能有些人有点疑问,非得同源吗?(勿喷)无法读取非同源网页的 Cooike、LocalStorage、IndexedDB无法接触非同源网页的DOM。原创 2023-05-10 10:57:24 · 2044 阅读 · 0 评论 -
JavaScript的三座大山
作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性。换句话说,作用域决定了代码区块中变量和其他资源的可见性。原创 2023-04-19 11:34:22 · 2543 阅读 · 0 评论 -
前端性能优化的方向
目前大概整理为三个大方向:底层代码层面的书写优化、中层项目结构的优化,上层项目部署的优化。原创 2023-03-28 17:19:03 · 1515 阅读 · 0 评论 -
性能优化之-缓存篇
什么是缓存?在哪可以看到?为什么要做?本文简单说下,当做笔记在前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。缓存技术一直一来在WEB技术体系中扮演非常重要角色,是快速且有效地提升性能的手段。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。原创 2023-04-03 16:43:50 · 1546 阅读 · 0 评论 -
性能优化之-事件代理
那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。原创 2023-03-30 10:49:55 · 5768 阅读 · 6 评论 -
控制台输出FPS(帧率)
获取FPS原创 2022-11-21 11:23:46 · 522 阅读 · 0 评论 -
超详细的require、import、export讲解
超详细的require、import、export讲解JS 中的require 和 import 区别在研究react和webpack的时候,经常看到在js文件中出现require,还有import,这两个都是为了JS模块化编程使用。CSS的是@import1.ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。复制代码复制代码// CommonJS模块l转载 2021-11-08 11:03:21 · 414 阅读 · 0 评论 -
汇总onchange、onpropetrychange、和oninput事件的区别
1、 onchange事件与 onpropertychange 事件的区别:onchange事件在内容改变(两次内容有可能还是相同的)且失去焦点时触发。onpropertychange事件却是实时触发,即每增加一个字符或者减少一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有的。2、oninput 事件与onpropertychange 事件的区别:oninput事件是IE之外的大多浏览器支持的事件,在value改变时触发,实时的,即每增加一个或者删除一个字符就会触发,然原创 2021-10-13 14:59:24 · 296 阅读 · 0 评论 -
call()、 apply()、 bind() 方法的作用、使用详解以及手写实现它
我们先举一些简单的例子:例1:var name = "阿牛",age = '18';var obj = { name: "臭宝", objAge: this.age, fun: function(){ condole.log(this.name,this.age); }}// 输出“臭宝” undefined例2var faq = "牛牛牛";fun: function(){ console.log(this.faq);}// 输出fun() // “牛牛牛原创 2021-08-18 17:57:22 · 297 阅读 · 0 评论 -
Math.min() / Math.max() 使用方法
首先弄懂apply 和 call 都是js函数自带的方法。区别如下:apply和call的用法只有一个地方不一样,除此之外,其他地方基本一模一样a.call(b,arg1,arg2…)apply(b,[arg1,arg2]) //apply只有2个参数,它将call的参数(arg1,arg2…)放在一个数组中作为apply的第二参数有时需要直接拿一个数组中的最大值最小值:就可以拿如下的操作:Math.min.apply(null, [1, 2, 3]) 等价于 Math.min(1,原创 2021-07-30 15:22:53 · 1250 阅读 · 0 评论 -
页面嵌套iframe(window.postMessage()实现跨域通信)
项目中的需求 需要外接一个iframe与主页面之间需要通信 的情况在iframe 中:在主页面中:window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制,只要正确的使用,这种原创 2021-06-18 15:12:35 · 4499 阅读 · 0 评论 -
定时器(setTimeout()和setInterval())的清除问题
方法一:在每次重新设置定时器之前清除掉方法二:在销毁的钩子函数里销毁,防止污染都是clearInterval(定时器返回的值,即timer)settimeout与setinterval清除时使用方式一致,即clearsetTimeout()、clearInterval()...原创 2021-05-11 19:11:49 · 7037 阅读 · 0 评论 -
死磕 36 个 JS 手写题(搞懂后,提升真的大)
死磕 36 个 JS 手写题(搞懂后,提升真的大)为什么要写这类文章作为一个程序员,代码能力毋庸置疑是非常非常重要的,就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要,那我们就必须掌握它,所以文章标题用了死磕,一点也不过分,也希望不被认为是标题党。作为一个普通前端,我是真的写不出 Promise A+ 规范,但是没关系,我们可以站在巨人的肩膀上,要相信我们现在要走的路,前人都走过,所以可以找找现在社区已经存在的那些优秀的文章,比如工业聚大佬写的 100 行代原创 2021-04-28 15:32:48 · 2866 阅读 · 0 评论 -
事件代理(事件委托)
- 基本概念事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown…)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个通俗的例子比如一个宿舍的同学同时快递到了,一种方法就是他们一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一 一分发给每个宿舍同学;在这里,取快递就是一个事转载 2021-04-27 15:32:28 · 727 阅读 · 0 评论 -
JavaScript当中map()和forEach()的区别(前端面试题)
如果你已经有使用JavaScript的经验,你可能已经知道这两个看似相同的法:Array.prototype.map()和Array.prototype.forEach()。那么,它们到底有什么区别呢?定义我们首先来看一看MDN上对Map和ForEach的定义:forEach(): 针对每一个元素执行提供的函数(executes a provided function once for each array element)。map(): 创建一个新的数组,其中每一个元素由调用数组中的每一个原创 2020-10-21 19:56:02 · 834 阅读 · 0 评论 -
js数组常用api(前端面试题)
静态方法:Array.of(…args): 使用指定的数组项创建一个新数组Array.from(arg): 通过给定的类数组 或 可迭代对象 创建一个新的数组。const arr = Array.of(5);//值为5,length为1const arr1 = new Array(10);//length为10的空数组console.log(arr);console.log(arr1);其他api按具体作用分为:一、添加1、push() 方法将一个或多个元素添加到数组的末尾,并返回数原创 2020-10-21 18:37:23 · 796 阅读 · 0 评论 -
JavaScript之对象序列化详解
简单来说就是将对象的状态转换为一个字符串,方便以后存储和传输。JSON的全称是”JavaScript Object Notation“——JavaScript对象表示法。ECMAScript 5中提供了内置函数JSON.stringify()和JSON.parse()用来序列化和还原JavaScript对象。JSON的语法是JavaScript语法的子集,它并不能表示JavaScript中的所有值,对于JSON语法不支持的属性,序列化后会将其省略。其详细规则如下:①对于JavaScript中的五种原始原创 2020-08-12 14:36:05 · 474 阅读 · 0 评论 -
substr()、substring()、slice()、splice()、split()的区别与作用
substr(start ,length)用来截取字符串,substr() 的参数指定的是子串的开始位置和长度,返回值是一个新字符串,原字符串没有发生改变,因此它可以替代 substring() 和 slice() 来使用。substring(start,stop)用来截取字符串,start和stop分别为开始和结束的位置,返回值为字符串,其包括start位置的元素但不包括stop位置的元素。slice(start,end)该方法是对对数组进行部分截取,该方法返回一个新数组,参数start是截取的原创 2020-09-06 23:26:55 · 409 阅读 · 0 评论