前端之JS
文章平均质量分 76
码飞_CC
热爱生活与技术,偏于前端,潜心学习,乐于分享
展开
-
让ChatGPT回答:从浏览器输入url开始,到页面渲染出来,详细的过程
浏览器也会对CSS规则进行继承和层叠的处理,最终将CSS规则应用到对应的DOM节点上,形成渲染树。这个过程被称为布局或回流,浏览器会对页面上所有的海报进行遍历和计算,以便计算出每个元素的布局和位置信息。此时,用户可以在浏览器中看到完整的页面,可以进行交互和操作。在HTML解析的过程中,如果浏览器遇到HTML标签、文本和注释等内容,就会将其转换成对应的DOM节点。以上就是从输入URL到页面渲染完成的11个步骤的详细解释,希望能够帮助您更加深入地了解浏览器的工作原理和Web页面的渲染过程。原创 2023-04-23 10:59:11 · 1180 阅读 · 1 评论 -
Form 表单数据缓存的一种策略
Form 表单数据缓存的一种策略,提升用户表单操作体验,供交流学习原创 2022-03-17 16:21:11 · 2243 阅读 · 1 评论 -
微前端子应用路由更改时可能会遇到的坑
手里有个项目(使用 icejs),该项目有作为子应用嵌入到其他主应用中,并且该项目中的部分页面存在以iframe的形式引入到其他的系统中的情况,这样如果对项目相关页面的路由做了调整的话,将会产生404的 bug :页面找不到。举个例子,原来的项目中 routerConfig 配置了一个页面:const routerConfig = [{ path: '/manage/editDashboard/:id', name: '编辑看板', component: EditBoard,原创 2021-11-04 19:42:17 · 1568 阅读 · 0 评论 -
前端获取接口报400错误时返回的响应数据的方式
后端接口在处理请求时,如果发生错误,采用 throw Error() 的方式处理,这样前端请求的结果为:对应的响应数据:这时如果我们在代码中直接采用 try catch 来捕获并输出错误信息时,会发现是以下结果:onError: (err) => { console.log('err', err)}控制台输出:这并不是我们想要的 response 的数据。为什么结果会是这样呢?这里如果直接输出 err,其实等于输出 error.message。我们想要获取接口的返回的数原创 2021-08-17 20:19:54 · 7080 阅读 · 0 评论 -
面对 ESM 的开发模式,webpack 还有还手之力吗?(转载)
snowpack / vite 等基于 ESM 的构建工具出现,让项目的工程构建不再需要构建一个完整的 bundle。很多人都觉得我们不再需要打包工具的时代即将到来。借助浏览器 ESM 的能力,一些代码基本可以做到无需构建直接运行。对于 webpack 而言,社区掀起的这一波 ESM 热潮,将 webpack 编译的速度推到了风口浪尖。webpack 在 v5 版本中也是针对编译的性能做出了不少努力,除了提供了物理缓存的优化之外,还提供 Module Federation 的方案,这给我们上层的应用实践带来转载 2021-04-06 19:41:01 · 1724 阅读 · 1 评论 -
JavaScript深拷贝看这篇就行了!(实现完美的ES6+版本)
本版本的深拷贝考虑了Symbol作为对象属性的情况(Symbol相关介绍看这:Symbol)。由于引用类型在赋值时只传递指针,这种拷贝方式称为浅拷贝。而创建一个新的与之相同的引用类型数据的过程称之为深拷贝。在JavaScript中,基础类型值的赋值是直接拷贝一份新的一模一样的数据,这两份数据相互独立,互不影响。而引用类型值(对象类型)的赋值是传递对象的引用(也就是对象所在的内存地址,即指向对象的指针),相当于多个变量指向同一个对象,那么只要其中的一个变量对这个对象进行修改,其他的变量所指向的对象也原创 2021-03-17 19:27:15 · 29135 阅读 · 11 评论 -
Uncaught SyntaxError: Cannot use import statement outside a module的解决方法
本地html文件中的script标签引入ES6的模块,直接在浏览器中打开该html文件,发现报错了:Uncaught SyntaxError: Cannot use import statement outside a module对应的index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con原创 2021-02-21 11:24:52 · 253828 阅读 · 21 评论 -
使用”发布-订阅“模式驱动组件间的数据传输
本文主要讲解通过发布-订阅模式驱动数据流,来实现React中组件间的通信。React是单向数据流的,也就是将数据以props属性的方式流向组件树中比自己层级更低的组件。组件间通信的方式常见的主要有以下几种:父-子组件间通信:这个最常见也很容易,父组件直接把数据以props的方式传递给子组件即可。子-父组件间通信:因为数据只能单向流动的,所以子组件并不能直接将数据传递给父组件。但是props的形式是可以多种多样,所以我们可以通过将父元素中绑定了自身上下文的函数以props的形式传递给子组件,然后子组件原创 2020-11-06 15:47:05 · 611 阅读 · 0 评论 -
JS基础很扎实?来挑战看能否一次性全做对!
1. 来试试看,以下12道题是否能一次性全答对:parseInt("")Number("")isNaN("")parseInt(null)Number(null)isNaN(null)parseInt("12px")Number("12px")isNaN("12px")parseFloat("1.6px") + parseInt("1.2px") + typeof parseInt(null)isNaN(Number(!!Number(parseInt("0.8"))))t原创 2020-10-14 21:18:03 · 791 阅读 · 5 评论 -
页面滚动到顶部
function scrollToTop() { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 8); }}原创 2020-07-16 14:50:14 · 596 阅读 · 0 评论 -
你不知道的 Blob
你不知道的 Blob一、Blob 是什么二、Blob API 简介2.1 构造函数2.2 属性2.3 方法三、Blob 使用场景3.1 分片上传3.2 从互联网下载数据3.3 Blob 用作 URL3.4 Blob 转换为 Base643.5 图片压缩3.6 生成 PDF 文档四、Blob 与 ArrayBuffer 的区别4.1 Blob vs ArrayBuffer五、参考资源如果你允许用户从你的网站上下载某些文件,那你可能会遇到 Blob 类型。为了实现上述的功能,你可以很容易从网上找到相关的示例,转载 2020-06-27 11:26:31 · 2864 阅读 · 0 评论 -
前端很容易遇到的一个大坑
前端开发时,我们经常会通过.操作符来获取属性值,这里有一个很容易。比如,后端接口定义中data字段类型为数组,原创 2020-05-25 19:51:15 · 7984 阅读 · 6 评论 -
JSON.stringify() 的 5 个秘密特性
JSON.stringify() 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串作为一名 JavaScript 开发人员,JSON.stringify()是用于调试的最常见函数。但是它的作用是什么呢,难道我们不能使用 console.log()来做同样的事情吗?让我们试一试。//初始化一个 user 对象const user = { "name" : "Prat...转载 2020-04-01 20:47:12 · 2225 阅读 · 0 评论 -
JS实现判断栈的压入、弹出序列
作为前端,接触算法的机会可能比较少,但是我们脑子可不能锈了~一道题目:输入两个整数序列,第一个序列表示栈的压入顺序,判断第二个序列是否为该栈的弹出顺序。假设压入栈的所有数字均不相等。例如:1,2,3,4,5是某个栈的压入顺序,序列4,5,3,2,1是该栈对应的一个弹出序列,但4,3,5,1,2就不可能是该压栈序列的弹出序列。这里,我用JS来实现这道题,其中用数组来模拟栈的操作。主要思路就是:...原创 2020-03-29 21:52:53 · 2183 阅读 · 0 评论 -
React请求数据的一种优化思路
文章目录1. 前期:分散开发时的阶段2.中期:统一的阶段3. 后期:单次访问只发起1次请求大家在网购或者寄快递时,应该都有碰到地址选择栏,也就是选择省市区。我在开发一个国外快递官网的时候也遇到了这个需求,在这个项目中,由于国外业务刚展开,并不是所有区域都可选的,需要人工维护这份数据(时常会改动),所以地址信息是由后端维护的,当前端页面遇到需输入地址的地方,就向后端发起地址数据的请求。在这,我记...原创 2020-03-17 21:27:12 · 2491 阅读 · 0 评论 -
ERROR in app.bundle.js from UglifyJs Unexpected token: name «element», expected: punc «;» 的错误处理
遇到问题webpack打包时使用UglifyJs(github地址)来压缩美化JS代码,在npm run build时报错了:// webpack.prod.js 内容const merge = require('webpack-merge')const UglifyJSPlugin = require('uglifyjs-webpack-plugin')const common = r...原创 2019-11-26 14:25:33 · 10839 阅读 · 0 评论 -
TypeError: CleanWebpackPlugin is not a constructor 的错误处理
遇到问题按照webpack官网的教程进行学习时,安装clean-webpack-plugin插件后(版本为:"^3.0.0"),再build时,发现报错了,配置如下:const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = { ... plugins: [ new C...原创 2019-11-25 15:54:36 · 7934 阅读 · 5 评论 -
JavaScript中的new操作符的原理解析
文章目录new关键字进行的操作自己实现new操作符JavaScript中new操作符用于创建一个给定构造函数的对象实例。如下例子:function Person(name, age){ this.name = name; this.age = age;}const person1 = new Person('Tom', 20)console.log(person1) // Pers...原创 2019-11-19 21:20:32 · 16073 阅读 · 10 评论 -
React input输入框异步校验的处理方式
文章目录前言处理方式1:防抖处理方式2:采用标记前言在日常工作中,我们经常接触到表单验证相关的功能。有些简单的校验(比如输入要求为手机号、邮箱、密码的字符组合等)可以直接由前端进行判断,但是有些复杂多变的判断(比如校验用户名是否存在、特殊行政区提示等)就必须发起请求由后端来验证,然后前端根据后端返回的结果进行提示等处理(这里称该校验的方式为异步校验)。处理方式1:防抖异步校验(选择框)存在...原创 2019-11-08 23:24:44 · 4974 阅读 · 0 评论 -
重新巩固JS(四)——JavaScript函数
文章目录1. 函数概述2. 函数定义3. 函数调用4. 函数参数4.1 默认值4.2 剩余参数5. 函数内部属性5.1 arguments对象5.2 this对象6. 函数是特殊对象6.1 函数的属性:length 和 name6.1.1 length属性6.1.2 name属性6.2 函数的方法: call、apply、bind6.2.1 call方法6.2.2 apply方法6.2.3 bin...原创 2019-07-10 21:44:38 · 1072 阅读 · 0 评论 -
console.log打印对象时属性缺失的解决方法
文章目录1. 序2. console.log()输出对象属性缺失3. 获取正确的结果3.1 方法1:对象展开3.2 方法2: JSON.stringfy()看字符串1. 序在编写代码时,我们常常用console.log()的方式将信息在控制台中打印出来以帮助我们进行前端调试。一般情况下,我们打印普通值都没有问题,但在打印对象类型时,我们就需要注意点了,要不然可能会出现不符合期望的结果。2. ...原创 2019-05-22 20:53:22 · 5693 阅读 · 2 评论 -
重新巩固JS(三)——JavaScript语句
文章目录1. 条件语句1.1 if else语句1.2 switch语句2. 循环语句2.1 while语句2.2 do while语句2.3 for语句2.4 for in语句3. 控制语句3.1 continue语句3.2 break语句4. 异常捕获语句5.with语句(不推荐使用)重新巩固JS系列,都是比较基础的东西,可以进行查漏补缺,很快看完,这是第三篇。其他JS重新巩固系列:重...原创 2019-05-21 21:02:16 · 1366 阅读 · 0 评论 -
重新巩固JS(二)——JavaScript操作符与表达式
JavaScript操作符与表达式1.表达式1.1原始表达式1.2表达式2.操作符1.表达式1.1原始表达式3.14 //数字直接量"hello world" //字符串直接量/pattern/ //正则表达式直接量true //返回一个布尔值: 真false //返回一个布尔值: 假null //返回一个值: 空this //返回“当前”对象i //返回变...原创 2019-05-20 20:49:34 · 1470 阅读 · 0 评论 -
帮你彻底搞懂防抖和节流(附带在React使用的一个例子)
文章目录前言防抖(debounce)节流(throttle)两个比喻来帮助区分防抖和节流前言开门见山,使用防抖和节流技术的意义:节约资源,提升用户体验。浏览器中有许多事件会在很小时间间隔内频繁触发,比如:监听用户的输入(keyup、keydown)、浏览器窗口调整大小和滚动行为(resize、scroll)、鼠标的移动行为(mousemove)等。如果这些事件一触发我们就执行相应的事件处理函...原创 2019-07-17 16:55:02 · 7697 阅读 · 0 评论 -
前端开发都应该懂的事件循环(event loop)以及异步执行顺序(setTimeout、promise和async/await)
文章目录1. JS是单线程的2. 事件循环(event loop)JS中的事件循环原理以及异步执行过程这些知识点对新手来说可能有点难,但是是必须迈过的坎,逃避是解决不了问题的,本篇文章旨在帮你彻底搞懂它们。说明:本篇文章主要是考虑浏览器环境,Node环境我没有研究过暂时不讨论。文章的内容也是博采众长以及结合自己的理解完成的,相关参考文献文章末尾也会给出,若有侵权请告知整改。不废话,让我们从简...原创 2019-07-26 15:01:38 · 5924 阅读 · 31 评论 -
正则表达式小记
文章目录1. 使用正则很酷1.1 不使用正则1.2 使用正则2. JS中正则表达式的创建方式3. 术语与操作符3.1 精确匹配3.2 匹配一类字符3.3 转义3.4 匹配开始与匹配结束3.4 重复出现3.5 预定义字符类3.6 分组3.7 或操作符(OR)3.8 反向引用在开发的过程中,我们不使用正则表达式也可以正常工作,但是,如果有了正则表达式(Regular Expression)的话,那么...原创 2019-08-07 21:18:21 · 2716 阅读 · 0 评论 -
JavaScript解构(Destructuring)的5个有趣用法
文章目录1. 交换变量(Swap variables)2. 访问数组项(Access array item)3. 不变的操作(Immutable operations)4. 解构可迭代对象(Destructuring iterables)5. 解构动态属性(Destructuring dynamic properties)6. 总结1. 交换变量(Swap variables)交换2个变量的的...翻译 2019-09-11 15:40:26 · 1722 阅读 · 1 评论 -
JS中的NaN
JavaScript中,NaN是一个特殊的数字值(typeof NaN的结果为number),是not a number的缩写,表示不是一个合法的数字。1. NaN的产生:一个不能被解析的数字Number('abc') // NaNNumber(undefined) // NaN失败的操作Math.log(-1) // NaNMath.sqrt(-1) // NaNMat...原创 2019-09-23 21:13:31 · 51546 阅读 · 17 评论 -
鼠标事件&使用小Tip
文章目录1. 鼠标事件类型1.1 简单事件1.2 复杂事件2. 鼠标事件的触发顺序3. 小Tips3.1 平时使用小技巧3.2 开发时的小技巧鼠标是我们日常生活中经常使用的,这里我们来简单了解下JS中的鼠标事件以及使用的一些小技巧。1. 鼠标事件类型我们将鼠标事件分为两类:简单事件和复杂事件1.1 简单事件mousedown/mouseup: 鼠标按钮在一个元素上点击/释放时触发。m...原创 2019-10-01 21:54:18 · 1479 阅读 · 0 评论 -
框架的游戏:2019 年 JavaScript 流行趋势
框架的游戏:2019 年 JavaScript 流行趋势1. 当今 JS 开发者需要具备的能力:我们基于数据的研究2. 主要收获3. 专家对 JS 开发未来趋势的看法JavaScript 生态系统复杂多变,各种框架让人眼花缭乱。究竟孰优孰劣,如今的发展趋势是怎样的,用人单位又需要怎样的人才?本文站在一个中立者的角度,客观分析了当前这场“框架的游戏”中,JavaScript 的流行趋势。Java...转载 2019-05-20 09:44:09 · 2457 阅读 · 1 评论 -
重新巩固JS(一)——JavaScript基本类型
文章目录JavaScript基本类型1. 原始类型:1.1 数值—Number1.2 字符串—String1.3 布尔值—Boolean1.4 字符—Symbol(ES6新增)1.5 Undefined1.6 Null2. 对象类型:2.1 重要的特殊对象3 类型识别JavaScript基本类型JS中的基本类型分为原始类型和对象类型两种。1. 原始类型:原始类型: Number、Strin...原创 2019-04-09 20:30:26 · 1306 阅读 · 0 评论 -
webpack安装后查询版本出错
在webpack4+的版本里,安装好webpack之后,再查询版本会出错。如下: 1.全局安装:npm install -g webpack 2.然后查询安装版本:webpack -v,出错 提示需要安装webpack-cli或webpack-command,现在的版本已经将webpack相关的命令单独出来了,所以我们要使用webpack命令的话,还需要另外安装包。 3.再安装we...原创 2018-06-28 13:45:36 · 8089 阅读 · 0 评论 -
提高网站打开速度的7大秘籍
提高网站打开速度的7大秘籍转载 2016-12-01 11:05:33 · 664 阅读 · 0 评论 -
常用正则表达式大全!(例如:匹配中文、匹配html)
常用正则表达式大全!(例如:匹配中文、匹配html)转载 2016-12-01 08:57:06 · 13458 阅读 · 0 评论 -
JavaScript资源大全中文版(Awesome最新版)
JavaScript资源大全中文版(Awesome最新版)转载 2016-11-18 10:31:14 · 2163 阅读 · 0 评论 -
Web前端工程师知识脉络图
Web前端工程师知识脉络图转载 2016-11-17 17:15:16 · 883 阅读 · 0 评论 -
JavaScript、Ajax与jQuery的关系
JavaScript、Ajax与jQuery的关系转载 2016-11-17 16:51:22 · 1029 阅读 · 0 评论 -
44 个 JavaScript 变态题解析
44 个 JavaScript 变态题解析转载 2016-11-29 19:54:42 · 730 阅读 · 0 评论 -
JS一些实用的方法
1. 将arguments转为数组:Array.prototype.slice.call(arguments); 备注:该方法也可以将getElementsByTagName()方法返回的NodeList转化为数组。像运行document.querySelectorAll("p")函数时,它可能返回DOM元素的数组,即NodeList对象。但这个对象不具有数组的函数功能,比如sort...原创 2017-09-28 15:31:25 · 708 阅读 · 0 评论 -
JS记忆函数
对于一种纯函数(即只要是同一种输入就能得到唯一一个相同的结果的函数),我们可以设置记忆函数来节约资源,当输入的参数不变时,我们就可以采用缓存的结果,当输入参数有所变化时才重新计算。函数如下所示:function memoize(fn) { var cachedArg; var cachedResult; return function(arg) { if (cachedAr...原创 2018-07-19 20:08:54 · 1378 阅读 · 0 评论