debugger 指令，一般用于调试，在如浏览器调试执行环境中，可以在 JavaScript 代码中产生中断。 如果想要拦截 debugger，是不容易的，常用的函数替代、proxy 方法均对它无效，如： window.debugger = (function() { var origDebug = console.debugger; return function() { // do something before debugger statement execution origDebug.apply(console, arguments); // do something after debugger statement execution }; })(); 或： var handler = { get: function(target, prop, receiver) { if (prop = 'debugger') { throw new Er

前言 一般来讲，电脑是不能直接运行我们的 javascript 代码的，它需要一个翻译程序将人类能够理解的编程语言 JavaScript，翻译成机器能够理解的机器语言。目前市面上有很多种 JavaScript 引擎，诸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌开发的开源项目 V8 是当下使用最广泛的 JavaScript 虚拟机，全球有超过 25 亿台安卓设备，而这些设备中都使用了 Chrome 浏览器，所以我们写的 JavaScript 应用，大都跑在 V8 上。 什么是V8 在 V8 出现之前，所有的 JavaScript 虚拟机所采用的都是解释执行的方式，这是 JavaScript 执行速度过慢的一个主要原因。而 V8 率先引入了即时编译（JIT）的双轮驱动的设计，这是一种权衡策略，混合编译执行和解释执行这两种手段，给 JavaScript 的执行速度带来了极大的提升。 「通俗点理解就是：V8是一个高性能的JavaScript解析执行引擎」 ![图片](https://static.developers.pub/8...

本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。 因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。 一、Vue3 里 script 的三种写法 首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法， 1、最基本的 Vue2 写法 <template   <div {{ count }}</div   <button @click="onClick"     增加 1   </button </template <script export default {   data() {     return {       count: 1,     };   },   methods: {     onClick() {       this.count += 1;     },   }, } </scr

本文将探索主流前端框架中的响应式是如何工作的并比较这些框架的不同之处以更好地理解它们。 前置准备 响应式 响应式可以被广义地定义为应用状态变化时自动更新UI 。作为开发者，我们只需要关注应用的状态，并让框架将该状态反映到UI 上。但是，框架如何反映该状态可能会对代码的性能和懒加载产生影响，下面会进行深入探讨。 粗粒度 vs 细粒度 在响应式框架之间进行比较的一个维度是 粗粒度与细粒度的响应性 。 粗粒度 ：框架必须执行大量应用或框架代码来确定哪些 DOM 节点需要更新。 细粒度 ：框架不需要执行任何代码，就知道哪些 DOM 节点需要更新。 这是一个框架可以处于连续的维度，不过仅仅是众多可以比较的维度之一。本文中也将涉及渲染。在这里，渲染意味着框架确定要更新哪个 DOM 的方式，而不是浏览器因 DOM 更新而执行的实际浏览器渲染。 下面是跟 颗粒度 得出的一个结论（从左到右表示粗粒度到细粒度）： ![图片](https://static.developers.pub/7630074317ee4b6eae...

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。 在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm 、 webpack 、 react/vue ，必须熟悉 ES6  语法，最好还了解状态管理，比如 Redux ，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的生态，相关的库有 2347 个，很多功能相似，挑选成本高。 然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了。使用amis只需要简单配置就能完成所有页面开发，你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，对于大部分常用页面，应该使用最简单的方法来实现，甚至不需要学习前端框架和...

loading的展示和取消可以说是每个前端对接口的时候都要关心的一个问题。这篇文章将要帮你解决的就是 如何结合axios更加简洁的处理loading展示与取消的逻辑 。 首先在我们平时处理业务的时候loading一般分为三种： 按钮loading ， 局部loading ，还有 全局loading 。 按钮loading 其实想写这篇文章的诱因也是因为这个按钮loading ，在大多数时候我们写按钮loading业务的时候是这样写的。 const loading = ref(false) try {     loading.value = true     const data = await axios.post( /api/data ) } finally {     loading.value = false } 或者这样的写的 const loading = ref(false) loading.value = true axios.post( /api/data )     .then(data =  

我们对微前端框架的内容做了一个详细的介绍，并从零开始用Typescript实现了微前端的基本功能。 本文我们首先实现一个可进行子应用注册和资源加载的微前端框架，实现在一个vue3主应用中加载3个不同技术栈（vue2、react15、react16）的子应用，并且页面上渲染出各个子应用的内容； 然后，我们对该微前端框架实现扩展，实现 运行环境隔离（沙箱） css样式隔离 应用间通讯（含父子通信、子应用间通信） 全局状态管理（全局store的简单使用） 利用应用缓存和预加载子应用提高加载性能 一、前置准备 再开发我们自己的微前端框架之前，我们需要做一定的架构设计准备。我们考虑微前端架构设计时的整体思路，并画出项目架构图。 1.1 微前端框架实现思路 采用路由分发式（本文使用的是hash模式） 主应用控制路由匹配和子应用加载，共享依赖加载 子应用做功能，并接入主应用实现主子控制...

Vercel 是一个流行的 React.js、Next.js 等前端应用部署平台，我们可以一键将 Github 上的应用部署上线，但它缺少一个重要部分：数据库。不过现在已经有了四种新数据库可供选择。 数据是 Web 应用中不可或缺的一部分，在这之前我们可以配合使用 Heroku 的数据库服务，但后来 Heroku 收费，不再提供免费的数据库，社区中也一直寻找免费试用的数据库方案，现在我们可以直接选择 Vercel 来上线一个动态网站， 并且使用 JavaScript 和 TypeScript 框架服务端渲染实时数据会比以往任何时候都更容易。 5 月 1 日，Vercel 宣布一套 serverless 存储解决方案现已在 Vercel 上可用，是由业内一些最佳基础设施提供商提供支持。 Vercel KV：一种简单耐用的 serverless Redis 解决方案，由 Upstash 提供支持 Vercel Postgres：为前端构建的 serverless SQL 数据库，由 Neon 提供支持 Vercel Blob：一种在边缘上传、提供文件对象存储的解决方案，...

只有了解用户，我们才能服务好用户，而最接近用户的我们，自然要承担起更多的责任。 那么在一个企业中，我们要如何去了解用户呢？ 最直接有效的方式就是了解用户的行为，了解用户在网站中做了什么，呆了多久。 而如何去实现这一操作，这就涉及到我们前端的埋点了。 埋点方式 在聊如何进行埋点前，我们先介绍下什么是埋点？ 所谓'埋点'是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。 从数据产品经理视角，聊聊埋点的意义 | 人人都是产品经理 (woshipm.com)[1] 基于此我们可以知道埋点是实际上是对特定事件或者行为的数据监控和上报， 常见的埋点上报方式有ajax，img，navigator.sendBeacon下面介绍下这三种埋点上报方式 基于ajax的埋点上报 介绍 因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。 代码实现 我们...

前言 平常在我们点进一个网站的时候，或许会看见一个一些动态的灰色条状物，他们代替着本应该出现在这里的内容，作为一种 「加载态」 的展现方式而呈现，这里我们就拿掘金来举例，进入掘金的首页，按下F12，进入开发者模式后点击 「Network」 ，选择 「低速3G」 ，这时候我们再刷新一次，就可以很清楚的看见一个灰色块了 而这里的灰色块，便是 「骨架屏」 ，现在绝大多数的大厂的网站都会用骨架屏的方案来代替原先的转圈loading了，虽然都是加载态的一种方式，但是相较于干巴巴的转圈，这种在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，填充好本应该展现的内容，给人一种 「创造即时转换的错觉」 ，这也是为什么各个大厂都愿意选择骨架屏来作为加载态的原因 ❝补充：骨架屏是一个 「低保真度」 的用户界面，信息逐渐加载到其中。它为用户提供了一个视觉提示，即内容正在加载...

我们在网上浏览时，经常能看到很多网站，随着页面滚动条向下滑动时，有非常丰富的页面动画效果；相信很多小伙伴也都很好奇，这样的网站效果是如何做出来的。我们本文就来深入的学习一下GSAP这个库的用法，为后面实现酷炫的动画效果打下基础。 首先这样的滚动效果和fullpage.js、Swiper.js全屏翻页滚动轮播的效果是不一样的，页面元素的位置极度的依赖于滚动条的位置，因此是需要监听滚动条事件；笔者在调研了better-scroll.js、scrollReveal.js和iScroll.js等一系列插件后，发现这些插件并不能满足需求。 笔者也曾一度想过不依赖库，自己来实现类似的效果，不就是监听页面滚动么；但是想了想滚动时这么多元素的动画效果导致的性能问题以及页面resize后如何来重新计算也是不小的问题，于是就打消了不切实际的念头。 在扒开很多网站的源代码之后，笔者找到了一个很多网站都在用的动画库：GSAP；但是很奇怪，网站搜索这个库，我们发现它的教程非常的少，这么好用的一个动画库不应该资料这么匮乏；但是看到官网全英文的教程和有时候无法访问demo教程后，以及有点难理解的各种概念后，...

大家好，我是沐华。最近部门招人，捞了一批简历至少都是5年以上的前端来面试，其中不乏360的，腾讯的，简历上写的基本都是熟练使用 Vue2 、 Vue3 、 React 并阅读源码对其实现原理有自己的理解，实际问起来却不免让人唏嘘 比如：既然两个框架都用过，那能说一下你觉得这俩有什么区别吗 毕竟是两个框架，不像两个 API ，要说细节上的区别就太多太多了，可能能聊几个小时都聊不完，所以你给自己的定位是什么呢 说说 Vue 和 React 的区别 青铜级 只要真正了解一些，或者用过两个框架开发，就一定能说上来的一些语法层面： Vue API 多， React API 少 Vue 双向绑定，修改数据自动更新视图，而 React 单向数据流，需要手动 setState Vue template 结构表现分离， React 用 jsx ...

💎前情提要 在前面两篇文章中反复提到了不同框架编译之后的差异 🚀 React编译之后是 Jsx 函数返回的 虚拟DOM 🚀 Vue编译之后是 render 函数返回的 虚拟DOM 🚀 SolidJS编译之后返回的 真实DOM 字符串 🚀 Svelte编译之后返回的是 真实DOM 片段 React 由于架构机制决定了每当状态发生改变，从当前组件开始一直到叶子组件重新加载。 Vue 由于给每个组件建立了 watchEffect 监听机制，每当组件依赖的状态发生改变，当前组件重新加载。 SolidJS 和 Svelte 由于在编译之后就确定了当状态发生改变 UI 随之变化的关系，所以仅仅是具体 DOM 的重新加载。 根据这些不同的更新粗细粒度，他们被分为 | 粒度 | 成员 | | ----- | ---------------------- | | 粗粒度 | React | | 中粒度 | Vue |

开源项目地址：[github.com/eleme/morjs](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Feleme%2Fmorjs "https://github.com/eleme/morjs")，欢迎试用 喜欢么？或者对您有用？ [☞ 立即去 ⭐️ Star ⭐️ 一下 ☞](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Feleme%2Fmorjs "https://github.com/eleme/morjs") MorJS 是什么？ 简介 Mor (发音为 /mɔːr/，类似 more) 是饿了么开发的 一款 基于小程序 DSL 的，可扩展的多端研发框架。 使用 MorJS，我们只需书写一套（微信或支付宝）小程序，就可以通过 M...

随着前端项目越来越大，代码复杂性不断增加，对于模块化的需求越来越大。模块化是工程化基础，只有将代码模块化，拆分为合理单元，才具备调度整合的能力。下面就来看看模块化的概念，以及不同模块化方案的使用方式和优缺点。 1. 模块概述 （1）概念 由于代码之间会发生大量交互，如果结构不合理，这些代码就会变得难以维护、难以测试、难以调试。而使用模块化就解决了这些问题，模块化的 特点 如下： 可重用性： 当应用被组织成模块时，可以方便的在其他地方重用这些模块，避免编写重复代码，从而加快开发流程； 可读性： 当应用变得越来越复杂时，如果在一个文件中编写所有功能，代码会变得难以阅读。如果使用模块设计应用，每个功能都分布在各自的模块中，代码就会更加清晰、易读； 可维护性： 软件的美妙之处在于进化，从长远来看，我们需要不断为应用增加新的功能。当应用被结构化为模块时，可以轻松添加或删除功能。除此之外，修复错误也是软件维护的一部分，使用模块就可以更快速地定位问题。 模块化是一种将系统分离成独立功能部分的方法，可以将系统分割成独立的功能部分，严格定...