经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 JavaScript

浅拷贝与深拷贝

一、数据类型存储 在JavaScript中存在两大数据类型:基本类型、引用类型。 基本数据类型存放在栈中,是一段简单的数据段,数据大小确定,内存空间大小可以分配,是直接按值存放的,可以按值访问。 引用数据类型存放在堆中,变量在栈中保存的是指向堆内存的地址值,这个地址值指向对应的对...[2022/11/28]

fetch()函数说明与使用方法详解

Fetch() 是 window.fetch 的 JavaScript polyfill。 全局 fetch() 函数是 web 请求和处理响应的简单方式,不使用 XMLHttpRequest。这个 polyfill 编写的接近标准的 Fetch 规范。 fetch()...[2022/11/28]

EluxJS-让你像切蛋糕一样拆解前端巨石应用

大家好,EluxJS是一套基于“微模块”和“模型驱动”的跨平台、跨框架『同构方案』,欢迎了解... 可怕的巨石怪 工作中最可怕的是什么?是遇到业务复杂且乱作一团的巨石应用。改一发而动全身,无法渐进式重构,也没人敢对历史包袱进行优化,欠下的代码债只能像滚雪球一样越积越多,终于到某天玩不下去,大佬...[2022/11/23]

一文讲透CabloyJS全栈框架的来龙去脉

本文受众 咱们做软件开发,就好比是建造一幢幢房屋,一座座桥梁,既可以是北方宫殿的巍峨,也可以有南方庭院的雅致,更可以是横跨群山的峻险与孤悬。那么,不同的语言、不同的框架也都由其内在的秉质吸引着一批粉丝,坚持不懈的耕耘,营造出不同的生态,呈现出不同的开发风格和开发体验。正如Rails之于Ruby,...[2022/11/23]

打印Proxy对象和ref对象的包实现详解

打印Proxy对象和ref对象的包实现详解

目录前因目标结果实现(直接看源码的同学可以略过)判断一个对象是否是Proxy输出用户log的源对象最后暴露出去给用户调用 前因 平时工作的时候,我喜欢用console.log调试大法。但Vue3更新后,控制台都是打印的Proxy对象和ref对象,想看里边的值,就需要很麻烦的一层一层的展开。 ...[2022/11/19]

ECMAScript?modules规范示例详解

目录引言基本语法模块导出的4种写法3中模块说明符模块导入的 6 写法ES modules的 4 个特点导入是导出的只读引用支持循环依赖导入会被提升导出和静态导入必须位于模块的顶层模块与常规JavaScript脚本的差异在浏览器中使用 ES modules动态导入 引言 很多编程语言都有模块这一概...[2022/11/17]

JS?加载性能Tree?Shaking优化详解

JS?加载性能Tree?Shaking优化详解

目录正文什么是 Tree Shaking寻找 Tree Shaking 的机会防止 Babel 将 ES6 模块转换为 CommonJS 模块留意 side effects只导入你需要的更复杂的情况总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月...[2022/11/17]

JavaScript变量or循环中的var和let详解

