![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
文章平均质量分 75
js知识
song854601134
这个作者很懒,什么都没留下…
展开
-
多个文件 import 的相同模块里的对象
在不同的文件中 import一个vue对象,在任何情况下,所有的文件是否得到的都为同一个对象,也就是单例的?这样,在下次加载的时候,就不会再执行你的JS,而是直接返回Module Cache中的代码,而非再执行一遍你的代码。在学习vue中,想到这个问题,因为没有es6,webpack等基础就直接学,有些疑惑,在网上搜索了一下。第一次加载的时候,会执行你的代码,并且获取该Module Export的内容。无论是NodeJS和Webpack,默认的资源Index都是文件的绝对路径。原创 2024-05-08 12:13:39 · 431 阅读 · 0 评论 -
js正则中的match()
我们把这个现象理解为,只要使用了全局匹配模式,那么match()将只返回“贪婪”的匹配结果,这里的“贪婪”指的就是只招那个最长的能匹配上的字符串,至于分组项,就忽略了。再强调一次,这个例子的结果是没有使用全局匹配的正则表达式的匹配结果。第4项:length,表示匹配到的结果个数,由于这里不使用全局匹配,只找到首次匹配项就结束了,所以匹配结果只有1个,length也就是1。结果说明了一切,当正则中使用全局匹配符g,即使有分组的存在,在匹配结果中也只有匹配到的最长的,那些分组的子匹配都不见了。原创 2023-06-02 14:49:43 · 5730 阅读 · 0 评论 -
import()动态导入
不过需要注意的是,动态导入功能并不适用于所有的应用场景。如果我们要加载的模块较少,或者是不具备时序性,那么使用动态导入就不是一个非常必要的选择。原创 2023-05-12 16:47:09 · 4174 阅读 · 0 评论 -
console.log浏览器打印问题
javascript的异步代码会被添加到任务队列中(宏/微),当我们修改值的代码写在一个异步函数内,console.log不会等待你的异步函数执行完成,它是优先执行的,然后输出空,然后你的异步函数又修改了obj的内存地址中的a,但是console.log已经执行完成了,不会重复执行,所以你看到的还是一个{}对象,但是当我们点击展开的时候,浏览器又会根据Obj的内存地址去找到他的值,最后打印,但是这个时候,你的obj中的a已经被修改为了3,所以会打印3。原创 2023-04-23 17:29:46 · 345 阅读 · 0 评论 -
常用dom操作及知识点
【代码】常用dom操作及知识点。原创 2023-04-23 17:14:22 · 83 阅读 · 0 评论 -
防抖与节流函数
【代码】防抖与节流函数。原创 2023-04-21 10:54:56 · 59 阅读 · 0 评论 -
base64压缩/canvas.toDataURL
在指定图片格式为 image/jpeg 或 image/webp 的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。“jpg和jpeg没有区别,是缩写的程度不同。jpeg文件扩展名应该为.jpeg,dos 时代的8.3文件规定扩展名不能超过3个字符,就使用了.jpg。如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型是不支持的。, 支持的是"image/jepg",encoderOptions 可选。原创 2023-01-11 15:13:42 · 2425 阅读 · 0 评论 -
跨域/解决跨域方法
首先编写一个过滤器,可以起名字为MyCorsFilter.java} }.} }.} }.} }.} }.} }.} }.} }.} }.} }.} }.原创 2022-12-19 17:39:26 · 4186 阅读 · 0 评论 -
js 知识点
slice与substring同为截取字符串的一部分,也同样有两个参数。2、substring:除了两个参数会比较大小调换位置外,还满足小于0时按0处理的规则;slice:则不会有这样的规则,只遵循大于0,从前面计数,小于0,从后面计数的原则。,通俗的讲就是小的一个数会作为起始 位置参数,大的一个数会作为结束位置参数;slice:则是根据大于0和小于0来判断计数的前后顺序。1、substring:两个参数会。原创 2022-09-29 15:00:38 · 1196 阅读 · 0 评论 -
forEach同/异步问题
之前遇到过一些人跟我说,forEeach 是异步的~不能放异步代码进去执行~我当时其实挺迷惑的,好像当初学习 javascript 的时候不是这样的<script> const arr = [1, 2, 3, 4] console.log('start') arr.forEach(item => { console.log(item) }) console.log('end')</script>请不要在说 f.原创 2022-05-11 12:47:17 · 8294 阅读 · 0 评论 -
(node中)module.exports 和exports的区别
exports 对象是 module 对象的一个属性,在初始时 module.exports 和 exports 指向同一块内存区域模块导出的是 module.exports , exports 只是对它的引用,在不改变exports 内存的情况下,修改exports 的值可以改变 module.exports 的值导出时尽量使用 module.exports 。我们向外暴露时,是以 module.exports 为标准的原创 2022-12-14 11:05:47 · 469 阅读 · 0 评论 -
Object.defineProperty()
文章目录Object.defineProperty()语法参数返回值描述描述符默认值汇总描述符可拥有的键值描述符可拥有的键值示例创建属性修改属性Writable 属性Enumerable 属性Configurable 属性添加多个属性和默认值[自定义 Setters 和 Getters](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty#自定义_sett原创 2022-04-26 20:22:05 · 107 阅读 · 0 评论 -
浏览器的解析渲染原理以及JS、CSS阻塞问题分析
浏览器的解析渲染原理以及JS、CSS阻塞问题分析输入Url地址按下回车发生了什么?1:根据网址进行DNS解析,将相应的域名解析为IP地址2:客户端根据IP地址去寻找对应的服务器并进行TCP三次握手,建立TCP连接3:客户端发起HTTP请求,请求对应资源4:服务器响应并返回相应数据(如:HTML文件)5:浏览器将获取的HTML文档由HTML解析器解析成DOM树6:同时由CSS解析器将CSS样式解析成CSS Rule Tree(CSS规则树)7:将生成的DOM树和CSS规则树合并生成Render原创 2022-03-23 09:00:54 · 1509 阅读 · 0 评论 -
理解浏览器的历史记录
理解浏览器的历史记录这是一篇基础文章,讲述一些浏览器里面历史记录栈管理的相关内容。写这个的起因,源于我最近想研究pushState,看看用它来实现SPA会遇到哪些问题,而pushState最终影响的就是浏览器历史记录栈里面的内容,所以就花了点时间琢磨了一下浏览器是如何管理历史记录栈的。因为在研究的过程中,发现了一些曾经不曾注意到一些要点,所以就记录下来了。demo地址:http://liuyunzhuge.github.io/blog/history/demo1.html这个demo用于进行本文后面内原创 2022-03-18 14:28:01 · 1325 阅读 · 0 评论 -
深浅拷贝之深拷贝
function getType(data) { // t:Object Array Null Undefined Date RegExp Function Number Boolean String const t = Object.prototype.toString.call(data) return t.slice(8, -1)}// 深拷贝// [1,2,3,[1,2,3]]// {a:1,b:2,c:3,{x:1}}// 特殊处理:RegExp/时间格式/构原创 2022-01-26 21:51:35 · 166 阅读 · 0 评论 -
hash和history区别&前端路由和后端路由比较
文章目录后端路由简介前端路由1. hash 模式2. history 模式项目中的场景两种模式各自的特点hashhistory存在一个问题总结后端路由简介路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样http://www.xxx.com/login大致流程可以看成这样:浏览器发出请求服务器监听到80端口(或443)有请求过来,并解析url路径根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等)浏览器根据数据包的 Cont原创 2022-03-18 14:02:10 · 782 阅读 · 0 评论 -
将JavaScriptNodeList转换为Array
将JavaScriptNodeList转换为Array的最快方法?//nl is a NodeListvar arr = Array.prototype.slice.call(nl);但是这个方法的执行效率非常缓慢:var arr = [];for(var i = 0, n; n = nl[i]; ++i) arr.push(n);//nl is a NodeListvar l = []; // Will hold the array of Node'sfor(var i = 0, ll原创 2022-03-16 15:53:43 · 443 阅读 · 0 评论 -
h5移动端新增事件
为什么touch事件中要阻止浏览器的默认行为那肯定是在能支持触屏的设备上运行,比如手机,手机上你滑动的时候他本身就有个默认的滚屏,因此如果你要操作操作你个dom元素,用touchmove事件,这其实也是滑动。原本你的效果是要在dom上滑动然后产生相应的效果,这个时候你肯定不希望手机上的浏览器屏幕滚动,所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验。touchmove 默认会有滚动效果吗!??移动端,同一页面不同层的划动操作会造成相互影响,需要额外处理如:页面层和弹出层(如picke原创 2022-03-31 10:43:35 · 1922 阅读 · 0 评论 -
一次性让你懂async/await
文章目录一次性让你懂async/await,解决回调地狱什么是async?怎么用await是什么?更新后话一次性让你懂async/await,解决回调地狱什么是async?欢迎留言讨论async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示,在函数内部使用 await 来表示异步。相较于 Generator,async 函数的改进在于下面四点:内置执行器。Generator 函数的执行必须依靠执行器,而 async 函数自带执行器,调用方式跟普通函数的调用一样更好原创 2022-05-11 15:49:58 · 5471 阅读 · 0 评论 -
一次性搞懂JavaScript 执行机制
看了很多js执行机制的文章似乎都是似懂非懂,到技术面问的时候,理不清思绪。总结了众多文章的例子和精华,希望能帮到你们JavaScript 怎么执行的?执行机制——事件循环(Event Loop)通常所说的JavaScript Engine(JS引擎)负责执行一个个 chunk (可以理解为事件块)的程序,每个 chunk 通常是以 function 为单位,一个 chunk 执行完成后,才会执行下一个 chunk。下一个 chunk 是什么呢?取决于当前 Event Loop Queue (事件循环队原创 2021-12-16 20:34:39 · 816 阅读 · 0 评论 -
JavaScript运行机制
文章目录前言栈(后进先出)队列(先进先出)宏观任务(Task,或者叫MacroTask)微观任务(MicroTask)浏览器中的事件循环(Event Loop)测试:宏任务微任务执行顺序测试:setTimeout第二个参数是最小延迟时间测试:宏任务在微任务之前完成测试:宏任务包含微任务总结前言本文要讲的是,浏览器读一个script代码的流程是什么,遇到异步代码会如何处理,宏观任务和微观任务如何处理。开始前先来看几个概念。栈(后进先出)首先要说一个栈模型,函数的调用形成了栈帧。function f原创 2021-12-16 20:26:48 · 1663 阅读 · 0 评论 -
这一次,彻底弄懂 JavaScript 执行机制
文章目录1.关于javascript2.javascript事件循环3.又爱又恨的setTimeout4.又恨又爱的setInterval5.Promise与process.nextTick(callback)6.写在最后(1)js的异步(2)事件循环Event Loop(3)javascript的执行和运行(4)setImmediate(5)最后的最后本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。不论你是javascript新手还是老鸟,不论是面试求职,还原创 2021-12-16 20:24:57 · 144 阅读 · 0 评论 -
我从来不理解JavaScript闭包,直到有人这样向我解释它
大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。正如标题所述,JavaScript闭包对我来说一直有点神秘,看过很多闭包的文章,在工作使用过闭包,有时甚至在项目中使用闭包,但我确实是这是在使用闭包的知识。最近看到的一些文章,终于,有人用于一种让我明白方式对闭包进行了解释,我将在本文中尝试使用这种方法来解释闭包。准备在理解闭包之前,有个重要的概念需要先了解一下,就是 js 执行上下文。这篇文章是执行上下文 很不错的入门教程,文章中提到:当代码在JavaScript中运行时,执行原创 2021-12-26 22:13:34 · 130 阅读 · 0 评论 -
js中this指向
this的指向问题1.在函数中直接使用thisfunction a(){ this.name='jetre'; console.log(this.name) } a() a.call(window,) console.log(window)普通函数(在全局作用域中定义的)的this指向全局对象window,因为a(),是一个语法糖,实际是a.call(window)所以name属性添加到了window对象上.2.对象中的this(谁调用我,我就指向谁)//普原创 2021-11-20 14:07:44 · 475 阅读 · 0 评论 -
_proto_和protype原型
有一个概念要清楚,只有构造函数才有.prototype的属性,对象是没有这个属性的,proto 只是浏览器提供的非标准化的访问对象的构造函数的原型对象的一种方式,其实更标准的是这样 Object.getPrototypeOf( a ) 获取 a 对象的原型对象,因为对象是没有.prototype的,实际上获取的是 a.proto.prototype...原创 2021-05-30 13:50:40 · 1489 阅读 · 0 评论 -
理解 JavaScript 的 async/await
理解 JavaScript 的 async/awaitJavaScript 中的 async/await 是 AsyncFunction 特性 中的关键字。目前为止,除了 IE 之外,常用浏览器和 Node (v7.6+) 都已经支持该特性。具体支持情况可以在 这里 查看。我第一次看到 async/await 这组关键字并不是在 JavaScript 语言里,而是在 C# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用,因此我还很悲伤转载 2021-11-12 14:08:09 · 166 阅读 · 0 评论 -
await后语句与then回调里执行先后问题
文章目录关于 async 函数的理解(async与promise的转换)前言开始进坑开始爬坑回到最初总结关于 async 函数的理解(async与promise的转换)前言写这一篇文章的目的在于看到这篇文章觉得挺有意思,所以写下这个已表看法。 这个是原文开始进坑所谓的争论起源于一道面试题async function async1() { console.log('async1 start') await async2() console.log('async1 end')}原创 2022-05-11 22:00:57 · 1725 阅读 · 2 评论 -
Promise深入 + 自定义Promise
Promise深入 + 自定义Promise1. 准备1.1. 函数对象与实例对象1. 函数对象: 将函数作为对象使用时, 简称为函数对象2. 实例对象: new 函数产生的对象, 简称为对象1.2. 回调函数的分类1. 同步回调: 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise的excutor函数2. 异步回调: 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / a原创 2021-11-18 23:18:24 · 145 阅读 · 0 评论 -
window和document的区别
[window对象]它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口。属性:defaultStatus 缺省的状态条消息document 当前显示的文档(该属性本身也是一个对象)frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)history 窗口的历史列表(该属性本身也是一个对象)length 窗口内的框架数location 窗口所显示文档原创 2021-12-03 17:33:15 · 1616 阅读 · 0 评论 -
身份证校验
/**@description 解析身份证信息@param {String} idCard - 身份证号@param {Number} analyseType - 解析类型(birthDate-出生日期 sex-性别 age-年龄)@return {String}*/function getAnalysisIdCard(idCard = “”, analyseType = “birthDate”) {const analyseTypeArr = [“birthDate”, “sex”, “a原创 2022-04-06 15:11:54 · 635 阅读 · 0 评论 -
由浅入深,66条JavaScript面试知识点
文章目录由浅入深,66条JavaScript面试知识点前言HTML&CSS:JavaScript:Vue:1.介绍一下js的数据类型有哪些,值是如何存储的2. && 、 ||和!! 运算符分别能做什么3. js的数据类型的转换4. JS中数据类型的判断( typeof,instanceof,constructor,Object.prototype.toString.call()5. 介绍 js 有哪些内置对象?6. undefined 与 undeclared 的区别?7. null原创 2021-12-26 21:57:53 · 629 阅读 · 0 评论 -
中级前端工程师需要掌握的 28 个 JavaScript 技巧
文章目录前言1.判断对象的数据类型2. 循环实现数组 map 方法3. 使用 reduce 实现数组 map 方法4. 循环实现数组 filter 方法5. 使用 reduce 实现数组 filter 方法6. 循环实现数组的 some 方法7. 循环实现数组的 reduce 方法8. 使用 reduce 实现数组的 flat 方法9. 实现 ES6 的 class 语法10. 函数柯里化11. 函数柯里化(支持占位符)12. 偏函数13. 斐波那契数列及其优化14. 实现函数 bind 方法15. 实现函原创 2021-12-26 22:16:09 · 285 阅读 · 0 评论 -
35个前端硬核工具函数
工具函数篇表单序列化export const serialize = data => { let list = [] Object.keys(data).forEach(ele => { list.push(`${ele}=${data[ele]}`) }) return list.join('&')}复制代码获取对象的类型export const getObjType = obj => { var toString = Object.p原创 2021-12-26 22:03:20 · 798 阅读 · 0 评论