js

跳一跳是微信小程序[3]的一个小游戏。长按屏幕让小人蓄力跳跃，进行游玩。按照小人跳跃盒子的数量，以及特殊盒子加分项计算得分。,十分简单：长按鼠标蓄力、放手，方块就会从一个盒子跳到另一个盒子。然而就是这...

​作者 | 云昭,周下载2600万，累计下载数十亿次的Core-js的负责人要打“退堂鼓”了。Denis Pushkarev是数百万网站使用的Core-js库的维护者，近日，他发表言论说，他准备放弃开...

大家好，我卡颂。,在前不久的WWC22中，builder.io的CTO 「miško hevery」（同时也是Angular/AngularJS的发明者）发表了一段充满想象力的演讲。,miško he...

,大家好，我是前端西瓜哥，今天我们来看看 Node.js 模块查找的原理。,模块有三种来源。,需要注意的是，"a/b" 这种不属于路径写法，它属于前两种，比如 "fs/promises"、"@babe...

笔者最近在工作之余,一直在做数据可视化和nodejs方面的研究,虽然之前的web工作中接触过nodejs和可视化相关的内容,但是没有一个系统的总结和回顾,所以为了更深入的研究和复盘我的nodejs和数...

前言：昨天碰到了一个 worker_threads crash 的问题，最终经过阅读源码和调试找到了具体原因。不得不说，阅读源码是解决问题的非常有效的方法。,代码例子如下。 ,index.js:,ev...

,说明,1、index索引为字符串数字(注意非数字)，不能直接进行几何操作。,2、遍历顺序可能不是基于实际数组的内部顺序(可能是基于随机顺序)。,3、一般不建议使用for...in来遍历数组。,实例...

​虽然Web性能的实践已经存在了一段时间，并且多年来研究和调试JavaScript (JS)错误的能力有所提高，但我们从未真正关注过错误对性能的影响。,JavaScript错误是Akamai的真实用户...

随着 Node.js 的出现和不断发展，其他新的 JS 运行时也穷出不断，Deno、Just、Bun等等。本文简单介绍一下如何写一个 JS 运行时，相比操作系统、编译器来说，写一个 JS 运行时理论上...

​为进一步提升小程序的安全性和用户体验，目前平台对提审的小程序均需进行安全检测，在检测过程中，发现有小程序采用内置 JavaScript 解释器（如 eval5、estime、evil-eval 等...

,React 是一个建立在 HTML、CSS 和 JavaScript 之上的 UI 框架，其中 JavaScript（JS）负责大部分的逻辑。如果你对变量、数据类型、数组函数、回调、作用域、字符串方...

,React.js、Vue.js 这些现代的前端框架默认已经对安全做了非常多的考虑，但是这仍然不能阻碍我们写出一些安全漏洞 。。。因为框架永远不能完全限制我们编程的灵活性，只要有一定的灵活性存在就意味...

JavaScript是单线程的语言，单线程是指所有的程序路径按照一定的顺序执行，只有前面的程序执行了，后面的程序才会执行。,,也就是说在同一时间，JavaScript只能做一件事情，为了协调浏览器产生...

,大家好，我是前端西瓜哥，今天我们用 JS 来实现内置的 bind 方法。,在实现之前，我们先学习一下 Function.prototype.bind 的用法。,bind 是函数特有的一个方法，可以创...

译者 | 布加迪,审校 | 孙淑娟,机器学习是现代世界的一项基础技术。计算机可以学习识别图像、创作艺术品，甚至自行编写代码，所有这些基本上不需要人的干预。,但机器学习是如何工作的？你自己又如何使用它呢...

,说明,1、局部作用域声明的变量称为局部变量(函数内部定义的变量),2、局部变量只能能使用局部变量。,var在函数内部声明的变量是局部变量。,3、函数的形参实际上是局部变量。函数形参也可视为局部变量...

,1、unshift()在数组开头插入元素，把一个或多个参数值附加到数组的头部。,实例 ,2、push()把一个或多个参数值附加到数组的尾部。 ,3、concat()将作为参数的一个或多个数组的元素添...

译者 | 朱先忠,策划 | 伊桑,Node.js可能是业界最流行的后端技术。Twitter、LinkedIn、Uber等知名国际企业都选择使用Node.js作为他们的主要服务器端技术，或者将其与其他语...

大家好，我是三元。今天给大家介绍一个新的框架 Fresh，由 Deno 作者出品，在最近发布了 1.0 的正式版本，宣布支持了生产环境，并且在 Github 上热度也比较高，现在是时候给大家详细地介绍...