目录在for循环中使用var声明初始化带来的问题解决方法使用闭包使用let变量初始化for循环怎么处理用let和var声明的初始化变量?总结 在for循环中使用var声明初始化带来的问题 一道经典面试题: var funcs = []; for (var i = 0; i < 3;...[2022/9/15]

JavaScript变量中var,let和const的区别

JavaScript变量中var,let和const的区别

目录前言ES5与ES6的区别1. 作用域2. 全局属性3. 变量提升与暂时性死区4. 重复声明let与const的区别1. 常量最佳实践 前言 JavaScript中一共有3种用来声明变量的关键字,分别是var、let和const。 其中var关键字是ES5时代的产物,由于ES5对变量的约束...[2022/9/15]

js数组去重常见的方法汇总(7种)

目录1、借助ES6提供的Set结构 new Set() 简单好用 强烈推荐2、利用 filter() 去重3、利用for 循环 搭配 indexOf 去重4、将数组的每一个元素依次与其他元素做比较,发现重复元素,删除 比较繁琐 不推荐5、借助新数组 通过 indexOf 方法判断当前元素在数组中的索...[2022/9/1]

JavaScript中Number的对象解析

目录Number对象是什么静态属性实例方法Number.prototype.toString()Number.prototype.toFixed()Number.prototype.toExponential()Number.prototype.toPrecision()Number.prototy...[2022/8/31]

JavaScript手写异步加法asyncAdd方法详解

目录前言分析 asyncAdd直观的基本要求隐藏的考察点 — setTimeout & cb隐藏的考察点 — async & await实现 asyncAdd具体实现进行优化抽离内层函数缓存计算结果 前言 在掘金上发现一道既简单但个人觉得还挺有意思的一道题...[2022/8/23]

JavaScript实现鼠标移动事件画笔

JavaScript实现鼠标移动事件画笔小游戏,供大家参考,具体内容如下 实现功能 鼠标点击时可以在画板上画画如果鼠标双击那么停止移动进画板颜色改变移除时颜色改变 <!DOCTYPE html> <html lang="en"> ? <head> ...[2022/8/23]

js实现登录弹框

本文实例为大家分享了js实现登录弹框,供大家参考,具体内容如下 html: <body> ? ? <div id="M"><!--用div将所有东西套起来,需要设置绝对位置--> ? ? <input type="button" valu...[2022/8/23]

使用js实现复制功能

本文实例为大家分享了使用js实现复制功能的具体代码,供大家参考,具体内容如下 复制 1.遍历复制(for in) 特征:不修改引用关系(原来的属性还在),仅能复制字符属性,Symbol不能复制,不可枚举属性不能复制,原型链不能复制。浅复制 2.JOSN.parse(JSON.stri...[2022/8/23]

rollup打包引发对JS模块循环引用思考

目录引言背景1背景2commonjses modules总结 引言 最近在项目中使用了typescript + rollup,满心欢喜测试打包结果的时候,发现打包出来的文件竟然无法运行,具体报错如下: throw new ERR_INVALID_ARG_TYPE(''superCto...[2022/8/23]

JS代理对象Proxy初体验简单的数据驱动视图

目录引言Proxy对象是什么使用Proxy写一个简单的数据驱动视图 引言 上大学的时候,最流行的框架是JQuery,它是事件驱动类型的,也就是说,当一个数据与DOM的某个内容相关联的时候,我需要在这个数据改变之后,去操作DOM来进行同步: <div id="data">数据<...[2022/8/22]

JavaScript中数组flat方法的使用与实现方法

JavaScript中数组flat方法的使用与实现方法

目录前言语法参数返回值使用示例方法实现1、当只扁平化一层的时候2、当数组展平的层数为最大层时3、数组扁平化使用参数控制扁平的深度总结 前言 flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 语法 var newArray =...[2022/8/22]

JavaScript实现文本转换为文件示例详解

目录? 项目基本结构知识点添加标题创建一个多行文本框创建一个单行文本框保存文件的按钮使用 JavaScript 将文本保存到文件总结 ? 项目基本结构 目录结构如下: ├── c │ └── style.c └── index.html 本节教程我们通过文本转换为文件的案...[2022/8/16]

javascript中for...of和for..in循环的区别

javascript中for...of和for..in循环的区别

目录for…in可以用来干什么for…of能用来做什么总结下来就是: for…in可以用来干什么 (1)for…in最好用来遍历对象,但也可以遍历数组(有缺陷)(2)for…in遍历的是key-value中的key值 我们...[2022/8/16]

JS疑惑的数据类型及类型判断方法详解

目录前言数据类型类型判断一、typeof方法二、Object.prototype.toString.call()方法小插曲三、Array.isArray()四、obj instanceof Object结语 前言 关于javascript这门语言的数据类型你了解多少呢?你有什么方法能够快速的判断...[2022/8/16]

JS数据分析数据去重及参数序列化示例

目录列表去重对象转为查询字符串获取查询参数 列表去重 使用 Set 数据结构 const set = new Set([2, 8, 3, 8, 5]) 注:Set 数据结构认为对象永不相等,即使是两个空对象,在 Set 结构内部也是不等的 方法封装 const uniquen...[2022/8/16]

JavaScript代码优化技巧示例详解

目录引言提炼函数函数参数化使用策略模式替换“胖”分支提炼变量内联变量封装变量拆分阶段拆分循环拆分变量分解条件表达式合并条件表达式以卫语句取代嵌套条件表达式将查询函数和修改函数分离 引言 我们先引入一句话: 代码主要是为了写给人看的,而不是写给机器看的,只是顺便也能用机...[2022/8/15]

利用JavaScript实现静态图片局部流动效果

目录背景效果实现HTML 页面结构CSS 样式JavaScript 方法总结 背景 如果你有玩过《王者荣耀》、《阴阳师》 等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,这些流动动画可能出现在缓缓流动的水流 、迎风飘动的旗帜...[2022/8/3]

JavaScript中???、??=、?.和?||的区别浅析

目录前言?? 与 || 的区别空值合并操作符 ??可选链操作符 ?. 空值赋值运算符(??=)补充:?. 链判断运算符总结 前言 undefined和null是两个比较特殊的数据类型,是不能用点操作符去访问属性的,否则将会报错 let a; c...[2022/8/3]

JavaScript实现淘宝购物件数选择

本文实例为大家分享了JavaScript实现淘宝购物件数选择的具体代码,供大家参考,具体内容如下 实现一个简易的淘宝购物件数量的选择算法,通过鼠标点击“+”、“-”按钮对数量增加或减少1,限购9件,最大增加到数字9,最小减少到0. 代码如下:...[2022/8/3]

JS前端使用canvas实现物体的点选示例

目录前言hover 的实现click 的实现矩形的坐标哪来的点在多边形内的其他判断方法穿透本章小结 前言 上个章节中我们已经给物体加上了被选中的效果,现在可以上点交互了,这个章节主要实现的就是物体的 hover 和 click 事件,当鼠标 hover 到物体上时,我们会改变鼠标的样式使其变成移...[2022/8/2]

详解JS中continue关键字和break关键字的区别

目录1.框架2.简单介绍3.代码演示4.演示break 1.框架 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>&...[2022/8/2]

JS前端以轻量fabric.js实现示例理解canvas

目录缘起fabric.js 初体验fabric.js 的大体结构canvas 能干嘛?小结 缘起 最近想系统看下 canvas 这个东西,所以找了一个库看看,本来打算写一两篇文章沉淀一下,发现东西有点多??,索性就拆成了系列文章,应该有十几章吧,目录大概是下面这个样子: 目前的话已经写...[2022/8/2]

JS前端轻量fabric.js系列之画布初始化

目录前言画布的前置知识画布初始化变换练习小结 前言 从这个章节开始我们就步入正题了,那一开始要做啥子呢,回忆下上个章节中 fabric.js 的使用过程,先是创建画布,再添加物体,然后开始动画和交互。显然画布是一切物体的开端??,所以首先要搞定的就是它,也就是 const canvas = ne...[2022/8/2]

JS前端轻量fabric.js系列物体基类

目录前言FabricObject 基类的实现抽离共同属性抽离共同方法Rect 类的实现本章小结 前言 在上个章节中我们已经创建了画布,接下来就可以进行物体的绘制了,那具体要怎么画呢?根据文章标题可以猜到应该是要抽象出一个物体基类,归纳出一些它们的共性,那它们能有啥共性呢,毕竟每个物体好像都是各画...[2022/8/2]

如何给JS中的数组开头添加元素

如何给JS中的数组开头添加元素

目录JS数组开头添加元素1.使用Array.unshift()方法2.使用扩展运算符(…)3.使用Aarry.concat()方法向数组的开头添加一个或更多元素 JS数组开头添加元素 1.使用Array.unshift()方法 向数组开头添加一个或多个元素,并返回新的长度,该...[2022/8/2]

关于ES6中的箭头函数超详细梳理

目录一、箭头函数的介绍1.1 什么是箭头函数1.2 基本语法1.3 箭头函数的参数1.4 箭头函数的函数体二、箭头函数的this指向规则三、箭头函数的arguments规则3.1 箭头函数没有自己的arguments3.2 可以用rest替代,rest参数获取函数的多余参数3.3 箭头函数不支持重复...[2022/8/1]

基于JS实现点击图片在弹出层显示大图效果

Javascript是个好东西。 Jquery是基于这个好东西的一个强大的库。 今天要实现的功能是基于这两个玩意儿的。 点击图片,在弹出层显示原图。 大概效果是这样的: 上代码: 先是html部分: <div style="text-align:center...[2022/8/1]

JavaScript前端分页实现示例

目录初窥前端分页前言需求分析实现目标:解决思路:开工,上代码:转折: 初窥前端分页 前言 近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次接到这种需求,借此记录一下。 需求分析 应用场景简述:在商品出库以及退回时,需要通过接口获取商品列表...[2022/7/19]

JS模板编译的实现详情

目录前言模板编译的简单实现模板编译1、构建模板生成函数2、正则替换 前言 编译是一种格式变成另一种格式的过程。编译会导致好的结果,比如书写简单的代码,编译出来复杂的代码;或者提高代码的使用性能。 这里只聊聊模板编译。 模板编译的简单实现 写一个最简单的模板 <p>He...[2022/7/19]

JavaScript前端实现小说分页功能示例

目录先让我找找我的思路在哪里思路已至,码来!结束 先让我找找我的思路在哪里 在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢? 因为没有什么思路,那就只能在前辈的项目中寻找思路了。 这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了...[2022/7/19]

JS前端性能优化解决内存泄漏页面崩溃

目录发生什么事了?咋了?这是咋了?死去的页面突然攻击我?陷入僵局垂死病中惊坐起勿以善小而不为修改参考 发生什么事了? 一个与往常一样的上午,当我沉浸在业务需求中不可自拔时,突然被拉入到一个事故大群。一脸懵逼的我还以为和之前的每次线上bug一样仅仅是个小问题时,殊不知是我简单了... 看...[2022/7/19]

一定有你会用到的JavaScript一行代码实用技巧总结

一定有你会用到的JavaScript一行代码实用技巧总结

目录引言一、日期处理1. 检查日期是否有效2. 计算两个日期之间的间隔3. 查找日期位于一年中的第几天4. 时间格式化二、字符串处理1. 字符串首字母大写2. 翻转字符串3. 随机字符串4. 截断字符串5. 去除字符串中的HTML三、数组处理1. 从数组中移除重复项2. 判断数组是否为空3. 合并两...[2022/7/19]

JavaScript前端构建工具原理的理解

目录前言构建工具的前世今生YUI Tool + AntGrunt / GulpWebpack / Rollup / ParcelVite / Esbuildjs 模块化的发展史和构建工具的变化青铜时代白银时代黄金时代结束语 前言 最近有幸在前端团队里面做了一次关于 webpack 的技术分享。在...[2022/7/19]

JavaScript前端实用的工具函数封装

目录1.webpack里面配置自动注册组件2.自定义指令图片懒加载3.图片文件转base64格式(实现预览)4.数组转为tree型结构(递归实现)5.递归深拷贝6.将数组里面的对象转换成我们需要的键值对 1.webpack里面配置自动注册组件 第一个参数是匹配路径,第二个是深度匹配,第三个是匹配...[2022/7/19]

JavaScript同步与异步任务问题详解

目录js会出现异步问题场景标题延时操作开关涵数jQuery异步请求设置为同步请求 js会出现异步问题场景 延时操作数据请求同异步promise 异步回调涵数(最常见多内置涵数支持接收回调涵数来异步代码 )事件监听 如,click事件等异步订阅与发布 今天遇到的问题是,请求数据时间太长,会先执行...[2022/7/19]

JavaScript?API?ResizeObserver使用示例

JavaScript?API?ResizeObserver使用示例

目录写在前面API介绍浏览器兼容性用法unobserve()disconnect() 写在前面 今天在看同事代码的时候看见这个API,出于好奇就去了解了一下。 这是一个实验中的功能 此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档...[2022/7/19]

ES6的内置对象扩展实现示例

目录一、Array的扩展方法1.扩展运算符(展开语法)2、扩展运算符的应用1.合并数组2. 将伪数组转换为真正的数组3.构造函数方法:Array.from()4.实例方法 :find() 5.findIndex()6.includes() 一、Array的扩展方法 1.扩展运算符(展开...[2022/7/4]

2022发布ECMAScript新特性盘点

2022发布ECMAScript新特性盘点

目录引言1. Top-level Await2. Object.hasOwn()3. at()4. error.cause5. 正则表达式匹配索引6. 类的实例成员(1)公共实例字段(2)私有实例字段、方法和访问器(3)静态公共字段(4)静态私有字段和方法(5)类静态初始化块 引言 2022 年...[2022/7/4]

JS实现简单拖动模态框案例

本文实例为大家分享了JS实现简单拖动模态框的具体代码,供大家参考,具体内容如下 需要实现的效果: ①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来 ②点击关闭按钮,模态框和遮盖层就会隐藏起来 ③页面拖拽 功能分析: 首先给上面...[2022/7/4]

js实现京东快递单号查询

本文实例为大家分享了js实现京东快递单号查询的具体代码,供大家参考,具体内容如下 1.实现效果: 当文本框中输入文字时,上面有一个放大文字的框中显示文本框内容。失去焦点时,放大文字的框消失,获得焦点时,放大文字的框显示。 2.案例分析 3.代码实现 <!DOC...[2022/7/4]

js实现模态框的拖拽效果

本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下 之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动。<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来。di...[2022/7/4]

JS实现拖动模态框案例

本文实例为大家分享了JS实现拖动模态框的具体代码,供大家参考,具体内容如下 效果图: 需求分析: 点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏。输入密码时可以明文查看或者隐藏。在表单的头部按下鼠标后可以拖拽表单。鼠标弹起拖拽结束。  话不多说,我们直接上代码: ...[2022/7/4]

用JS实现贪吃蛇游戏

本文实例为大家分享了JS实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 效果图: 完整代码如下: html: <!DOCTYPE html> <html lang="en"> ? <head> ? ? <meta char...[2022/7/4]

101
2
记录数:6656 页数:1/13412345678910下一页尾页
 友情链接: NPS
加载更多