https://fe-tech.viewnode.com/tags/javascript/Recent content in JavaScript on 疯狂的技术宅Hugo -- gohugo.iozh-CNMon, 14 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/14/Mon, 14 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/14/本文将通过代码示例展示如何使用基于回调的 API，然后将其改成使用 Promises，最后再用 Async/Await 语法。本文不会详细解释回调、promise 和 Async/Await 语https://fe-tech.viewnode.com/post/202106/03/Thu, 03 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/03/用 Boolean 进行真实检查 Boolean() 函数在对数据进行真值检查时特别有用，并且可能比双重否定 (!!) 操作更具可读性： let x = 'some-value'; // 这看起来不太美观 if (!!x) { // ... } // 这更具可读https://fe-tech.viewnode.com/post/202106/02/Wed, 02 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/02/在执行JavaScript代码之前，js引擎首先会对其进行解析和编译。在编译阶段，变量和函数声明被放入内存，这被称为提升（hoisting）https://fe-tech.viewnode.com/post/202104/27/Tue, 27 Apr 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202104/27/目的 在开始学习责任链之前，先看一下在开发中常见的问题。下面是前端用来处理 API 错误码的代码： const httpErrorHandler = (error) => { const errorStatus = error.response.status; if (errorStatus === 400) { console.loghttps://fe-tech.viewnode.com/post/202104/25/Sun, 25 Apr 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202104/25/目的 装饰器模式（Decorator Pattern） 的目的非常简单，那就是： 在不修改原有代码的情况下增加逻辑。 这句话听起来可能有些矛盾，既然都https://fe-tech.viewnode.com/post/202103/30/Tue, 30 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/30/前言 在 GitHub 上闲逛时，发现一个叫做 shortcuts-js 的项目，其描述写的是“A JavaScript iOS 12 快捷指令 creator”，花了几个小时的时间玩了一下，发现挺不错。 iOS 12 推出了一https://fe-tech.viewnode.com/post/202103/24/Wed, 24 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/24/前言 在 JavaScript 中，你可以不用英文字母与数字，就执行 console.log(1) 吗？ 换句话说，就在于代码中不能出现任何英文字母（a-zA-Z）与数字（0-9），除此之外（各种https://fe-tech.viewnode.com/post/202103/23/Tue, 23 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/23/作为一个优秀的程序猿需要具有知识的广度。首先是要了解你选择的编程语言。如果你正在阅读这篇文章，最有可能使用 JavaScript。 然而在熟悉了https://fe-tech.viewnode.com/post/202103/19/Fri, 19 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/19/每个 JavaScript 程序猿，包括我自己，都一直在努力了解 this 关键字在代码中的真正身份。 我设计了一个通用算法，可以帮你在任何情况下确定 this 关键字的值。虽然我尽可https://fe-tech.viewnode.com/post/202103/18/Thu, 18 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/18/ES2018 规范引入了四个新功能。这些功能包括异步迭代，rest/spread 属性，Promise.prototype.finally() 和正则表达式https://fe-tech.viewnode.com/post/202103/08/Mon, 08 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/08/ES2019 规范是对 JavaScript的小规模扩展，但仍带来了一些有趣的功能。本文向你展示八个 ES2019 的功能，这些功能可以使你的开发变得更轻松。 String.prototype.trimStart() 和 String.prototype.trimEnd() 有时https://fe-tech.viewnode.com/post/202103/01/Mon, 01 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/01/fetch() 很好用，但还能更好用 fetch() API使你可以在 Web 应用中执行网络请求。 fetch() 的用法非常简单：通过调用 fetch('/movies.json') 启动请求，请求完成后得到一个 Response 对象，然后从中提取数https://fe-tech.viewnode.com/post/202102/25/Thu, 25 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/25/1. 什么是方法 首先让我们定义并调用常规函数： function greet(who) { return `Hello, ${who}!`; } greet('World'); // => 'Hello, World!' 常规函数定义的形式为关键字 function 后跟名称、参数和函数体：function greet(who) {...} 。https://fe-tech.viewnode.com/post/202102/22/Mon, 22 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/22/在 JavaScript 中可以用 array.sort() 对数组进行排序。下面用它来对一些数字进行排序： const numbers = [10, 5, 11]; numbers.sort(); // => [10, 11, 5] 呃。。。 numbers.sort() 的返回值居然是 [10，11，5]，这是怎么回事https://fe-tech.viewnode.com/post/202102/20/Sat, 20 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/20/首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难，但实际上很容易学习和使用。 数组解构 数组解构https://fe-tech.viewnode.com/post/202102/19/Fri, 19 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/19/很多人都熟悉 jQuery，但是很少有人知道 Chrome Console 的 $ 和 $$ 这两个选择器的简写形式。我最近想出可以在自己的代码中复用这些选择器的方法，只需要使用 Document.querySelector(),https://fe-tech.viewnode.com/post/202102/18/Thu, 18 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/18/有的时候尤其是在进行密码输入时，我们需要检查键盘上的 Caps Lock 键是否被打开，并通知用户。这时可以通过用 KeyboardEvent.getModifierState() 方法 CapsLock 的值来执行此操作。换句话说，我们必须https://fe-tech.viewnode.com/post/202102/17/Wed, 17 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/17/JavaScript 提供了很多克隆数组的方法，其中大多数在性能和结果方面都非常相似。以下就是这些方法的简要介绍。 展开运算符 ES6 引入了展开运算符（...），它可能https://fe-tech.viewnode.com/post/202102/16/Tue, 16 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/16/每个前端都会用 JavaScript 控制台打日志或调试。但是 console 对象比 console.log() 有更多的东西。 计算属性名称 ES6 的计算属性名称特别有用，因为它们可以通过在变量周围添加一对大括https://fe-tech.viewnode.com/post/202102/12/Fri, 12 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/12/如果要检查 JavaScript 中的相等性，有两个比较运算符：双等号运算符（==）和三等号运算符（===）。 简而言之，双等号运算符（==）仅仅比较值，而三等号运https://fe-tech.viewnode.com/post/202102/11/Thu, 11 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/11/在使用 JavaScript 数组时，一个很常见的问题是如何清空数组并删除其所有元素。有几种方法可以解决这个问题，每种方法都各有利弊。 将其分配给一个空数组 你可以通https://fe-tech.viewnode.com/post/202102/07/Sun, 07 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/07/方法链是一种流行的编程方法，可以帮助你写出更简洁易读的代码。在本文中我们一起学习 JavaScript 中的方法链是什么，以及它是怎样工作的。另外我们还会探讨如何https://fe-tech.viewnode.com/post/202101/21/Thu, 21 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/21/本文比较并总结遍历数组的四种方式： for 循环： for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环： for (const key in someArray) { console.log(key); } 数组方法 .forEach()： someArray.forEach((elem, index) => { console.log(elem,https://fe-tech.viewnode.com/post/202101/19/Tue, 19 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/19/除了普通对象之外，数组是 JavaScript 中使用最广泛的数据结构。数组上最常使用的操作是按索引访问元素。 本文介绍新的数组方法 array.at（index）。https://fe-tech.viewnode.com/post/202101/11/Mon, 11 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/11/实验 先做一个实验：来看看立即解决的 Promise 和立即超时（ 0 毫秒的超时）哪个执行的更快？ Promise.resolve(1).then(function resolve() { console.log('Resolved!'); }); setTimeout(function timeout() { console.log('Timed out!'); }, 0); // logs 'Resolved!' // logs 'Timed out!' Promise.resolve(1) 是一个静态函数，可返回https://fe-tech.viewnode.com/post/202012/30/Wed, 30 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/30/回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。 本文将会解释回调函数的概念，同时帮你区https://fe-tech.viewnode.com/post/202012/15/Tue, 15 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/15/变量无处不在。即便我们写一个小函数或一个小工具，也要对变量进行声明、赋值和读取等操作。提高对变量的重视，可以增加代码的可读性和可维护性。。 1https://fe-tech.viewnode.com/post/202012/11/Fri, 11 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/11/黑客的方法论是一种涉及不断改进和迭代的构建方法。黑客们认为总有一天会变得更好，而且没有什么是永远不能够实现的。 真正的黑客总是用不同的方式来解https://fe-tech.viewnode.com/post/202012/10/Thu, 10 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/10/Ecma International 负责对 JavaScript 标准化。是他们制定了 ECMAScript 规范。当提到 ECMAScript 时，基本上可以把它看作是 JavaScript 的同义词。从 2015 年开始，开始用年份标记版本，即 ECMAScript 2015 缩写为 ES2015https://fe-tech.viewnode.com/post/202011/16/Mon, 16 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/16/在互联网的洪荒时代，网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中，通常是以小片段的形式提供效果和交互，一般会把所有的 JavaScript 代码全都写在一个https://fe-tech.viewnode.com/post/202011/13/Fri, 13 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/13/这个问题在很多文章找那个都讨论过，在 ESlint 规范中也因为加不加分号而分为两大阵营，到于加不加分号，关键是需要了解分号对于 JavaScript 的影响，开始之前可以先看https://fe-tech.viewnode.com/post/202011/10/Tue, 10 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/10/在创建一个函数并调用时可以传入一些参数或变量，不过函数究竟可以有多少可用的参数呢？？ 函数中的变量 以下通过一个例子来检查在调用函数时会有哪些变https://fe-tech.viewnode.com/post/202011/06/Fri, 06 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/06/作用域 JavaScript 的变量被作用域所限制，如果超出了作用域，那么变量就没有办法再被使用，这样做的优点是： 可以避免当前的变量转为全局变量 有效限制变量的作用https://fe-tech.viewnode.com/post/202011/05/Thu, 05 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/05/身为一名前端打工人，当然是经验越多，在排查错误时会更容易。道理都懂，但仍然会在遇到问题时会不知道怎样着手。 Chrome DevTools 中的常见错误排查 Chrome 开发者工具的https://fe-tech.viewnode.com/post/202011/02/Mon, 02 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/02/今天聊聊很多人搞不清的“对象原型“及 ”原型链“。 对象原型 相信大家都这样用过 map ： let arr = [0, 1, 2] let doubleArr = arr.map(c => c * 2) console.log(doubleArr) // 0, 2, 4 不知道你有没有想过， arr 本https://fe-tech.viewnode.com/post/202010/20/Tue, 20 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/20/在本文中，我们学习 Merge Sort 背后的逻辑，并用 JavaScript 实现。最后，在空间和时间复杂度方面将归并排序与其他算法进行比较。 归并排序背后的逻辑 归并排序使用分而治https://fe-tech.viewnode.com/post/202010/16/Fri, 16 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/16/替换字符串中的文本是 JavaScript 中的常见任务。本文研究几种用 replace 和正则表达式替换文本的方法。 替换单个字串 通常 JavaScript 的 String replace() 函数只会替换它在字符串中找到的第一个https://fe-tech.viewnode.com/post/202010/12/Mon, 12 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/12/介绍 排序是指以特定顺序（数字或字母）排列线性表的元素。排序通常与搜索一起配合使用。 排序算法有许多，而迄今为止最快的算法之一是快速排序（Quihttps://fe-tech.viewnode.com/post/202009/17/Thu, 17 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/17/不管是 jQuery、 Vue 还是 React，它们都支持插件。 插件是库和框架中很常见的功能，并且有一个充分的理由：它们允许开发人员以安全、可扩展的方https://fe-tech.viewnode.com/post/202009/16/Wed, 16 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/16/你知道在 JavaScript 中创建一个函数有多少种方式吗？ 1. 声明函数 function sum(a, b) { return a + b; } 2. 表达式函数 // 可以命名: (function sum(a, b) { return a + b; }); // 也可匿名 (AVOID): (function(a, b) { return a + b; }); //https://fe-tech.viewnode.com/post/202009/15/Tue, 15 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/15/先从一个面试题开始： JavaScript 面试题： setTimeout 和 setInterval 的源代码是在哪里实现的？ （不能百度和谷歌😎） 在继续往下看之前，请先在你的头脑子中回答问题 你的答案可能会是https://fe-tech.viewnode.com/post/202009/14/Mon, 14 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/14/var var 语句用来在 JavaScript 中声明一个变量，该变量遵守以下规则： 作用域范围是函数作用域或全局作用域的。 不受暂存死区（TDZ）的限制。 它会在 window 上以相同的名https://fe-tech.viewnode.com/post/202009/01/Tue, 01 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/01/编程中有什么错误？ 在我们的程序中，事情并非一帆风顺。特别是在某些情况下，我们可能希望在停止程序或在发生不良状况时通知用户。 例如： 程序试图打开https://fe-tech.viewnode.com/post/202008/26/Wed, 26 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/26/本文将研究 ES6 的 for ... of 循环。 旧方法 在过去，有两种方法可以遍历 javascript。 首先是经典的 for i 循环，它使你可以遍历数组或可索引的且有 length 属性https://fe-tech.viewnode.com/post/202008/25/Tue, 25 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/25/Deno 是新的 JavaScript 和 TypeScript 运行时。Node.js 的发明者 Ryan Dahl 于 2020 年发布了 Deno，作为 Node.js 的改进。但是 Deno 不是 Node.js，而是全新的 JavaScript 运行时，同时也支持https://fe-tech.viewnode.com/post/202008/24/Mon, 24 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/24/什么是生成器？ 生成器是在函数内部运行的一些代码 返回值后，它会自行暂停，并且—— 调用程序可以要求取消暂停并返回另一个值 这种“返回”不是传统的从https://fe-tech.viewnode.com/post/202008/17/Mon, 17 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/17/是的，你没有看错！在 JavaScript 中交换值的方法不止一种 在开发过程中又是我们需要对值进行交换。一般我们都在用一种简单的解决方案：“临时变量”。不过还有更https://fe-tech.viewnode.com/post/202008/12/Wed, 12 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/12/介绍 现代 JavaScript 框架使构建复杂的 Web 应用变得非常容易。 Vanilla JavaScript 指的是纯 Javascript 代码，没有使用任何框架进行扩展，这在创建小型应用程序时很好用。 1. Swiper.js Swiper 是免费的现代https://fe-tech.viewnode.com/post/202008/11/Tue, 11 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/11/今年ECMAScript 2020（ES2020）将发布！自 2015 年 ECMAScript 2015（ES6）发布以来，我们每年都对 JavaScript 语言进行更新。 目录 使用 JavaScript 空值合并运https://fe-tech.viewnode.com/post/202008/10/Mon, 10 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/10/闭包是令人困惑的，因为它是一个“无形的”概念。 当使用对象、变量或函数时，你会想：“在这里我需要一个变量”，然后将其添加到你的代码中。 闭包有各https://fe-tech.viewnode.com/post/202007/23/Thu, 23 Jul 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202007/23/为什么要进行事件委托？ 首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。 为了实现这个小功能，你需要选择按钮，然后再用 addEventListener() 方法来附加事件https://fe-tech.viewnode.com/post/202006/11/Thu, 11 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/11/比较 JavaScript 中的原始值非常简单。只需使用任何一种可用的相等运算符即可，例如严格相等运算符： 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化数据，所以比较https://fe-tech.viewnode.com/post/202006/04/Thu, 04 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/04/众所周知，JavaScript 一直在迅速变化。新的 ES2020 引入了许多很棒的功能。你可以通过很多不同的方式去编写代码。他们会达到相同的目标，但其中一https://fe-tech.viewnode.com/post/202006/03/Wed, 03 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/03/刷题是我们提高自己技术的一种好方法。下面的问题很有挑战性和“指导性”。如果你知道该怎样回答，那意味着自己的水平很好，但是如果你发现自己答错了https://fe-tech.viewnode.com/post/202005/15/Fri, 15 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/15/如果你一直关注 Web 开发领域，那么最近可能已经听到了很多关于 Deno 的信息——一种新的 JavaScript 运行时，它可能也会被认为是 Node.js 的继承者。但是这意味着什么，我们需https://fe-tech.viewnode.com/post/202005/06/Wed, 06 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/06/我一直在寻找提高效率的新方法。 JavaScript 总是充满令人出乎意料的惊喜。 1. 将 arguments 对象转换为数组 arguments 对象是函数内部可访问的类似数组的对象，其中包含传递给该函数https://fe-tech.viewnode.com/post/202004/29/Wed, 29 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/29/在 JavaScript 中，代码块、函数或模块为变量创建作用域。例如 if 代码块为变量 message 创建作用域： if (true) { const message = 'Hello'; console.log(message); // 'Hello' } console.log(message); // throws ReferenceError 在 if 代码块作用域内可以访问 messhttps://fe-tech.viewnode.com/post/202004/22/Wed, 22 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/22/本文概述了将代码库从 JavaScript 迁移到 TypeScript 的策略。还提到了需要进一步阅读的材料。 三种迁移策略 这是用于迁移到TypeScript的三种策略： 对于我们的代码https://fe-tech.viewnode.com/post/202004/21/Tue, 21 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/21/ECMAScript 2020 是我们最喜欢的编程语言的第 11 版，其中包含一些新功能。有些是小特性，但有些将会有可能永远改变我们编写 JavaScript 的方式。 Dynamic import() ES2015 引入了 static import 语法。现在你https://fe-tech.viewnode.com/post/202004/20/Mon, 20 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/20/你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力，而同时又在后台加载一些数据呢？幸运的是，没有必要用诸如 Three.js 之类的 3D 库进行非https://fe-tech.viewnode.com/post/202004/16/Thu, 16 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/16/JavaScript 的原始数据类型（例如number、string、null，undefined 和 boolean）是不可变的，这意味着一旦创建，它们的值就无法https://fe-tech.viewnode.com/post/202004/18/Thu, 16 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/18/我的意思是，对于刚开始使用这种语言和他语言（例如 C++ 或 C#）的开发人员来说，javascript 可能会很奇怪。 某些语言可能会让你大吃一惊🤯🤯 在https://fe-tech.viewnode.com/post/202004/15/Wed, 15 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/15/JavaScript 语言最初是为简单的表单操作而发明的，没有诸如模块或命名空间之类的内置功能。多年以来发明了大量的术语、模式、库、语法和工具来模块化 JavaShttps://fe-tech.viewnode.com/post/202004/09/Thu, 09 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/09/JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改，而是使https://fe-tech.viewnode.com/post/202004/03/Fri, 03 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/03/1.命名导入和自动完成 假设你编写了一个简单的 JavaScript 模块： // stringUtils.js export function equalsIgnoreCase(string1, string2) { return string1.toLowerCase() === string2.toLowerCase(); } 这是一个模块 stringUtils。该模块有一个导出为 equalsIgnoreCase 的函数，https://fe-tech.viewnode.com/post/202003/31/Tue, 31 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/31/Service Worker 很棒。它们使 Web 开发人员可以实现以前原生应用专有的类似功能。这类功能是例如推送通知或后台同步的离线功能。 它们是渐进式 Web 应用的核心。但是在设https://fe-tech.viewnode.com/post/202003/30/Mon, 30 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/30/通过衡量执行某个函数所花费的时间，以“证明”某些实现比另一些实现更高效始终是一个很好的主意。这也是确保性能在进行一些修改后不受影响并找出瓶颈https://fe-tech.viewnode.com/post/202003/26/Thu, 26 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/26/让我们从一个问题开始。 名为 increment 的 ES2015 模块包含以下代码： // increment.js let counter = 0; counter++; export default counter; 然后在另一个模块 consumer 中，将上述模块 increment 导入两次： // consumer.js import counter1 from './increment'; import counter2 from './increment'; counter1; // =>https://fe-tech.viewnode.com/post/202003/25/Wed, 25 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/25/当你想到路由时，通常会想到类似 React 之类的库。但实际上，这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢？ 我希望这个“JavaScrhttps://fe-tech.viewnode.com/post/202003/17/Tue, 17 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/17/你可能在 JavaScript 项目中都用了console.log。这是一种查看变量的值或程序运行中发生的事情的便捷方法。但是 JavaScript console 对象还有许多其他的功能，可以在处https://fe-tech.viewnode.com/post/202003/16/Mon, 16 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/16/有时候执行异步任务可能是很困难的，尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异步活动https://fe-tech.viewnode.com/post/202003/07/Sat, 07 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/07/了解 JavaScript 中原生错误的常见类型。 从浏览器控制台到运行 Node.js 的终端，我们到处都会看到错误。 本文的重点是概述我们在 JS 开发过程中可能遇到的错误类型。 **提https://fe-tech.viewnode.com/post/202003/05/Thu, 05 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/05/一段时间以来，函数式编程范式比较火热，并且在互联网上有很多关于它的精彩书籍和文章，但是要找到相关程序的真实示例并不容易。因此，我决定尝试使用https://fe-tech.viewnode.com/post/202002/28/Fri, 28 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/28/这是研究 JavaScript 内部工作方式的系列文章的第一篇。我会尽力使它变得有趣，并且不让你感到厌烦，因为我知道这些东西有时会变得非常乏味！ 想象一下，飞行员知https://fe-tech.viewnode.com/post/202002/26/Wed, 26 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/26/从服务器端渲染的网站切换到客户端渲染的 SPA 时，我们突然不得不更加注意用户设备上的资源，必须做很多工作：不要阻塞 UI 线程，不要使笔记本电脑的风扇疯https://fe-tech.viewnode.com/post/202002/25/Tue, 25 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/25/JavaScript 支持 setters 和 getters 已经很长时间了。他们用带有 set 和 get 关键字的简单语法来拦截对象的属性访问和值的修改操作。 const obj = { propValue: 1, get prop() { console.log("Retrieving property prop"); return this.propValue; }, set prop(value) { console.log("Setting property prop to",https://fe-tech.viewnode.com/post/202001/21/Tue, 21 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/21/在本文中，我们将探讨 “二次方” 和 “n log(n)” 等术语在算法中的含义。 在后面的例子中，我将引用这两个数组，一个包含 5 个元素，另一个包含 50 个https://fe-tech.viewnode.com/post/202001/17/Fri, 17 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/17/JavaScript 私有类字段和隐私需求 在过去，JavaScript 没有保护变量不受访问的原生机制，当然除非是**典型闭包 **。 闭包是 JavaScript 中许多类似于私有模式（https://fe-tech.viewnode.com/post/202001/15/Wed, 15 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/15/用 JavaScript 实现单词查找树 动机 对于搜索字符串的需求，在最坏的情况下，二叉搜索树的时间复杂度可能为 O(n)，“n” 是二叉树中存储的字符串的总数量。所以https://fe-tech.viewnode.com/post/202001/14/Tue, 14 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/14/在本文中，我们将会研究在 JavaScript 中实现基于类的枚举模式。还会研究一下 Enumify 这个能够帮助我们使用枚举模式的库 。 实现枚举：第一次尝试 枚举是由一组值组成的类https://fe-tech.viewnode.com/post/202001/10/Fri, 10 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/10/JavaScript 中的数字类型包含整数和浮点数： const integer = 4; const float = 1.5; typeof integer; // => 'number' typeof float; // => 'number' 另外还有 2 个特殊的数字值：Infinity（比其他任何数字都大的数字）和https://fe-tech.viewnode.com/post/202001/08/Wed, 08 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/08/调节器是浏览器中通过限制代码要处理的事件数量来提高性能的常用技术。当你想以受控的速率执行回调时，应该使用调节器，它允许你在每个固定的时间间隔https://fe-tech.viewnode.com/post/202001/07/Tue, 07 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/07/JavaScript 使用原型继承：每个对象都从其原型对象继承属性和方法。 在 JavaScript 中不存在 Java 或 Swift 等语言中所使用的作为创建对象 蓝图的传统类，原型继承仅处理对象。 原型继https://fe-tech.viewnode.com/post/201912/30/Mon, 30 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/30/事件驱动和发布-订阅 事件驱动架构是建立在软件开发中一种通用模式上的，这种模式被称为发布-订阅或观察者模式。 在事件驱动架构中，至少有两个参与者https://fe-tech.viewnode.com/post/201912/11/Wed, 11 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/11/以下是 9 个功能强大的 JavaScript hack 技巧。 1. 全部替换 我们知道 string.replace() 函数仅替换第一次出现的情况。 你可以通过在正则表达式的末尾添加 /g 来替换所有出现的内容。 var example =https://fe-tech.viewnode.com/post/201912/06/Fri, 06 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/06/**什么是 JavaScript？**据 Wikipedia 的描述，它是一种符合 ECMAScript 规范的脚本语言。 ES6，ES7等这些名字你可能听说过，你也很可能已经使用 ES6 有一https://fe-tech.viewnode.com/post/201911/18/Mon, 18 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/18/JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 JavaScript测https://fe-tech.viewnode.com/post/201911/15/Fri, 15 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/15/JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 JavaScript测https://fe-tech.viewnode.com/post/201911/14/Thu, 14 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/14/JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 JavaScript测https://fe-tech.viewnode.com/post/201911/13/Wed, 13 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/13/本文是 JavaScript 测试教程 系列中的第1部分 JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并https://fe-tech.viewnode.com/post/201911/12a/Tue, 12 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/12a/项目链接：https://github.com/kripken/sql.js 对于没有耐心的人，请在这里处尝试Demo：http://kriphttps://fe-tech.viewnode.com/post/201911/12/Tue, 12 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/12/许多 JavaScript 开发人员正在为怎么处理可选值头痛。有什么好办法来最大程度地减少由值（可能为 null、undefined或在运行时未初始化）引起的错误？https://fe-tech.viewnode.com/post/201911/11/Mon, 11 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/11/欢迎来到 Snyk 的 JavaScript 框架状态安全报 告2019。 在此报告中，我们调查了 Angular 和 React 生态系统的安全状态。在这份报告种我们根本没有将它们作为竞争性框架进行比较https://fe-tech.viewnode.com/post/201911/07/Thu, 07 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/07/曾几何时，ES6/ES2015 对 Javascript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器（对象、数组、字符串、集https://fe-tech.viewnode.com/post/201911/04/Mon, 04 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/04/尽管我在过去 7 年中几乎每天都在写 JavaScript 代码，但不得不承认，我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事，但是每年都有稳定的https://fe-tech.viewnode.com/post/201911/01/Fri, 01 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/01/JavaScript回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信，在阅读本文之后，你将能够克服以前使用回调方法遇到https://fe-tech.viewnode.com/post/201910/31/Thu, 31 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/31/介绍 我相信学习新事物并评估我们所知的东西对自己的进步非常有用，可以避免了我们觉得自己的知识过时的情况。在本文中，我将介绍一些常见的 JavaScript 知识。请https://fe-tech.viewnode.com/post/201910/29/Tue, 29 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/29/大量的跨平台应用开发框架，使你可以编写一次代码，然后在 Android，iOS 等多个平台上甚至在台式机上运行。你可能听说过一些流行的框架，例如https://fe-tech.viewnode.com/post/201910/28/Mon, 28 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/28/本文回答了以下问题： 么是共享可变状态？ 为什么会出现问题？ 如何避免其问题？ 标有“（高级）”的部分会更深入，如果你想更快地阅读本文，可以跳过。 什https://fe-tech.viewnode.com/post/201910/24/Thu, 24 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/24/游戏开发并不需要局限于使用 Unity 或 Unreal Engine4 的用户。 JavaScript 游戏开发已经有一段时间了。实际上，最流行的浏览器（例如Chrome，Firefox和Edge）的https://fe-tech.viewnode.com/post/201910/22/Tue, 22 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/22/JavaScript 的很多特性极大地改变了你的编码方式。从 ES2015 及更高版本开始，对我的代码影响最大的功能是解构、箭头函数、类和模块系统。 截至2019年8月，一项新https://fe-tech.viewnode.com/post/201910/21/Mon, 21 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/21/使用箭头语法，你可以定义比函数表达式 短的函数。在某些情况下，你可以完全省略： 参数括号 (param1, param2) return 关键字 甚至大括号 { }。 下面就让我们来探讨一下如何使https://fe-tech.viewnode.com/post/201910/18/Fri, 18 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/18/如果你查看我的常规 JavaScript 代码，会看到到处都有解构。 读取对象属性和访问数组项是常见的操作。结构使这些操作变得更加轻松和简洁。 在本文中，除了基本用法https://fe-tech.viewnode.com/post/201910/17/Thu, 17 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/17/在软件开发中，我认为最需要注意的是： 编码面试 有毒的主管或猪队友 不是 JavaScript，this，CSS，IE 浏览器，而是上述两点！ 如果你参https://fe-tech.viewnode.com/post/201910/15/Tue, 15 Oct 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201910/15/我问一个简单的问题。以下哪个代码片段将会产生错误？ 第一个创建实例，然后定义所用的类： new Car('red'); // Does it work? class Car { constructor(color) { this.color = color; } } 第二个先调用然后定义函数https://fe-tech.viewnode.com/post/201910/14/Mon, 14 Oct 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201910/14/我喜欢 JavaScript 中能够更改函数执行上下文（也称为 this）的特性。 例如，你可以在类似数组的对象上使用数组方法： const reduce = Array.prototype.reduce; function sumArgs() { return reduce.call(arguments, (sum, value) => { return sum += value; }); }https://fe-tech.viewnode.com/post/201909/27/Fri, 27 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/27/TC39异步迭代器提案 将 [for/await/of 引入了 JavaScript](http://thecodebarbarian.com/getting-started- with-async-iterators-in-node-js)，还介绍了异步生成器函数 的概念。现在 JavaScript 有 6https://fe-tech.viewnode.com/post/201909/25/Wed, 25 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/25/在JavaScript中，Map 是存储键/值对的对象。Map 类似于一般 JavaScript 对象 ，但对象与 Map 之间一些关键的差异 使 Map 很有用。 Map 与 Object 如果你要创建一个https://fe-tech.viewnode.com/post/201909/24/Tue, 24 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/24/JavaScript 的应用领域已经从 Web 浏览器扩展到所有需要编程的地方。 Node.js — 用于CLI和服务器。 Electron — 用于跨平台的桌面应用程序。 React native — 用于跨平台的移动应用。 IoT — 低https://fe-tech.viewnode.com/post/201909/23/Mon, 23 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/23/有两个 JavaScript 插件可用于读取和处理 CSV 和 Excel 文件，之后仅对自己的脚本进行编码即可。 CSV 表示 ：用逗号分隔值 这是一种文件格式，用于存储表格数据，如电子表格或https://fe-tech.viewnode.com/post/201909/20/Fri, 20 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/20/介绍 Web 服务器和 HTTP 服务器是无状态的，因此当 Web 服务器将网页发送到浏览器时，连接会被断开，服务器会忘记与用户相关的所有内容。 那么浏览器和 Web 服务器是https://fe-tech.viewnode.com/post/201909/16/Mon, 16 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/16/symbol 是 JavaScript 和 TypeScript 中的原始数据类型，可用于对象属性。与 number 和 string 相比，symbol 具有一些独特的功能，使它脱颖而出。 JavaScript 中的符号 可以用 Symbol() 工厂函数创建符号：https://fe-tech.viewnode.com/post/201909/12/Thu, 12 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/12/使用简单的状态机创建干净且健壮的 UI 使用状态机可以构建健壮的 UI，其好处已有详细的描述—— 例如你可以参见Edward J. Pring 的文章和 David Khourshid 的视频。 另https://fe-tech.viewnode.com/post/201909/11/Wed, 11 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/11/如果你来自传统的强类型语言，可能会很熟悉 void 的概念：一种类型，告诉你函数和方法在调用时不返回任何内容。 void 作为运算符存在于 JavaScript 中，而作为基本类型存https://fe-tech.viewnode.com/post/201908/30/Fri, 30 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/30/测试是什么意思？ 在技​​术术语中测试意味着检查我们的代码是否符合某些预期。例如：给定一些输入，一个名为“transformer”的函数应返回https://fe-tech.viewnode.com/post/201908/27/Tue, 27 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/27/与我使用的其他框架相比，我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL（ JSX 编译为合理的 JavaScript），组件 API 只是通过添加 Reacthttps://fe-tech.viewnode.com/post/201908/26/Mon, 26 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/26/介绍 你是在 Node.js 中操作系统文件，并且需要一种简单的方法来以编程方式重命名文件？ 幸运的是 Node.js 的文件系统 (Fs) 核心模块 实现了内置的方法，可以通过 fs.renam() 和 fs.renameSync() 方法https://fe-tech.viewnode.com/post/201908/23/Fri, 23 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/23/我们都知道 for 循环比 each 或 javascript 函数更快，因为在javascript函数的引擎下可能会使用for循环或其他我不确定的东西。我使用一个对象数组进行了一https://fe-tech.viewnode.com/post/201908/22/Thu, 22 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/22/JavaScript 的特性极大地改变了你的编码方式。从 ES2015 开始，对我代码影响最多的功能是解构、箭头函数、类和模块系统。 截至 2019 年 8 月，一项新提案 optional chaining 达到了第3阶段https://fe-tech.viewnode.com/post/201908/13/Tue, 13 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/13/使用环境变量是配置 Node.js 程序的好方法。而且许多包或模块可以基于不同的 NODE_ENV 变量的值表现出不同的行为。 存储环境变量的一种方法是将它们放在 .env 文件中。这些https://fe-tech.viewnode.com/post/201908/12/Mon, 12 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/12/计算机科学中最常用和讨论最多的数据结构之一是二叉搜索树 。这通常是引入的第一个具有非线性插入算法的数据结构。二叉搜索树类似于双链表，每个节点包https://fe-tech.viewnode.com/post/201908/08/Thu, 08 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/08/**跨框架组件（Cross Framework Component (CFC)）**是一种支持各种框架的基于单个通用模块有效结构。 跨框架组件用到了跨平台的方法。 跨平台是一种允许你https://fe-tech.viewnode.com/post/201908/07/Wed, 07 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/07/我想用 model-view-controller 架构模式在纯 JavaScript 中写一个简单的程序，于是我这样做了。希望它可以帮你理解 MVC，因为当你刚开始接触它时，它是一个难以理解的概念。 我做了这https://fe-tech.viewnode.com/post/201908/06/Tue, 06 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/06/我看到没有多少人谈论改进 JavaScript 代码的实用方法。以下是我用来编写更好的 JS 的一些顶级方法。 使用TypeScript 改进你 JS 代码要做的第一件事就是不写https://fe-tech.viewnode.com/post/201907/30/Tue, 30 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/30/JavaScript 中的 API JavaScript 有许多可用的 API，通常被定义为浏览器 API或第三方 API。我们来分别学习它们。 浏览器 API 浏览器 API 内置于浏览器中 —— 包含来自浏览器的https://fe-tech.viewnode.com/post/201907/24/Wed, 24 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/24/你还记得自己第一次深入挖掘常用的库或框架的源代码时的情景吗？对我而言，那一刻是我三年前作为前端开发人员的第一份工作。 我们刚刚完成了用于创建在https://fe-tech.viewnode.com/post/201907/19/Fri, 19 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/19/日历是我们生活中重要的一部分。在当今世界，人们大多使用网络或移动日历。它们随处可见，包括在各种软件中：预订应用、旅行软件、项目管理、管理面板https://fe-tech.viewnode.com/post/201907/12/Fri, 12 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/12/我在我的 Instagram 上每天都会发布 JavaScript 的选择题，并且同时也会在这个仓库中发布。 从基础到进阶，测试你有多了解 JavaScript，刷新你的知识，或者帮助你https://fe-tech.viewnode.com/post/201907/11/Thu, 11 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/11/在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。 有时我需要创建一个简单的静态 HTML 或登录页面，而且不想引入任何库或其它依赖。对这https://fe-tech.viewnode.com/post/201907/09/Tue, 09 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/09/在本文中，我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗？什么时候使用它们是有意义的？ 当 ECMAScript 5（2009）发布时，gettershttps://fe-tech.viewnode.com/post/201907/04/Thu, 04 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/04/在 JavaScript 中深度克隆对象（及其工作原理） 如果你打算用 JavaScript 进行编码，那么就需要了解对象的工作方式。对象是 JavaScript 最重要的元素之一，深入理解了它会使你在编码时https://fe-tech.viewnode.com/post/201906/18/Tue, 18 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/18/JavaScript 中的数组是什么？ 在开始之前，你需要先了解数组的真正含义。 在 JavaScript 中，数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中，供以https://fe-tech.viewnode.com/post/201906/17/Mon, 17 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/17/你是否写了一个需要接受用户上传图片的 Web 应用，后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题？在网络上处理图像很容易成为一种痛https://fe-tech.viewnode.com/post/201905/16/Thu, 16 May 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201905/16/从Call Stack，Global Memory，Event Loop，Callback Queue到 Promises 和 Async/Await 的 JavaScript引擎之旅！ 你有没https://fe-tech.viewnode.com/post/201905/15/Wed, 15 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/15/ES6 自发布以来为 JavaScript 带来了一些新功能和方法。与 JavaScript 相比，这些功能更好地改善了我们的工作流程。这些新功能包括 Object.freeze() 方法和 const。 一些开发人员尤其是新https://fe-tech.viewnode.com/post/201905/14/Tue, 14 May 2019 11:08:53 +0800https://fe-tech.viewnode.com/post/201905/14/编写算法时，排序是一个非常重要的概念。它有各种各样的种类：冒泡排序、希尔排序、分块排序，梳排序，鸡尾酒排序，侏儒排序 —— 这些可不是我瞎编的 ！https://fe-tech.viewnode.com/post/201905/10/Fri, 10 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/10/插入排序的工作原理是选择当前索引 i 处的元素，并从右向左搜索放置项目的正确位置。 实现插入排序 插入排序是一种非常简单的算法，最适合大部分已经被排https://fe-tech.viewnode.com/post/201905/05/Sun, 05 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/05/闭包是函数创建时作用域内所有变量的集合。要使用闭包，需要在另一个函数中创建一个函数，这种函数被称为嵌套函数。内部函数可以访问外部函数作用域中https://fe-tech.viewnode.com/post/201904/24/Wed, 24 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/24/如何通过了解类型、内存以及低级语言使你成为更好的程序员 像许多开发新手一样，JavaScript 是我学的第一门语言。它是一种 Web 前端编程语言 ——https://fe-tech.viewnode.com/post/201904/19/Fri, 19 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/19/引用自 MDN : falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值. JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为https://fe-tech.viewnode.com/post/201904/17/Wed, 17 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/17/在开始之前，我先普及一些基础知识。Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的，也就是说，它们可以重新被赋值。所https://fe-tech.viewnode.com/post/201904/16/Tue, 16 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/16/对于提高 JavaScript 程序的性能这个问题，最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。 我们将看到 JavaScript 中主https://fe-tech.viewnode.com/post/201904/11/Thu, 11 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/11/JavaScript 原语 JavaScript 建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了，比如字符串和数字： var greet = "Hello"; var year = 89; 字符串和数字是该语言所谓“原语”的一部分https://fe-tech.viewnode.com/post/201904/08/Mon, 08 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/08/解决一个问题可以有很多方法，但是有些方法很复杂，甚至有些是荒谬的。在本文中，我想谈谈解决一个问题时的好方案和坏方案。 #1 让我们先从怎样删除数组https://fe-tech.viewnode.com/post/201904/02/Tue, 02 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/02/作用域决定了变量的生命周期和可见性，变量在作用域范围之外是不可见的。 JavaScript 的作用域包括：模块作用域，函数作用域，块作用域，词法作用域和全局作用域https://fe-tech.viewnode.com/post/201903/28/Thu, 28 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/28/什么是 DOM？ 基本上网页由 HTML 和 CSS 文档组成。浏览器用于创建文档的描述被称为文档对象模型（DOM）。它使 Javascript 能够访问和操作页面的元素和样式。该模型https://fe-tech.viewnode.com/post/201903/25/Mon, 25 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/25/你的程序有多么依赖数据？即使应用程序不完全面向业务，你也可能需要管理面板、仪表板、性能跟踪以及用户非常喜欢的类似分析功能的数据。 对于 JS 开发人https://fe-tech.viewnode.com/post/201903/19/Tue, 19 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/19/当我想要在网上找一个简洁的 Javascript 动效库时，总是发现很多“推荐”的库都是缺乏持续维护的。 经过一番研究，我收集了 11 个最好的库，你可以用在自己的项目中https://fe-tech.viewnode.com/post/201903/17/Sun, 17 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/17/三十天写三十个网站的挑战来自JavaScript30 ，连续三十天每天用原生的 JavaScript 写一个小网站或是一个特定主题的练习。 上个学期用 JavaScript 写了一些好玩的https://fe-tech.viewnode.com/post/201903/15/Fri, 15 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/15/高阶函数 接受和/或返回另外一个函数的函数被称为高阶函数。 之所以是高阶，是因为它并非字符串、数字或布尔值，而是从更高层次来操作函数。漂亮的元。https://fe-tech.viewnode.com/post/201903/13/Wed, 13 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/13/ECMAScript 每年都会发布一个新版本，其中的提案是已经正式通过的，并分发给开发者和用户。本文将讨论该语言的最新版本，以及它又具有了什么新功能。 ES10/ES2019 在本次更https://fe-tech.viewnode.com/post/201903/10/Sun, 10 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/10/怎样用原生 JavaScript 生成表格需？本文告诉你答案！ 这是一个刷 JavaScript 经验值的好机会：在技术面试中出现的最多的一个问题就是怎样用原生 API 操作 DOM。 在下面的教程https://fe-tech.viewnode.com/post/201903/05/Tue, 05 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/05/不管你是面试官还是求职者，里面的思路都能让你获益匪浅。 单体应用和微服务架构之间有哪些主要区别，从灵活性和可扩展性的角度来看，哪个是更好选择？https://fe-tech.viewnode.com/post/201902/28/Thu, 28 Feb 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201902/28/在本文中，我们将介绍两种提取循环内数据的方法：内部迭代和外部迭代。 循环 举个例子，假设有一个函数 logFiles()： const fs = require('fs'); const path = require('path'); function logFiles(dir) { forhttps://fe-tech.viewnode.com/post/201902/22/Fri, 22 Feb 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201902/22/创建数组的最佳方法是通过字面方式： const arr = [0,0,0]; 不过这并不是长久之计，比如当我们需要创建大型数组时。这篇博文探讨了在这种情况下应该怎么做。 没有空洞https://fe-tech.viewnode.com/post/201902/19/Tue, 19 Feb 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201902/19/React Context API 现在已经成为一个实验性功能，但是只有在 React 16.3.0 中才能用在生产中。本文将向你展示两个基本的 Web 商店应用程序，一个使用了 Context API 进行构建，另一个则不https://fe-tech.viewnode.com/post/201902/18/Mon, 18 Feb 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201902/18/摘要：如果你曾用 JavaScript 做过复杂的文本处理和操作，那么你将会对 ES2018 中引入的新功能爱不释手。 在本文中，我们将详细介绍第 9 版标准如何提高 JavaScript 的文本处理能力https://fe-tech.viewnode.com/post/201902/15/Fri, 15 Feb 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201902/15/摘要：本文着眼于使用具有内置功能和样式的组件来扩充HTML。 我们还将学习如何通过 NPM 使这些自定义元素在项目中得到重用。 即便是最简单的组件，人力https://fe-tech.viewnode.com/post/201902/14/Thu, 14 Feb 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201902/14/API 在执行过程中的一个基本任务是数据验证。 在本文中，我想向你展示如何为你的数据添加防弹验证，同时返回风格良好的格式。 在 Node.js 中进行自定义数据验证既https://fe-tech.viewnode.com/post/201902/01/Fri, 01 Feb 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201902/01/本教程使用了HTML5，CSS3和JavaScript的基本的技术。 我们将讨论数据属性、定位、透视、转换、flexbox、事件处理、超时和三https://fe-tech.viewnode.com/post/201901/25/Fri, 25 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/25/持续传递风格( CPS)是起源于20世纪70年代的一种编程风格，它在20世纪80和90年代成为高级程序设计语言中的特色之一。 现在，CPS作为非https://fe-tech.viewnode.com/post/201901/22/Tue, 22 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/22/可以在 Javascript 的异步函数中抛出错误吗？ 这个话题已被反复提起过几百次，不过这次让我们从TDD的角度来回答它。 如果你能不在Stackoverflow上https://fe-tech.viewnode.com/post/201901/21/Mon, 21 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/21/渲染SVG图像可能会非常慢 在转换 SVG 图像时，浏览器会试着在每一帧上进行渲染，以便使图像尽可能的清晰。 不幸的是，SVG渲染可能会很慢，特别是对于https://fe-tech.viewnode.com/post/201901/18/Fri, 18 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/18/摘要 在本文中你将了解Awwwards网是怎样实现动画的。 本文介绍了HTML5 SVG中的circle 元素，它的stroke属性，以及如何使用Chttps://fe-tech.viewnode.com/post/201901/17/Thu, 17 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/17/几个星期前，我们开始了一系列旨在深入挖掘 JavaScript 及其工作原理的系列：通过了解JavaScript的构建模块以及它们如何共同发挥作用，你将能够编写更https://fe-tech.viewnode.com/post/201901/15/Tue, 15 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/15/随着JavaScript变得越来越流行，越来越多的团队正在利用他们为技术栈中做多个级别的支持：前端、后端、混合应用、嵌入式设备等等。 本文旨在https://fe-tech.viewnode.com/post/201901/11/Fri, 11 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/11/随着 JavaScript 使用的不断增加，异步事件驱动的应用程序变得越来越流行。 但是，许多开发者经常面临的一个问题是：在异步环境中进行依赖于结果的操作。 你可能经https://fe-tech.viewnode.com/post/201901/09/Wed, 09 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/09/Undefined 这个概念听起来很简单，不过你知道应该怎样检查JavaScript中的变量或属性是否真的存在吗？ 做这件事最好的方法是什么？ 我们如何涵盖所有的https://fe-tech.viewnode.com/post/201901/04/Fri, 04 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/04/在本文中，我将深入探讨JavaScript的最基本部分之一，即Execution Context(执行上下文)。 在本文结束时，你应该对解释器了https://fe-tech.viewnode.com/post/2018/1227/Thu, 27 Dec 2018 11:00:00 +0800https://fe-tech.viewnode.com/post/2018/1227/Array 类型检测 function foo(obj) { // … } 假设obj是一个数组，我们想要实现一些功能。比如 JSON.stringify就是一个例子，它以不同的方式把数组输出到其https://fe-tech.viewnode.com/post/2018/1226/Wed, 26 Dec 2018 11:00:00 +0800https://fe-tech.viewnode.com/post/2018/1226/在编写异步函数时，await 、 return与return await之间存在差异，选择正确的处理方式非常重要。 让我们先从这个异步函数开始： async functionhttps://fe-tech.viewnode.com/post/2018/1129/Thu, 29 Nov 2018 11:00:00 +0800https://fe-tech.viewnode.com/post/2018/1129/我们很难及时得知JavaScript（ECMAScript）中的最新功能，同时找到相关的示例代码更加困难。 为了解决这个问题，我将在本文中介绍