一文带你深入理解 JavaScript 中的原型与原型链
先使用构造函数创建一个对象： 在上述例子中，我们使用构造函数 ，通过 创建了一个实例对象 。 原型 上的方法是给实例对象使用的。 每个函数（ 只有函数才会有 ）都有一个 属性，其指向一个对象，这个对象就是该构造函数创建的 实例对象 的原型（通过 指向，后续会详细讲解）。 指向的通常是一个 空对象，我们可以手动为其添加属性和方法，例如： 构造函数的 属性和 实例对象的原型 的关系为： prototype 构造函数...
理解amd,cmd,commonjs,esm,umd 模块化
什么是模块 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件)，并进行组合在一起； 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信； 模块化的进化过程 1.全局function模式 将不同的功能封装成不同的全局函数 编码：将不同的功能封装成不同的全局函数 问题：污染全局命名空间, 容易引起命名冲突或数据不安全，而且模块成员之间看不出直接关系 2.namespace模式 简单对象封装 作用：减少了全...
🌟前端使用Lottie实现炫酷的开关效果🌟
前言 在平时的开发过程中，前端或多或少都会遇到实现动画效果的场景。手写动画是一件相当麻烦的事情，调来调去不仅费时费力，可能还会被产品/UI吐槽：这动画效果也不难呀，为什么就不能实现呢？/为什么就没有还原成我想要的样子呢。 比如说产品让我们实现这样的一个开关动效 今天我们就用动画的实现方式—— ，来百分百还原设计师的动画效果，并且可以大大提高我们的工作效率（摸鱼时间）。 简介 首先我们先来看一下，平时我们实现动画都有哪些方式，它们分别有什...
js控制一次只加载一张图片
今天看到一个面试题，是关于img图片加载方面的，有必要记录一下。其实关于这个问题，只要知道图片什么时候加载完成就能解决了。 通过onload事件判断Img标签加载完成 实现逻辑：新建一个Image对象实例，为实例对象设置src属性等，在onload事件中添加此实例对象到父元素中，然后将图片地址数组中的第一个元素剔除，继续调用此方法直到存储图片地址的数组为空。 代码 实现效果 加上 后，看到的效果更加明显,我这里加了500毫秒的延迟(录屏...
简单的console.log不要再用了
1\. 需求分析 一般情况下，我们在项目中进行代码调试时，往往只会在逻辑中使用 进行控制台打印调试。 这种方式虽然比较常规直接，但是如果打印数据多了，就会导致你的控制台消息变得异常混乱。 所以，我们有了更好的选择，那就是 对象提供的其它API，来让我们能够更清晰的区分打印信息。 2\. 实现步骤 2.1 console.warn 当我们需要区分一些比较重要的打印信息时，可以使用 进行警告提示。 2.2 console.error 当我们...
requestIdleCallback解决页面卡顿
一、基本概念 1. js是单线程执行的，分为GUI渲染线程，js引擎线程，事件触发线程，定时器触发器线程，http请求线程。 2. 执行js会阻塞gui渲染，如js执行所需时间超过一帧的时间，就会导致页面掉帧，也就是肉眼看到的卡顿。 二、场景模拟 1\. 准备工作 通过一个小方块平移运动模拟浏览器渲染图形 使用while模拟js阻塞 2\. 测试正常运行js耗费时间 可以看到总耗时2s，页面在js运行期间卡住了，小方块完全没有响应，直到...
阻止用户离开页面，beforeunload和unload事件说明
定义 onbeforeunload事件在onunload事件之前触发。 调用方式 MDN官方示例： 或者在body标签上绑定onbeforeunload，但更推荐使用 的方式调用。 如果需要添加beforeunload点击确认后的处理代码，可以直接添加unload事件监听。 注意事项 使用方式 HTML规范建议作者使用 Event.preventDefault() 而非 Event.returnValue 的方式来提示用户。但是，该种方...
10 个功能强大的 JavaScript 动画库
首发于公众号 ，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答 动画。从人群中脱颖而出、吸引访客注意力的绝佳方式。通过富有创意的物体运动和流畅的页面转换，不仅能为我们的网站增添独特的美感，还能提高用户参与度，创造令人难忘的第一印象。 有了这 10 个功能强大的 JavaScript 库，创建动画再简单不过了。滚动动画、手写动画、SPA 页面转换、打字动画、颜色动画、SVG 动画......它...
Editor.js 开发 Notion 风格富文本编辑器
前言 开发一个编辑博客内容的富文本编辑器，风格类似于 Notion 块级的编辑器，研究了 开源项目，和它的风格接近，editorjs 界面简洁，操作个人感觉很高级，插件灵活易扩展，样式可编辑修改，开发成本也没有那么复杂 介绍 Editor.js 亮点 用户界面友好 ：Editor.js 提供了一个直观且易于使用的用户界面，能够轻松地创建和编辑文档 模块化编辑 ： 使用块级元素（blocks）的方式组织文本，每个块负责处理不同类型的内容，...