,说明,1、CSS中in JS，意思就是使用js语言写css，完全不需要些单独的css文件，所有的css代码全部放在组件内部，以实现css的模块化。,2、CSS in JS其实是一种编写思想。,目前已...

,说明,1、switch语句可用于所有的数据类型(在许多语言中，它只能用于数值)，因此可以使用字符串甚至对象。,2、条件值不一定是常量，或者是一个变量或者一个表达式。,实例,以上就是js switch...

,说明,1、全局作用域声明的变量称为全局变量(函数外部定义的变量)。,2、代码的任何位置都可以使用全局变量，var声明的变量在全局作用域是全局变量。,特殊情况下，函数中不使用var声明的变量也是全局变...

,在现代 Web 应用中，为了让代码能在生产环境高性能的运营，源代码往往需要被编译打包，进行死码删除，代码转换等处理。,Babel 和 Typescript 是目前最常用的两个编译器，本文主要讨论两者...

提到元素拖拽，通常都会先想到用 HTML5 的拖拽放置 (Drag 和 Drop) 来实现，它提供了一套完整的事件机制，看起来似乎是首选的解决方案，但实际却不是那么美好，主要是它的样式太过简陋，无法实...

,这次我们来聊聊 Node.js 里面涉及到的一个核心概念：event-loop 。只有理解了它，才能明白 node 的进程模型，也才能明白异步调用在实现层面是什么样子的，更能明白当同步代码和异步代码...

,说明,1、引用计数算法定义内存不再使用的标准很简单，就是看一个对象是否有指向它的引用。,2、如果没有其他对象指向它了，说明该对象已经不再需要了。,实例,以上就是js引用计数算法的介绍，希望对大家有所...

随着 Node.js 17 的生命周期结束，是时候看看您需要更改哪些内容才能继续使用受支持的开发环境版本。,Node.js 17 是 Node.js 的一个版本，于 2021 年 10 月 19 日发...

,说明,1、for-of语句是一种严格的迭代语句，用于遍历可迭代对象的元素。,2、for-of循环将按照可迭代对象的next()方法产生值的顺序迭代元素。,关于可迭代对象，请参考ES6系列的Itera...

大家好，我是 CUGGZ。,2023 年 1 月 17 日，Nuxt.js 团队负责人 Daniel Roe 发布文章《Nuxt: A vision for 2023》，文中对 2023 年的 Nux...

,说明,1、内存分配：当我们申明变量、函数、对象的时候，系统会自动为他们分配内存,2、内存使用：即读写内存，也就是使用变量、函数等,3、内存回收：使用完毕，由垃圾回收机制自动回收不再使用的内存,实例...

,1、动态的插入script标签来加载脚本。,2、通过xhr方式加载js文件，不过通过这种方式的话，就可能会面临着跨域的问题。 ,3、将多个js文件合并为同一个并压缩。,目前，大多数浏览器已经支持并行...

,说明,1、如果try块中有错误的代码，代码将立即退出执行，并跳到catch块中。,此时，catch块接收到一个对象，该对象包含错误的相关信息。,2、try/catch语句中在finally语句中始终...

,1、Array.of()方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。,Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组...

,说明,1、为其他对象提供一种代理，便以控制对这个对象的访问，不能直接访问目标对象。,2、代理模式最基本的形式是对访问进行控制，而本体对象则负责执行所分派的那个对象的函数或者类。,优点,可以保护对象...

字符串是几乎所有编程语言中的基本类型之一。以下10 个重要的JS技巧可能是你不知道的。,,那么，我们现在就开始吧。,JS 字符串允许简单的重复，不同于纯手工复制字符串，我们可以使用字符串重复的方法...

,今天在看阿里的面试题时，看到这样一道面试题，问flexible.js的原理是什么？,,然而我也不知道，但是刚好我又在我公司的项目上遇到过，于是研究一番，遂作此文。,简单的一句概括就是：flexibl...

,Vue Amsterdam 2023 于 2 月 8 日至 10 日举行（Vue Amsterdam 是世界上最大的 Vue.js 会议），这是 Vue.js 作者尤雨溪三年以来首次参加面对面 Vu...

当我们在 JavaScript 中对一个值执行连续操作（例如函数调用）时，目前有两种基本方式：,在 2020 年 JS 状态调查中，“你认为 JavaScript 目前缺少什么？“ 问题中，希望拥有管...

内容管理系统 (「CMS」) 使没有强大技术背景的人也能够轻松发布内容。我们可以使用 「CMS」 来管理我们的内容和交付。市面上有不同类型的 「CMS」，它们执行不同的目的并具有不同的功能。,在本文中...

在产品发布新版本或者有新功能上线时，经常需要新手引导功能来引导用户了解应用。下面就来分享几个开箱即用的新手引导组件库，帮你快速实现新手引导功能！,Intro.js 是一个使用广泛的产品引导库，它在 G...

,说明,1、co模块可以帮助我们完成异步过程的自动执行。,co模块是基于Promise对象的。不需要制作Generator函数的执行器。,2、co函数返回Promise对象。,因此可以通过then添加...

,在前不久的WWC22中，builder.io的CTO 「miško hevery」（同时也是Angular/AngularJS的发明者）发表了一段充满想象力的演讲。,,miško hevery,在演...

,说明,1、hasOwnProperty判断对象是否具有名称属性或对象。,2、该方法不能检查对象的原型链是否具有该属性，该属性必须是对象本身的成员。,格式,返回值 ,若属性或方法是对象自己定义的，而非...

大家好，我是 CUGGZ。,今天来推荐几个热门又实用的 Vue.js 库！,,Pinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在...

前言：做基础技术的时候，会经常碰到一个问题就是如何让自己提供的代码对用户少侵入，无感。比如我提供了一个 SDK 收集 Node.js 进程的 HTTP 请求耗时，最简单的方式就是给用户提供一个 req...

作者 | Ankit Patel, 译者 | 翟珂, 编译丨Noe, 常说工欲善其事必先利其器。对于那些想要提高用户体验的企业来说，这一点尤其正确。在我们所处的数字世界中，给予UI或用户界面更多关注...

,说明,1、padStart()用于头部补充，padEnd()用于尾部补充，将指定的字符串填充到字符串的头部或尾部，返回新的字符串。,2、接受两个参数，第一个参数是字符串补全生效的长度，第二个参数是字...

,调度模式,1、观察者模式是由具体目标调度的，而订阅模式是统一由调度中心调的。,所以观察者模式的订阅者与发布者之间是存在依赖的，而订阅模式则不会。,通知订阅者的方式,2、观察者模式是通过主题自己本身去...

作者丨Can Mingir,译者丨仇凯,策划丨诺亚, 我们创建了一个项目，它可以自动化处理Node.js中的数据和逻辑，从而有效减少代码工作量。, 低代码框架Nucleoid在底层声明性运行时环境中使...

​大家好，我是前端西瓜哥。,React.js 是被广泛使用的用于构建用户界面的 JS 库。下面给大家介绍一下学习 React 需要了解的一些概念。,在 React 这类框架流行之前，我们更新 UI，都...

​“我们今天可以对JavaScript做的最好的事情就是让它退役！”,大神总是能说出让人印象深刻的话，上面这句话来自JSON和JSLint的作者Douglas Crockford。,,Douglas还...

​我们在处理数据的时候可能会遇到类似0.1+0.2 !=0.3的问题，让我们来分析下原因：,因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题...

众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。,举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比...

译者 | 朱先忠,审校 | 孙淑娟,在本文中，我们将学习如何使用Next.js、Prisma、Postgres和Fastify来联合开发一个完整的全栈Web应用程序。具体地说，我们将构建一个考勤管理演...

,当线上有报错的时候，大家是怎么定位问题的呢？,断点调试么？,但是这时候代码是被压缩过的，变量名都是 a、b、c、d 这种，根本看不出啥来。,如果调试线上报错能像本地开发的时候一样就好了。,其实这是可...

,大家好，我卡颂。,继​​Hooks​​​的发明者「Sebastian Markbåge」后，又一名​​React​​​核心成员「Andrew Clark」加入​​Vercel​​​，从事​​Next...

,1、while语句是一种先测试循环语句，即先检测退出条件，再执行循环体内的代码。,2、while循环体内的代码有可能不会执行。,下面是 while 循环的语法:,实例,在这个例子中，变量 xhs 从...

,说明,1、UMD是AMD和CommonJS的结合。,CommonJS模块是根据服务器第一原则开发的。选择同步加载，其模块不需要包装。,通用模块定义，umd兼容commonjs和amd规范，这意味着u...

,可以看到，只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现。,你也可以提前访问 CSS auto ...

,大家好，我是前端西瓜哥。我们在 VSCode 编辑器中编写 js 代码，是会提供类型提示的。,VSCode 会推断一个变量是什么类型，并在你输入内容的时候，提供对应的 API 属性或方法补全。,如下...

最近，我被问到几个奇怪的面试问题。它们与普通的问题不同：这些面试问题看起来非常简单，但却考验你对JavaScript的透彻理解。你能正确回答多少个?,请问当 x 值为什么时，才会打印 大迁世界,奇怪...

,大家好，我卡颂。,在布达佩斯2022 JSConf[1]会议上，tc39[2]（ES标准委员会）成员「Gil Tayar」介绍了一份当前仍处于stage 1​阶段的提案 —— Type Annota...

,说明,1、new构建函数，在内存中创建一个空对象。,2、this指向刚刚创建的空对象，在构造函数中执行代码，并为空对象添加属性和方法。,3、返回到这个对象。,实例,以上就是js中new关键字的使用过...

Node.js 不仅可以单独运行，还可以以库的方式被使用，本文介绍下如何把 Node.js 嵌入到自己项目中。首先第一步下载 Node.js 源码，然后根据 Node.js 的文档进行编译安装。这样我...

,大家好，我是 CUGGZ。,今天来分享几个前端文件处理相关的实用工具库！,,PDF.js是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。它由社区驱动并受 Mozilla 支持，目标是创...

,Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。Node.js 由Node.js Foundation（已与JS Foundatio...

,说明,1、构造函数名的首字母必须大写。构造函数无需return即可返回结果。,2、调用结构函数必须使用new关键词，只需new结构函数名()就可以创建对象。,3、在构造函数中的属性和方法之前必须添加...

,安装,对于项目目录的本地安装：,对于工作系统中的全局安装：,1、安装后，可以通过终端中的eslint命令使用 ESLint。,配置,2、最简单的配置方法是设置一个.eslintrc JSON 文件...

在自带垃圾回收的语言中，开发者往往不需要过多地关注内存管理。但是不代表我们可以完全忽略它。因为语言引擎的垃圾回收是有一定的判断规则的，如果我们的变量所引用的内存没有符合这个规则，那么引擎无无法对这些内...

,大家好，我卡颂。,22年11月14日，Deno发布了v1.28，距离他第一个稳定版本v1.0.0发布（2020年5月13日）已过去2年。,作为Node.js​的竞争者，Deno似乎并没有达到「取代前...

Xterm.js 是一个使用 TypeScript 编写的前端终端组件，它允许应用程序在浏览器中为用户提供功能齐全的终端。它被VS Code，Hyper、Theia等热门项目所使用。关于终端，开源前哨...

,1、内置一个浏览器内核： 内置浏览器是指在抓取程序中启动浏览器核心，以便在js渲染后获得页面，这就像收集静态页面一样。,这种工具常用的有以下三种：Selenium、HtmlUnit、PhantomJ...

,说明,1、可迭代对象是实现了@@iterator方法的对象，那么可迭代对象就可以通过重写@@iterator方法实现自定义迭代行为。,@@iterator是一个可以返回迭代器对象的函数。,2、当ne...

有一个Gif图片，我们想要获取它的总帧数，超过一定帧数的图片告知用户不可上传，在服务端有很多现成的库可以使用，这种做法不是很友好，前端需要先将gif上传至服务端，服务端解析完毕后将结果返回，大大降低了...

高德地图JS API 实例 亲测可用 参考网站=> 阿里云数据可视化平台（下载json用的）： <script src="//webapi.amap.com/maps?v=1.4.15...

,Volar 是 Vue.js 官方的 VSCode 扩展。当官方推荐 Vetur 时，Volar 还是一个个人项目，随着时间的推移，由于改进的性能和体系结构而被采纳为新的官方扩展。作为一个旨在改善开...

,在本文中，我们将使用 Node.js 构建一个简单的博客 API。 API代表“应用程序编程接口”，它允许不同的软件系统相互通信。 在这种情况下，我们的博客 API 将允许我们创建、读取、更新和删除...

,,当您提交或推送时，您可以使用 husky 来检查您的提交消息、运行测试、检查代码等Husky 支持所有 Git 钩子[1]。,以一种非常 Linux 的方式，要配置 Git 挂钩，您只需将可执行文...

前几天在Python星耀和最强王者交流群里边，好几个人都在问JS逆向的视频和相关代码，看来都在学习进阶的知识，真是卷不动了。正好这几天我也在看JS的部分学习资料，看到一个还不错的案例，这里拿出来给大家...

回顾 Node.js 的最佳特性，以帮助您决定它是否适合您。,,什么是 Node.js?为什么使用 Node.js?让我们深入挖掘并找出更多详细信息，以帮助您确定此环境是否是您应用程序开发的正确选择...

,说明,1、若要访问最外层的变量，即全局变量，则相比直接访问内部的变量而言，会带来比较大的性能损耗。,2、可以将经常使用的全局变量引用储存在一个局部变量里。,实例,以上就是javascript动态加载...

,简单入门 pixi.js。,pixi.js 是一个快速、灵活的 2D WebGL 渲染引擎。,该库基于 Canvas 封装，默认优先使用 WebGL 进行二维图形绘制，充分利用 GPU 硬件加速能力...

大家好，我是 CUGGZ。,JavaScript 中每个常见问题都有许多成熟的解决方案。当然，国际化 (i18n) 也不例外，有很多成熟的 JavaScript i18n 库可供选择，下面就来分享一些...

众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。,举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比...

有许多JavaScript 库可用于绘制不同的图表，包括折线图、条形图、图形等等。,如果您正在尝试学习如何使用 JavaScript 在您的网站上动态显示数据，Chart.js是您可以测试的库之一...

,大家好，我是前端西瓜哥。,之前写了一篇关于​​ JS 中 bind 方法的实现​​的文章，并给出了实现：,但没有处理 通过 new 创建实例 的情况。,因为很少会遇到给 bind 返回的函数做 ne...

Hasura Storage 是一项开源服务，在 hasura 和任何 s3 兼容的存储服务之上增加了一个存储服务。其目的是能够利用云存储服务，同时也利用 hasura 的功能，如它的 graphql...

​译者 | 布加迪,审校 | 孙淑娟,图片是任何网站或应用程序的重要组成部分，它们有助于使内容更吸引人、外观更漂亮。然而，如果图片没有得到适当优化，它们也会减慢网站或应用程序的运行速度。,,优化图片之...

,​最近因为工作，需要通过 Node.js 对 Docker 进行一系列操作如，创建删除容器以及下发指令获取结果等。找了一圈网上大部分资源都是如何容器化 Node.js App 而非通过 Node.j...

大家好，我是 CUGGZ，周末来分享一点有趣的知识~,2022 年 6 月 22 日，Stack Overflow 发布了2022 年开发者调查报告。来自 180 个国家/地区的 73,000 多名开...

,大家好，我卡颂。,最近，Typescript v5.0 beta[1]发布，主打特性是「支持Decorators」。,有同学会疑惑，Decorators不是早就有的特性么？各种框架（比如Nest.j...

,说明,1、只要是代码，至少有一个作用域。写在函数内部的局部作用域。,2、如果函数中有函数，在这个功能域中可以诞生另一个功能域。,3、根据内部函数可以访问外部函数变量的机制，用链式查找决定哪些数据可以...

,说明,1、生成器的return方法结束生成器，返回Iteratorrresult。,2、done为true，value向return方法传达的参数，不传达任何参数，value为undefined...

Strve.js现在已经基本稳定在4.3.0版本，与之前的稳定版本相比，比如增加了常用的生命周期钩子函数。另外，如果你想直接在浏览器中使用Strve.js，可以使用IIFE版本。还有很多亮点，比如支持...

,大家好，我是 CUGGZ。,今天来分享一些实用的 npm 技巧！,npm 全称为 Node Package Manager，是一个基于 Node.js 的包管理器，也是 Node.js 社区最流行...

,Chrome DevTools 是我们每天都用的工具，它可以查看元素、网络请求、断点调试 JS、分析性能问题等，是辅助开发的利器。,今天不讲怎么使用它，而是讲一个好玩的方向：定制自己的调试工具。,之...

,大家好，我是 CUGGZ。,在产品发布新版本或者有新功能上线时，经常需要新手引导功能来引导用户了解应用。下面就来分享几个开箱即用的新手引导组件库，帮你快速实现新手引导功能！,Intro.js 是一个...

,说明 ,1、方法调用模式。,this总是指向调用方法的对象，this的方向与方法的调用位置有关，与方法的声明位置无关(箭头函数特殊)；,2、函数调用。this指向window，当调用方法没有明确对象...

,随着web前端开发行业的不断发展，对于新涌现的技术和工具，我们要保持一颗好奇的心态。因为正确的使用web前端开发工具可以让我们web开发过程更快捷、更轻松，还能提高产品的开发质量。面对市面上诸多的w...

,说明,1、callee是arguments对象的属性，指向arguments对象的函数是当前函数。,递归可以使用arguments.callee()。,2、在箭头函数中，this功能域与函数外部一致...