https://fe-tech.viewnode.com/post/Recent content in Posts on 疯狂的技术宅Hugo -- gohugo.iozh-CNSun, 01 May 2022 12:00:00 +0800https://fe-tech.viewnode.com/post/top/Sun, 01 May 2022 12:00:00 +0800https://fe-tech.viewnode.com/post/top/以前出于工作目的，编写和翻译了大量的技术文章，以前端为主，删掉了过时的、毫无营养的内容，留下的都是精华。 我的 github 请扫码关注微信公众号：充实的脑https://fe-tech.viewnode.com/post/202106/21/Mon, 21 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/21/在构建响应式网站时，我们需要在不同大小的屏幕下对其进行测试，来确保页面布局在这些屏幕上正确渲染。当然我们可以很方便的使用 screen-size 和 Chrome 中的设备模拟器https://fe-tech.viewnode.com/post/202106/18/Fri, 18 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/18/相信大家在求职的时候，经常会看到 JD 中有“熟悉后端或服务端开发经验优先”这样的字眼，比如某节招聘前端的 jd。。。 可能不少前端会感到奇怪，现在前https://fe-tech.viewnode.com/post/202106/15/Tue, 15 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/15/大家都不喜欢等待页面的长时间加载。看一下 Google 在 2017 年的统计数据就可以知道加载时间和跳出率的关联。 如果给你的网站添加视觉反馈很容易留住用户，因为这https://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/09/Wed, 09 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/09/作为一个 Vue 搬砖工，我一直在为 Vue 开发寻找合适的 VS Code 扩展。以下是一些好用的扩展，可以让我们在搬砖时更加轻松。 Vetur 链接：https://markethttps://fe-tech.viewnode.com/post/202106/07/Mon, 07 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/07/Vue 中的 v-for 循环允许你在模板代码中编写 for 循环，尤其是当我们做下面的操作时非常有用： 渲染数组或列表 遍历对象属性 在最基本的用法中，v-for 循环是这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/202106/01/Tue, 01 Jun 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202106/01/在 Vue 中，指令是用来直接编辑 DOM 的一种好方法。你肯定熟悉 vue 中的 v-if, v-show, v-bind 这些指令。 vue 自定义指令是，正如你可能猜到的那样，Vue的方式让我们为我们的项https://fe-tech.viewnode.com/post/202105/31/Mon, 31 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/31/Suspense 组件是 Vue3 中众所周知的特征之一。它可以使我们的 vue 程序在等待异步组件时渲染一些后备内容，从而使用户产生平滑流畅的体验。 Suspense 组件很容易理解，也不需https://fe-tech.viewnode.com/post/202105/30/Sun, 30 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/30/让我们以 JS 程序员的身份学习 Dart 语言：深入研究 OOP、类、继承和 mixins、异步、回调、async/await 和流。 本文针对那些了解 Reacthttps://fe-tech.viewnode.com/post/202105/28/Fri, 28 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/28/添加拖放功能是使你的程序更加自然和友好的方法。尽管有一些提供拖放功能的库，但是了解它们在底层的工作原理是非常有意义的。 在本文中，我们将用内置https://fe-tech.viewnode.com/post/202105/27/Thu, 27 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/27/在做项目时，经常需要添加标签内容的功能。这是通过标签输入完成的，标签输入是一种收集信息并创建流畅的用户体验的元素。 本文实现一个可重用的 Vue 标签https://fe-tech.viewnode.com/post/202105/26/Wed, 26 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/26/使用 Provide 和 Inject 的 Vue依赖项注入对于构建Vue3插件或避免 prop 钻取非常有用。 尽管不常用，但是你可以仅使用两种内置方法来实现依赖项注入：providhttps://fe-tech.viewnode.com/post/202105/25/Tue, 25 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/25/包装器组件非常有用，可以使你的代码库更有条理、更专业。 包装器组件是通过添加某些自定义功能、样式或其他功能来修改原生元素或第三方库的自定义组件https://fe-tech.viewnode.com/post/202105/21/Fri, 21 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/21/随着新版本的Vue3现在，开始学习新的更新如何改变我们编写代码的方式是有用的。一个示例是我们编写index.js文件方式的更改（处理创建我们https://fe-tech.viewnode.com/post/202105/20/Thu, 20 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/20/门户（Portal）的概念是Vue3的新功能之一，也就是将模板 HTML 移至 DOM 的不同部分的方法。 Portal 是 React 中的常见功能，Vue2 的 portal-vue 库也提供了相似的功能https://fe-tech.viewnode.com/post/202105/19/Wed, 19 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/19/在 Vue 中，插槽（Slots）是组件将内容“注入”到子组件的另一种方式。是使用模板代码来完成的。 在最终输出时，插槽的执行与 Vue 中的 prop 类似的功能——https://fe-tech.viewnode.com/post/202105/18/Tue, 18 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/18/Axios 是 Javascript 中最受欢迎的 HTTP 库之一，我们可以用它在 Vue 程序中调用API。 在本文中我们用 Vue 3 和 Axios 写一个侃爷语录小应用，侃爷是国内粉丝对美国当红饶舌歌手 Kanyehttps://fe-tech.viewnode.com/post/202105/17/Mon, 17 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/17/Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。 可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当，可以使你的程序显得https://fe-tech.viewnode.com/post/202105/14/Fri, 14 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/14/https://learnvue.co/2021/05/build-vue-3-desktop-apps-in-just-5-minutes-vite-electron-quick-start-guide/ 在本文中，我们将研究如何通过 Vite 开发 Vue 3 桌面项目。 在项目中会用到 Electron ， 一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。 因https://fe-tech.viewnode.com/post/202105/13/Thu, 13 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/13/基本概念 二叉堆（Binary Heap）实际上是一个完全二叉树或是近似完全二叉树，也就是每一个节点下面最多只会有两个字节点，也有可能是一个或没https://fe-tech.viewnode.com/post/202105/12/Wed, 12 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/12/有时我们需要即时动态的创建 HTML 文档，无论是目标页，还是显示确定的页面，或者是包含整个页面的 iframe，如果文档足够简单，则可以轻松地将其放在https://fe-tech.viewnode.com/post/202105/08/Sat, 08 May 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202105/08/前言 大家在写代码时都会遇到所谓的浮点误差，如果你还没踩过浮点误差的坑，只能说你太幸运了。 以下图的 Python 为例， 0.1 + 0.2 并不等于 0.3，8.7 / 10 也不https://fe-tech.viewnode.com/post/202104/29/Thu, 29 Apr 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202104/29/箭头函数 ES6 引入了箭头函数的概念，这是一种新的定义和编写函数的方法。虽然它看起来像是常规函数的句法糖，但它们之间的关键差异是对 this 的绑定方式。在https://fe-tech.viewnode.com/post/202104/28/Wed, 28 Apr 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202104/28/为什么在构建 Web 应用时对架构的选择非常重要？决定架构好坏的标准什么？ 为什么在构建 Web 应用时架构的选择是如此的重要？确定架构是好是坏的标准是什么？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/202104/23/Fri, 23 Apr 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202104/23/Enum Enum 是在 TypeScript 中新增的语法，也叫做枚举，一般用它来管理多个相同系列的常量（即不能被修改的变量），用于状态的判断。 在 Web 中比较常见的状态判断，是在处https://fe-tech.viewnode.com/post/202104/22/Thu, 22 Apr 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202104/22/一些不好记却很好用的 CSS 属性 前言 在写过一点时间 CSS 之后，大家对于常见的属性应该都很熟了，例如最基本的 display、position、paddihttps://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/25/Thu, 25 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/25/前言 做为一个前端程序猿，肯定应该知道很多与前端相关的知识，像是 HTML 或是 JS 相关的东西，但这些通常都与“使用”有关。例如说我知道写 HTML 的时候要语义化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/17/Wed, 17 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/17/什么是静态网站生成器？ 简简单的说，静态网站生成器会获取你的内容，并将其应用于模板，然后生成基于 HTML 的静态网站。非常适合个人博客。 好处： 快速部署https://fe-tech.viewnode.com/post/202103/16/Tue, 16 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/16/有很多原因会导致 Node.js 进程终止。其中一些是可以避免的，例如抛出错误时，而另一些是无法防止的，例如内存不足。全局 process 是一个 Event Emitter 实例，当执行正常退出时https://fe-tech.viewnode.com/post/202103/15/Mon, 15 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/15/Sass / SCSS简介 Sass 是 CSS3 的扩展，添加了嵌套规则、变量、mixins、选择器继承等。可以用命令行工具或网络框架插件将其转换为格式良好的标准 CSShttps://fe-tech.viewnode.com/post/202103/12/Fri, 12 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/12/网站或网页的效率在很大程度上取决于测试，并且涉及对网站或相关软件的细致检查。那么我们如何该测试 Web 程序呢？在探究 Web 程序测试服务的更多细节之前，https://fe-tech.viewnode.com/post/202103/11/Thu, 11 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/11/本文源代码: https://github.com/lhbizarro/infinite-circular-webgl-gallery/archive/master.zip 在本文中，我们将基于 WebGL 与 OGL 来实现一个无限循环画廊。 本文中所用到的大多数套路也可以用在其他 WebGL 库中，例如 Three.js 或 Babylon.js 中，但是需要一些小小https://fe-tech.viewnode.com/post/202103/10/Wed, 10 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/10/Web 安全已经是 Web 开发中一个重要的组成部分，而许多程序猿往往希望专注于程序的实现，而忽略了信息安全的实质。如果没有严谨地考虑到信息安全问题，等出https://fe-tech.viewnode.com/post/202103/09/Tue, 09 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/09/绑定到字节码 对于现代 Web 程序，浏览器首先看到的 JavaScript 通常不是前端程序员写的。相反，它很可能是由 webpack 之类的工具产生的捆绑包，而且可能是一个相当大的捆绑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/04/Thu, 04 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/04/从 10.0.0 版开始，异步迭代器就出现在 Node 中了，在本文中，我们将讨论异步迭代器的作用，以及它们可以用在什么地方。 什么是异步迭代器 异步迭代器实际上是以前https://fe-tech.viewnode.com/post/202103/03/Wed, 03 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/03/在 JavaScript 中，this 是函数调用上下文。正是由于 this 的行为很复杂，所以在 JavaScript 面试中，总是会问到有关 this 的问题。 做好的准备面试的方法是练习，所以本文针对 thishttps://fe-tech.viewnode.com/post/202103/02/Tue, 02 Mar 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202103/02/简述 ES2021（ES12）将于 2021 年中发布。在本文中，你将将会了解五个最有趣的功能：String.prototype.replaceAll(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/27/Sat, 27 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/27/看上去 promise.prototype.then() 和 promise.prototype.finally 似乎非常相似。但是你需要明白它们有一些重要的差异。 第一个也最明显的是 finally() 没有得到 promise 链的结果。由于 finally() 没有收到值，因此无法更改 promise 的已解https://fe-tech.viewnode.com/post/202102/26/Fri, 26 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/26/每个 JavaScript 程序员都必须知道闭包是什么。在 JavaScript 面试中，你很可能会被问到闭包的概念。 以下是 7 个有关 JavaScript 闭包的面试题，比较有挑战性。 不要查看答案或运行代码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/23/Tue, 23 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/23/IDE与代码编辑器 首先我们应该分辨 IDE 和代码编辑器之间的区别。 简单的说，IDE 是一组集成在一起的工具：文本编辑器、编译器、构建或进行集成、调试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/15/Mon, 15 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/15/JavaScript, Node, Debugging 从 v 6.3.0 开始，可以用 Chrome Developer Tools 调试 Node.js。以下是操作步骤： 在自己的机器上安装 Node.js v6.3.0 或更高版本。 使用 --inspect-brk 标志运行 node（例如：node --inspect-brkhttps://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/10/Wed, 10 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/10/近几年 TypeScript 和 JavaScript 一直在稳步发展。我们在过去写代码时养成了一些习惯，而有些习惯却没有什么意义。以下是我们都应该改正的 10 个坏习惯。 1.不使用 strict 模式 这https://fe-tech.viewnode.com/post/202102/08/Mon, 08 Feb 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202102/08/响应式 Web 设计旨在为各种设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的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/22/Fri, 22 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/22/在2019年3月，受到 NearForm 和 Protocol Labs 的支持，我开始为 Node.js 实现 QUIC 协议 支持。这个基于 UDP 的新传输协议旨在最终替代所有使用 TCP 的 HTTP 通信。 熟悉 UDP 的人可能会产生质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/18/Mon, 18 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/18/我们可以凭借 FFmpeg 的 WebAssembly 版直接在浏览器中运行这个能强大的视频处理工具。在本文中，我们来探索一下 FFmpeg.wasm ，并写一个简单的代码转换器，把数据流传输到视频元素https://fe-tech.viewnode.com/post/202101/15/Fri, 15 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/15/文档对象模型（DOM）是将 HTML 或 XML 文档视为树结构的接口，其中每个节点（node）都是文档的对象。 DOM 还提供了一组用于查询树、修改结构和样式的方法https://fe-tech.viewnode.com/post/202101/14/Thu, 14 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/14/先看下面这道面试题： let counter = 0; const increment = new Promise(resolve => { counter++; resolve(); }); await increment; await increment; console.log(counter); // 结果是什么？ 你认为 counter 的值是什么？ 什么是 promise ？这是否意味着“稍后再做”？ 实际上应该把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/202101/08/Fri, 08 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/08/拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。 在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项https://fe-tech.viewnode.com/post/202101/07/Thu, 07 Jan 2021 10:00:00 +0800https://fe-tech.viewnode.com/post/202101/07/每次 Apple 的新品发布活动都吸引了很多目光，但是 2020 MacBook Air，MacBook Pro 和 Mac Mini 的发布不仅仅是新功能和时尚的工业设计。重大新闻隐藏在了新 MacBook 的阳极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/29/Tue, 29 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/29/随着对 JavaScript 框架和库的依赖越来越深，很多人对 HTML 的重视程度降低了。这就导致了我们无法充分利用 HTML 的很多功能，这些功能可以大大的增强网站功能。另外通过https://fe-tech.viewnode.com/post/202012/23/Wed, 23 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/23/TypeScript 是一种类型化的语言，允许你指定变量、函数参数、返回的值和对象属性的类型。 以下是 TypeScript 高级类型的使用方法总结，而且带有例子。 Intersection 类型 Intersection 类型是一种把https://fe-tech.viewnode.com/post/202012/22/Tue, 22 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/22/要说到 gulp 的运作方式，就不得不提到 vinyl 和 Node.js 的 stream vinyl vinyl 是 gulp 所使用的虚拟的文件格式，在它的自述文件是这么说的：“当提到文件时你首先想到的是什么？肯定是https://fe-tech.viewnode.com/post/202012/21/Mon, 21 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/21/2020 年的Chrome 开发者峰会和往年有所不同，今年是在线上召开的，每次谈话大约十分钟，讨论规模更大。虽然我没有在第一时间观看会议的直播，但是看https://fe-tech.viewnode.com/post/202012/18/Fri, 18 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/18/对于咱们前端打工人来说， git 是工作中常用的一种基本工具，可能有一些人不喜欢用命令行操作 git，总是想要带图形界面的工具，当然能提供深色主题那就https://fe-tech.viewnode.com/post/202012/17/Thu, 17 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/17/在前文《babel是怎样工作的 》中介绍了 Bable 中的的AST，这次咱们给 bable 写一个插件，文中会覆盖大部份的用法，如果你对某些细节不是很明白，可以去看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/14/Mon, 14 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/14/JavaScript中的 console 对象可用于访问浏览器调试控制台，可以用它在控制台中输出代码中变量的值。 不过很多人都只用 console.log() 在浏览器控制台中进行输出调https://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/202012/07/Mon, 07 Dec 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202012/07/babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。 转换成AShttps://fe-tech.viewnode.com/post/202011/30/Mon, 30 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/30/讲给前端的网络安全（3）： 网络模型与攻击手段 这次基于 OSI 和 TCP/IP 这两个模型来介绍可能发生的攻击手段 讲给前端的网络安全（1）：浏览器与网络的那些事 讲https://fe-tech.viewnode.com/post/202011/27/Fri, 27 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/27/eslint 是很有名的 linter，地球上每一个 JavaScript 程序员都应该知道。 linter 是一种代码静态分析工具，它可以帮你找到代码中可能存在的错误与 bug，也能找出代码https://fe-tech.viewnode.com/post/202011/23/Mon, 23 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/23/讲给前端的网络安全（2）： 互联网的构成 上次讲到了浏览器在网络层面上发生的事，这次对互联网的结构做一些介绍。 讲给前端的网络安全（1）：浏览器与https://fe-tech.viewnode.com/post/202011/20/Fri, 20 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/20/通常 web 安全指的是 HTTP 协议上层的安全，如果再往 HTTP 底层探索的话，还有许多值得注意和研究的东西。 本系列将会从互联网的基础即物理层开始，一路到应用层的https://fe-tech.viewnode.com/post/202011/19/Thu, 19 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/19/在 Chrome 的 DevTools 中的控制台提供了一些 Debug 专用的函数，每一个都身怀绝技。 Console Utility Functions 这些函数只能用在 Chrome 的 console 中。当我在第一次看到这些函数时非常兴奋，把它们直接写https://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/09/Mon, 09 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/09/介绍 在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。 在 ES6 中引入了 Promise 作为这些问题的解决方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/03/Tue, 03 Nov 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202011/03/如果你在开发网站时曾经尝试通过框架或是浏览器的 fetch、XHR 请求过外部 API 的话，那么一定遇到过跨域请求，还有那个触目惊心的 CORS 错误信息；今天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/30/Fri, 30 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/30/在Web开发中，异步事件是项目必然需要处理的一个环节，也因为前端框架的兴起，通过框架实现的 SPA 已经是快速建构网站的标配了，一部获取数据也就成了https://fe-tech.viewnode.com/post/202010/29/Thu, 29 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/29/常见的网站安全问题 经过一番 996，精心打造的网站眼看就要部属上线了，但在网站正式上线之前，你有没有想过自己的网站是否安全吗？尽管你的网站用了https://fe-tech.viewnode.com/post/202010/28/Wed, 28 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/28/事件 在网页中，如果想与使用者进行“互动”，必须要通过某种方法知道他都做了什么。当然，浏览器开发者们早已根据 W3C 事件规范 实现好了底层的逻辑，我们https://fe-tech.viewnode.com/post/202010/27/Tue, 27 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/27/现代网站越来越多的使用前后端分离架构，先用前端 MVC 框架快速堆砌出 SPA，再用 API 获取动态数据也已经成为日常的开发内容；而用来连接前后端的 API，https://fe-tech.viewnode.com/post/202010/26/Mon, 26 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/26/身为一个前端码农，在开发中遇到凡是需要与用户互动或是需要由用户触发的功能，总是离不开事件处理。 今天聊聊浏览器的 DOM 事件传递机制。 DOM 事件 在浏览器https://fe-tech.viewnode.com/post/202010/23/Fri, 23 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/23/在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译https://fe-tech.viewnode.com/post/202010/21/Wed, 21 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/21/浅析script 标签的 async 和 defer 属性 前端当然要从 HTML 开始，这次来聊聊在 script 标签中加上 async/defer 时的功能及差异。 都明白的道理 我们都知道，浏览器解析 HTML 是一行一行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/19/Mon, 19 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/19/CSS 框架之所以出色是有很多原因的：比如代码更容易理解、Web 应用更容易维护、简化实现原型时的步骤等。一般来说在 VUE 中集成 CSS 框架的方法是相同的，本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/15/Thu, 15 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/15/在本教程中我们学习 Node.js 的原生 EvenEmitter 类。学完后你将了解事件、怎样使用 EvenEmitter 以及如何在程序中利用事件。另外还会学习 EventEmitter 类从其他本地模块扩展的内容，并通过一些https://fe-tech.viewnode.com/post/202010/14/Wed, 14 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/14/如果用 create-react-app 构建一个程序，并且在本地运行，默认情况下会用 HTTP 协议为该程序提供服务。 而在生产环境中运行的程序都用 HTTPS 进行服务。 尽管说把 HTTPS 配置出来非常简https://fe-tech.viewnode.com/post/202010/13/Tue, 13 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/13/介绍 在本文中，我们将研究怎样用 Express 配置 CORS 以及根据需要定制 CORS 中间件。 什么是CORS CORS 是“跨域资源共享”的简写。它是一种允许或限制向 Web 服务器上请求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/202010/10/Sat, 10 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/10/本文列举出 50 个能够帮你提高开发效率，节省开发时间的 Chrome 扩展和 Web 应用，它们很有可能会在什么时候派上用场。老规矩，先转发、点赞、点再看三连，最后再https://fe-tech.viewnode.com/post/202010/09/Fri, 09 Oct 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202010/09/简介 通常用 Vue.js 编写单页应用（SPA）时，当加载页面时，所有必需的资源（如 JavaScript 和 CSS 文件）都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。https://fe-tech.viewnode.com/post/202009/30/Wed, 30 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/30/Single SPA Single SPA 是一个用于前端微服务的 javascript 框架。 它使你可以在单页应用中使用多个框架，这样就可以按功能拆分代码，并 能使 Angular、React、Vuehttps://fe-tech.viewnode.com/post/202009/29/Tue, 29 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/29/yargs yargs 是一个用来处理命令行参数的包，可以帮你处理自行设置的命令行标志和输入的任何类型的数据，其中包括布尔值、浮点数和字符串等。这个包非常简单明https://fe-tech.viewnode.com/post/202009/28/Mon, 28 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/28/在本文中我们来研究怎样用 TensorFlow.js 创建基本的 AI 模型，并使用更复杂的模型实现一些有趣的功能。我只是刚刚开始接触人工智能，尽管不需要深入的人工智能知识，https://fe-tech.viewnode.com/post/202009/27/Sun, 27 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/27/前几天我们在《浅析常见的算法范式 》中讨论了一些常见的算法范式，但是还留下了回溯算法没有解决。本文来研究回溯算法。 回溯是通过逐步构建解决方案来https://fe-tech.viewnode.com/post/202009/25/Fri, 25 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/25/1. 生成指定区间内的数字 有时候需要创建在某个数字范围内的数组。比如在选择生日时。以下是最简单的实现方法。 let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); // [ 1900, 1901, ..., 2000] // 也https://fe-tech.viewnode.com/post/202009/23/Wed, 23 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/23/介绍 JavaScript 是一种动态类型的语言，这意味着解释器是在运行时确定变量类型的。这允许我们可以用同一变量中存储不同类型的数据。但是如果没有文档和保持一致https://fe-tech.viewnode.com/post/202009/22/Tue, 22 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/22/首先明确三个概念： 算法： 按步骤解决问题的过程。 范式： 思考问题的模式。 算法范式： 为问题构建高效解决方案的常规方法。 本文讨论一些常用的算法范式，https://fe-tech.viewnode.com/post/202009/18/Fri, 18 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/18/这道题的答案有点复杂。 首先要搞清楚 element 和 component 是不是一回事？ 从技术上来说，ReactDOM 不会在 DOM 中渲染 React 组件或 React 元素。它渲染由其组件实例支持的 DOMhttps://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/10/Thu, 10 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/10/Vuex 是一把双刃剑。如果使用得当，使用 Vue 可以使你的工作更加轻松。如果不小心，它也会使你的代码混乱不堪。 使用 Vuex 之前，你应该先了解四个主要概念：sthttps://fe-tech.viewnode.com/post/202009/09/Wed, 09 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/09/先简要介绍一下面向对象和函数式编程。 两者都是编程范式，在允许和禁止的技术上有所不同。 有仅支持一种范式的编程语言，例如 Haskell （纯函数式）。 还有支持https://fe-tech.viewnode.com/post/202009/08/Tue, 08 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/08/本文继续 “WebGL 的第一步 ” 中的内容，上一篇文章中我讲述了 WebGL是什么以及它是如何工作的，包括：shader、program、缓冲区、https://fe-tech.viewnode.com/post/202009/07/Mon, 07 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/07/在本文中，我们将了解什么是 WebGL，以及如何通过与 GPU 进行对话来绘制“三角形”。尽管有更好的方法来实现本文中的例子，例如用具有 2d 上下文的 canvas 甚https://fe-tech.viewnode.com/post/202009/04/Fri, 04 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/04/当我第一次看到 async/await 的描述时有点困惑，直到我了解了 async/await 的出处，才领悟到它的价值。本文我们来讨论 javascript 世界中最先进的异步编程思想之一。 什么是异步函数 javascript 中https://fe-tech.viewnode.com/post/202009/02/Wed, 02 Sep 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202009/02/介绍 这是一些精心挑选的在线工具，这些工具都经过了测试，我发现它们非常有用，并与大家分享。 背景 1. SVG BACKGROUNDS 与PNG、JPG 或 GIF一样，SVG 图像也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/28/Fri, 28 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/28/生成器函数在 JavaScript 中的出现早于引入 async/await，这意味着在创建异步生成器（始终返回 Promise 且可以 await 的生成器）的同时，还引入了许多需要注意的事https://fe-tech.viewnode.com/post/202008/27/Thu, 27 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/27/优化网站的性能需要花费大量的时间，并且如果要根据自己的需求进行优化则花费的时间可能更多。 在本文中，我将向你展示 10 个快速优化 Web 性能的手段，能在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/21/Fri, 21 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/21/本文列出了精心挑选的清单，其中包含精美且免费的 UI 套件，这些套件可以直接从 Github 下载源代码。 Jinja版本由 AppSeed 提供，该平台使用自动化工具生成简单的https://fe-tech.viewnode.com/post/202008/20/Thu, 20 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/20/在本文中我精心挑选出了 14 个最好的免费图标网站，使你不必再去四处寻找资源。 LineIcons 网址：https://lineicons.com/ LineIcons 是 2020 年最好的免https://fe-tech.viewnode.com/post/202008/19/Wed, 19 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/19/Deno 是基于 Web 技术的服务器端代码执行环境。 Node 使用 JavaScript 与 commonjs 模块，并把 npm/yarn 作为其包管理器。 Deno 使用 Typescript 或 JavaScript， 以及现代的 javascript 导入语句。它不需要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/14/Fri, 14 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/14/在调试程序时总是会遇到各种挑战。 Node.js 的异步工作流为这一艰巨的过程增加了额外的复杂性。尽管 V8 引擎为了方便访问异步栈跟踪进行了一些更新，但是在很多https://fe-tech.viewnode.com/post/202008/13/Thu, 13 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/13/你听到过这样的对话吗？ 程序猿1：在我的计算机上不能用 😒 程序猿2：在我这里好好的啊 🤨 这种对话很常见。这一般是由于工作环境设置或配置不同而引起的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/202008/06/Thu, 06 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/06/Node.js 的创建者 Ryan Dahl 创建了一个用于设计 Web 应用程序的新框架。他回过头来，利用在最初编写 Node 时还不可用的新技术，纠正了事后发现的一些错误。这就是 Deno （发音https://fe-tech.viewnode.com/post/202008/05/Wed, 05 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/05/Working with Zip Files in Node.js Zip文件是常用的压缩文件格式。在本文中，我将演示如何用 adm-zip npm模块 创建和提取zip文件。 创建一个Zip文件 从 adm-zip 的 npm 模块中导出一https://fe-tech.viewnode.com/post/202008/04/Tue, 04 Aug 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202008/04/DevTools 是开发和测试 Web 应用时最有用的工具之一。在Chrome 85 中，DevTools 做了一些改进，例如： Network 面板的 Timing 选项卡现在增添了 respondWith 事件，该事件记录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/202007/21/Tue, 21 Jul 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202007/21/队列是 Node.js 中用于有效处理异步操作的一项重要技术。 在本文中，我们将深入研究 Node.js 中的队列：它们是什么，它们如何工作（通过事件循环）以及它们的类型。 Node.jshttps://fe-tech.viewnode.com/post/202007/14/Tue, 14 Jul 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202007/14/现代 OpenGL（以及名为WebGL的扩展）与我过去学习的传统 OpenGL 有很大不同。我了解栅格化的工作原理，所以对这些概念很满意。但是我所阅读的每篇https://fe-tech.viewnode.com/post/202007/06/Mon, 06 Jul 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202007/06/能够构建出色的单页应用程序（SPA）是 Vue.js 最具有吸引力的功能之一。 SPA 非常好，因为它们不需要在每次更改路由时都去加载页面。这就意味着一旦加载了全https://fe-tech.viewnode.com/post/202006/23/Tue, 23 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/23/自 Hook 被引入 React 以来，Context API 与 Hook 库在应用状态管理中被一起使用。但是把 Context API 和 Hooks（许多基于 Hooks 的状态管理库建立在其基础上）组合的用法https://fe-tech.viewnode.com/post/202006/22/Mon, 22 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/22/本文讲解怎样用 Node.js 高效地从 Web 爬取数据。 前提条件 本文主要针对具有一定 JavaScript 经验的程序员。如果你对 Web 抓取有深刻的了解，但对 JavaScript 并不熟悉，那么本文仍然能够https://fe-tech.viewnode.com/post/202006/16/Tue, 16 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/16/创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时，select 元素的作用非常有限。如果用 Vue 来构建我们的应用，则可以用一些组件来帮助简化https://fe-tech.viewnode.com/post/202006/15/Mon, 15 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/15/本文是关于 TypeScript 中的 type assertions 的，它与其他语言中的类型强制转换有相似之处，并通过 as 运算符执行。 类型断言 类型断言使我们可以覆盖 TypeScript 为存储位置计算的静态类型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/10/Wed, 10 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/10/最近这两年，有很多人都在讨论 Typescript，无论是社区还是各种文章都能看出来，整体来说正面的信息是大于负面的，这篇文章就来整理一下我所https://fe-tech.viewnode.com/post/202006/05/Fri, 05 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/05/在 TypeScript中，any 和 unknown 是包含所有值的类型。在本文中，我们将会研究它们是怎样工作的。 TypeScript 的两种顶级类型 any and unknown are so-called top types in TypeScript. Quoting Wikipedia : any 和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/202006/02/Tue, 02 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/02/说到前端，我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置，只需最少的配置。本文将向你https://fe-tech.viewnode.com/post/202006/01/Mon, 01 Jun 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202006/01/这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。我们将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。它超级强大，同时又很容易，所以在调https://fe-tech.viewnode.com/post/202005/29/Fri, 29 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/29/VS Code 调试完全攻略系列目录 基础知识 步进逐行调试 编辑变量并重新执行函数 launch.json 和调试控制台 基于浏览器的 React 应用 调试用 TypeScript 开发并打包的 React 📦 调试可能会是一件复https://fe-tech.viewnode.com/post/202005/28/Thu, 28 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/28/可以通过在调试器中重新执行代码块，来查看它们在不同情况下的行为。让我们看看如何在调用栈中修改变量并重新执行函数——这样可以让你节省大量的时间https://fe-tech.viewnode.com/post/202005/27/Wed, 27 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/27/在要检查的代码之间跳转很重要。如果去遍历代码的每一行，那将会是乏味且没有必要的。调试器提供了便捷的方法来查看重要的内容，并跳出无关紧要的代码https://fe-tech.viewnode.com/post/202005/26/Tue, 26 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/26/在接下来的几篇文章中，我们将研究如何以专业的方式调试 JavaScript 和 TypeScript 代码。我们将学习如何使用 Visual Studio Code 中内置的调试器，而不是让 console.log 到处乱飞。 VS Code 调试完全攻略https://fe-tech.viewnode.com/post/202005/25/Mon, 25 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/25/在 JavaScript 中，你可以通过多种方式去定义函数。 第一种常用的方法是使用关键字 function： // 函数声明 function greet(who) { return `Hello, ${who}!`; } // 函数表达式 const greet = function(who) { return `Hello, ${who}`; } 代https://fe-tech.viewnode.com/post/202005/22/Fri, 22 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/22/我收集了一些 Node 中最常用的主题，并寻找 Deno 的替代方案。首先我想说明，许多当前的 Node.js 模块都可以都可以用在 Deno 中。由于许多模块都是可重用的，所以没有必要https://fe-tech.viewnode.com/post/202005/19/Tue, 19 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/19/假如你已经构建了一个 React 应用，但是现在需要部署它。应该怎么做？首先，最好选择一个云提供商，因为它们一般成本低而且部署容易。 大多数云提供商都提供https://fe-tech.viewnode.com/post/202005/18/Mon, 18 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/18/我每周都会探索一些新的项目，但很少会有像 Deno 这样吸引我的注意力的。 在本文中，我会让你快速了解 Deno，并把它与 Node.js 进行比较，以此构建你的第一个 RESThttps://fe-tech.viewnode.com/post/202005/20/Mon, 18 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/20/简介 本教程将深入探讨 CSS 网格布局，并探索几乎所有的属性和功能。读完之后，你将能够用这种出色的 CSS 附加功能去处理任何一种布局。 术语：Grid Grid 是二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/14/Thu, 14 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/14/在本文中，我们将研究什么是 CommonJS，以及为什么它会使你的 JavaScript 包变得那么大。 什么是 CommonJS？ CommonJS 是 2009 年的标准，为 JavaScript 模块建立了约定。https://fe-tech.viewnode.com/post/202005/13/Wed, 13 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/13/介绍 在本文中，我们将学习怎样在 ReactJS 中把文本复制到剪贴板。 依赖的知识与环境 React 基本知识。 Visual Studio Code IDE。 Bootstrap 和 HTML 的基本知识。 创建一个 React 项目 首先，用以下https://fe-tech.viewnode.com/post/202005/12/Tue, 12 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/12/为什么需要跨域隔离才能使用功能强大的功能，例如 SharedArrayBuffer，performance.measureMemory() 和 JShttps://fe-tech.viewnode.com/post/202005/11/Mon, 11 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/11/关于前端的 13 个安全提示 无论你是 React.js、Angular、Vue.js 程序员还是前端页面仔，你的代码都可以成为引诱黑客入侵的大门。 作为https://fe-tech.viewnode.com/post/202005/09/Sat, 09 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/09/我了解到，掌握了某种语言、框架或工具的人与没有掌握的人之间的最大区别在于他们所使用的思维模型（Mental Model）。前者拥有清晰而先进的https://fe-tech.viewnode.com/post/202005/08/Fri, 08 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/08/模块联合（Module federation）允许 JavaScript 应用在客户端和服务器上动态运行来自另一个包或版本的代码。 这是 JavaScript 捆绑器，等效于在 Apollo 中使用 Grhttps://fe-tech.viewnode.com/post/202005/07/Thu, 07 May 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202005/07/从 Node.js v10.0.0 开始，异步迭代器就出现中了，最近它们在社区中的吸引力越来越大。在本文中，我们将讨论异步迭代器的作用，还将解决它们可能用于什么目的的问题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/30/Thu, 30 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/30/算法是技术面试的重要组成部分，尤其是在国内外的大厂中。本文将为你介绍在面试中需要了解的常见算法以及提高它们效率的方法（这是面试中常见的问题）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/28/Tue, 28 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/28/我有一个项目用了 Vue.js 来构建单页应用程序。随着上线日期的临近，性能优化的工作变得越来越重要。在本文中，我收集了有关在加载时间和渲染性能方面提高 Vue.jshttps://fe-tech.viewnode.com/post/202004/27/Mon, 27 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/27/本文概述了 TypeScript 的工作原理：典型的 TypeScript 项目的结构是什么？什么被编译以及怎样编译？我们如何使用 IDE 编写 TypeScript？ TypeScript项目的https://fe-tech.viewnode.com/post/202004/26/Sun, 26 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/26/本文介绍了如何通过 TypeScript 和 webpack 创建 Web 应用程序。我们仅使用 DOM API，而不使用特定的前端框架。源码文件 ts-demo-webpack 可以从 GitHub 下载。 **必需的知识：**如果你对 Tyhttps://fe-tech.viewnode.com/post/202004/24/Fri, 24 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/24/本文绍了一些很棒的浏览器扩展，URL hack，键盘快捷键以及一些搞笑的东西。 我用 GitHub 来辅助项目开发、业务开发和市场营销经理等工作已有10多年了https://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/17/Fri, 17 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/17/本文中出现的所有日期和数字在撰写本文时都是正确的。要查找最新信息，请点击文章中的链接。 如果你正在阅读本文，则意味着你与时俱进。根据预测，对模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/14/Tue, 14 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/14/互联网上有许多可供人类消费的信息。但是如果这些数据不是以专用的 REST API 的形式出现，通常很难以编程方式对其进行访问。使用 jsdom 之类的 Node.js 工具，你可以直接https://fe-tech.viewnode.com/post/202004/13/Mon, 13 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/13/作者：V8开发团队 内存和性能之间始终存在争斗。作为用户，我们希望执行得更快并且消耗的内存更少。不幸的是，通常提高性能的代价是消耗内存（反之亦https://fe-tech.viewnode.com/post/202004/10/Fri, 10 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/10/为大家精心挑选了 8 个漂亮的 Progress Bars 组件，并附上 GitHub 链接和 vue.js 代码示例。 1.easy-circular-progress 一个简单的循环进度组件，带有计数效果。 作者：dreambo8563 Githuhttps://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/07/Tue, 07 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/07/如果有人问你将在 2020 年选择哪种框架进行开发，你的答案将是什么？很明显，你主要有两个选择： React.Js 和 Vue.Js！但是，如果你需要选择一个怎么办？好吧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/202004/02/Thu, 02 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/02/增强现实技术在开发人员和智能手机用户中越来越受欢迎，但它还是没有在无所不在的技术中占据一席之地。要体验 AR，用户必须安装专用的程序，但经常会https://fe-tech.viewnode.com/post/202004/01/Wed, 01 Apr 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202004/01/数据 现在，网络上有数百个新冠疫情跟踪器。首先我想知道他们把数据放在了哪里。经过研究，很快确定了两个主要来源。我最初使用了其中的一个。那就是约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/27/Fri, 27 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/27/你是否有过这样的经历，当把 logging 添加到自定义 Node 模块中，并认为自己将会从这些额外信息中受益，却发现当你将模块添加为依赖项并运行 npm install 和 npm start 时，你的程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/23/Mon, 23 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/23/JavaScript 的 promise一直是该语言的一大胜利——它们引发了异步编程的革命，极大地改善了 Web 性能。原生 promise 的一个缺点是，到目前为止，还没有可以取消 fetch 的https://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/06/Fri, 06 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/06/React 组件内部的状态是在渲染过程之间保持不变的封装数据。 useState() 是 React hook，负责管理功能组件内部的状态。 我喜欢 useState() ，它确实使状态处理变得非常容易。但是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/202003/04/Wed, 04 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/04/微服务已成为在 Node.js 中构建可扩展且强大的云应用的主流方法。同时也存在一些门槛，其中一些难点需要你在以下方面做出决策： 组织项目结构。 将自定义服务连https://fe-tech.viewnode.com/post/202003/03/Tue, 03 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/03/随着 Vue.js 单页应用（SPA）变得相当复杂，你开始需要 Vue 路由 以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的https://fe-tech.viewnode.com/post/202003/02/Mon, 02 Mar 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202003/02/TypeScript中的类型是什么？本文中描述了两种有助于理解它们的观点。 每个角度三个问题 以下三个问题对于理解类型如何工作非常重要，并且需要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/27/Thu, 27 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/27/定制 select 标签的设计非常困难。有时候，如果不使用样式化的 div 和自定义 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/202002/24/Mon, 24 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/24/作为一个前端工程师，如果你对 HTML 和 CSS 有基本的了解，并希望在浏览器中创建美观的用户界面，那就别到处乱找资料了！在本文中，你将通过了解以下七个基本https://fe-tech.viewnode.com/post/202002/21/Fri, 21 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/21/我们都想通过共享托管来省钱，但是对于某些网站，VPS 甚至专用计划都是不可避免的。如果你不得不做一个更高级的计划，这可能意味着你的网站正在成长https://fe-tech.viewnode.com/post/202002/20/Thu, 20 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/20/在本文中，我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储，但是很容易就能完成这个任务。 要了解我们要https://fe-tech.viewnode.com/post/202002/19/Wed, 19 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/19/用于在调试期间可视化数据结构的 VS Code 扩展。 用法 安装此扩展后，使用命令 Open a new Debug Visualizer View 打开新的可视化器视图。在这个视图中，你可以输入一个表达式，该表https://fe-tech.viewnode.com/post/202002/17/Mon, 17 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/17/前言 即便你对 JavaScript 很了解，但是去阅读 ECMAScript 语言规范，或简称为 ECMAScript 规范 也会令人生畏。至少这是我在第一次开始阅读时的感受。 让我们从一个具体的例子开始，然后https://fe-tech.viewnode.com/post/202002/07/Fri, 07 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/07/尽管一些组织认为应该由用户选择健壮的用户名和密码来保护自己，但是开发人员可以通过将规则包含在程序的设计中来帮助进行良好的密码选择。例如，开发https://fe-tech.viewnode.com/post/202002/03/Mon, 03 Feb 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202002/03/一直以来，跟踪 Node.js 的内存泄漏是一个反复出现的话题，人们始终希望对其复杂性和原因了解更多。 并非所有的内存泄漏都显而易见。但是，一旦我们确定了其模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/20/Mon, 20 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/20/什么是 Express 中间件？ 中间件在字面上的意思是你在软件的一层和另一层中间放置的任何东西。 Express 中间件是在对 Express 服务器请求的生命周期内所执行的函数。 每个中间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/16/Thu, 16 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/16/在开始之前，希望大家知道，我是 TypeScript 爱好者。它是我在前端 React 项目和基于后端 Node 工作时的主要编程语言。但我确实有一些疑惑，所以想在本文中进行讨论。迄今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/13/Mon, 13 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/13/随着开发过程中自动 UI 测试的兴起，无头浏览器已变得非常流行。网站爬虫和基于 HTML 的内容分析也有无数的用例。 在 99％ 的场合下，你实际上不需要浏览器 Ghttps://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/202001/03/Fri, 03 Jan 2020 10:00:00 +0800https://fe-tech.viewnode.com/post/202001/03/在本文中将会给你介绍一个令人兴奋的概念，它将帮你精通 Vue.js 。 在 Vue 中实现可访问性 为了实现 Web 上的可访问性，你需要设计每个人都可以使用的页面、工具和技https://fe-tech.viewnode.com/post/201912/31/Tue, 31 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/31/Node.js 是一个免费的跨平台 JavaScript 运行时环境，尽管它本质上是单线程的，但是可以在后台使用多个线程来执行异步代码。 由于 Node.js 的非阻塞性质，不同的线程执行不同的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/24/Tue, 24 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/24/前文： 讲给前端的正则表达式(1)：基本概念 讲给前端的正则表达式(2)：写出更优雅、更精确的正则表达式 讲给前端的正则表达式(3)：使用 ES6 特性 正https://fe-tech.viewnode.com/post/201912/23/Mon, 23 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/23/前文（点击直达）： 讲给前端的正则表达式(1)：基本概念 讲给前端的正则表达式(2)：写出更优雅、更精确的正则表达式 到现在为止，我们已经介绍了许https://fe-tech.viewnode.com/post/201912/20/Fri, 20 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/20/今天，我们回到 JavaScript 中的正则表达式。如果你还是新手，请查看上一篇文章 。这次我们将学习如何编写更优雅的模式并定义搜索字符串的位置。 定义重复的较短方https://fe-tech.viewnode.com/post/201912/19/Thu, 19 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/19/正则表达式（regex）是定义搜索模式的字符序列。由于对程序员的日常工作非常有用，所以在 JavaScript 中也支持它。在这个系列文章中，我会向你展示其工作方https://fe-tech.viewnode.com/post/201912/18/Wed, 18 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/18/每个团队都必须在开发过程中做出各种决定。其中通常会涉及到 yarn，npm 或其它用于构建和打包 javascript 代码的工具。一些开发人员渴望朝着某个方向前进，https://fe-tech.viewnode.com/post/201912/17/Tue, 17 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/17/Vue.js 框架是由经验丰富的开发人员创建的，具有可靠的社区支持，丰富的功能，而且是轻量级的。 Vue.js 的另一个大优点是易于理解和学习。可以在 Vue 框架的帮助下创https://fe-tech.viewnode.com/post/201912/13/Fri, 13 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/13/我曾经想要在特定时间执行特定的操作，而无需亲自运行它们。 在本文中，我们将研究如何在 Node 程序中创建和使用 Cron 作业。为此我们将创建一个简单的程序，该https://fe-tech.viewnode.com/post/201912/12/Thu, 12 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/12/设置正确的日志记录基础结构可帮助我们查找发生的问题、调试和监视应用程序。从最基本的角度来看，我们应该从基础架构中得到以下内容： 能够在我们的日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/10/Tue, 10 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/10/👇请完成以下9个问题👇 1. 多个 .catch var p = new Promise((resolve, reject) => { reject(Error('The Fails!')) }) p.catch(error => console.log(error.message)) p.catch(error => console.log(error.message)) 以上代码的输出将会是什么？请选择正确的答案： 打印一次消息 打印两次消息 UnhandledPromiseRejectionWarning 程序退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/201912/05/Thu, 05 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/05/在本文中我们讨论 Vue 中的无渲染插槽模式能够帮助解决哪些问题。 在 Vue.js 2.3.0 中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生，解决了提https://fe-tech.viewnode.com/post/201912/04/Wed, 04 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/04/JavaScript 语言越来越被广泛地用于各种环境中。除了 Web 浏览器（这是 JavaScript 的最常见的宿主环境类型）之外，你还可以在服务器，智能手机甚至机器人硬件中运行 JavaScript 程序。https://fe-tech.viewnode.com/post/201912/03/Tue, 03 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/03/Git 有时可能会令人生畏。因为有太多的命令和细节需要学习。不过虽然文档 的内容很多，但阅读起来还是很轻松的。一旦你克服了最初不堪重负的感觉，就会感https://fe-tech.viewnode.com/post/201912/02/Mon, 02 Dec 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201912/02/Node.js 中的流（Stream）是出了名的难用甚至是难以理解。 用 Dominic Tarr 的话来说：“流是 Node 中最好的，也是最容易被误解的想法。”即使是 Redux 的创建者和 React.js 的核心https://fe-tech.viewnode.com/post/201911/28/Thu, 28 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/28/1. 渲染项目列表时，“key” 属性的作用和重要性是什么？ 渲染项目列表时，key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。 如果没有使用https://fe-tech.viewnode.com/post/201911/27/Wed, 27 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/27/CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗，它还可以在网页上控制播放声音。 本文介绍了一些技巧。实际上它并不是真正的 hhttps://fe-tech.viewnode.com/post/201911/26/Tue, 26 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/26/1. 为什么 Vue 被称为“渐进框架”？ 使用渐进式框架的代价很小，从而使现有项目（使用其他技术构建的项目）更容易采用并迁移到新框架。 Vue.js 是一个渐进式框架https://fe-tech.viewnode.com/post/201911/25/Mon, 25 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/25/Node 项目在项目根目录中名为 package.json 的文件中跟踪依赖关系和元数据。这是你项目的核心。它包含名称、描述和版本之类的信息，以及运行、开发以及有选择地将项目https://fe-tech.viewnode.com/post/201911/22/Fri, 22 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/22/在本文的第一部分中，我们将讨论设置适合Knative 0.6.0 版的开发环境。第二部分介绍第一个 serverless 微服务的部署。使用 Knative 创建 serverless 应用程序的基本要求是对 Kubernetes 的https://fe-tech.viewnode.com/post/201911/21/Thu, 21 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/21/我们要谈论的是什么？ 在 JavaScript 中数据结构通常总是被忽略，或者接触得不多。但是对于许多大厂而言，一般都需要你深刻了解如何管理数据。掌握数据结构也能够https://fe-tech.viewnode.com/post/201911/19/Tue, 19 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/19/WebAssembly （Wasm）是 Web 浏览器中相对较新的功能，但它地扩展了把 Web 作为服务应用平台的功能潜力。 对于 Web 开发人员来说，学习使用 WebAssembly 可能会有一个艰难的过程，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/08/Fri, 08 Nov 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201911/08/通过使用此模块，只需将鼠标悬停在浏览器中，即可快速查看DOM元素的属性。基本上它是一个即时检查器。 将鼠标悬停在 DOM 元素上会显示其属性！ 自己尝试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/30/Wed, 30 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/30/在现代 JavaScript 中编写异步任务 在本文中，我们将探讨过去异步执行的 JavaScript 的演变，以及它是怎样改变我们编写代码的方式的。我们将从最早的 Web 开发开始，一直到现代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/201910/12/Sat, 12 Oct 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201910/12/你已经为一个有趣的问题工作了几个月，现在决定启动一个开源项目。你在 README.md 中编写了一些说明，并发布了1.0版。 几周后，人们对这个项目仍然没有什么兴https://fe-tech.viewnode.com/post/201910/11/Fri, 11 Oct 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201910/11/JavaScript 普通对象 {key: 'value'} 可用于保存结构化数据。 但是我发现很烦人的一件事：对象的键必须是字符串（或很少使用的符号）。 如果用数字作键会怎样？在这种情况下没https://fe-tech.viewnode.com/post/201910/10/Thu, 10 Oct 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201910/10/在本文中，我们将介绍 package-lock.json 为什么重要，以及如何与 NPM CLI 一起使用。 历史 NPM v5 引入了 package-lock.json， 将其作为捕获在任意时刻安装的确切https://fe-tech.viewnode.com/post/201910/08/Tue, 08 Oct 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201910/08/最近，我一直在玩Netlify ，结果我对内容交付网络（CDN）常见的缓存策略越来越熟悉。有一种将 ETag标识符用于 Web 资源的策略。 简而言之，Ehttps://fe-tech.viewnode.com/post/201909/30/Mon, 30 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/30/介绍 单个 Node.js 程序的实例仅在一个线程上运行，因此无法充分利用 CPU 的多核系统。有时你可能需要启动 Node.js 进程集群来利用本地计算机或生产服务器上的每个 CPU 内核https://fe-tech.viewnode.com/post/201909/29/Sun, 29 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/29/每个工作领域都有它们的术语表——特定的词与日常生活中的含义截然不同。对于不断发展的软件业的专业词汇尤其如此。在软件开发领域，“engagemhttps://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/26/Thu, 26 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/26/作者：Mythri Alle, Dan Elphick, and Ross McIlroy 在 2018 年末，为了大幅减少 V8 的内存使用量，我们启动了一个名为 V8 Lite 的项目。该项目最初被设想为 V8 的一个独立的 精简模式（https://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/19/Thu, 19 Sep 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201909/19/在 HTML 中包含资源的新思路 注意：这篇文章描述了一种我们仍需要测其试性能影响的实验技术。 它可能最终会成为一种有用的工具，也有可能成为不被推荐的做法https://fe-tech.viewnode.com/post/201909/17/Tue, 17 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/17/Git 是所有开发人员工具箱中的重要工具。 例如就在前几天，我大约只用了 20 分钟就解决了一个已经投入生产环境的重大问题（完全是我的错）。如果没有 Githttps://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/201909/10/Tue, 10 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/10/本教程需要事先了解mongoose 对象关系映射（ORM）技术 介绍 随着程序的增长，日志记录成为跟踪所有内容的关键部分。它对于调试目的尤为重要。https://fe-tech.viewnode.com/post/201909/09/Mon, 09 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/09/有这样一种技术，可以把用高级语言编写的非 Web 程序转换成为 Web 准备的二进制模块，而无需对 Web 程序的源代码进行任何更改即可完成这种转换。浏览器可以有效https://fe-tech.viewnode.com/post/201909/06/Fri, 06 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/06/日志记录是每个开发人员从第一天编写代码时就要做的事情，但很少有人知道它可以产生的价值和最佳实践。 在本文中，我们将讨论以下主题： 什么是日志，为https://fe-tech.viewnode.com/post/201909/05/Thu, 05 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/05/你的程序很有可能需要支持多种语言。其中包括对语言敏感的日期处理。一个广受欢迎的库Moment.js 有助于实现这一目标，它的功能之一是国际化。https://fe-tech.viewnode.com/post/201909/04/Wed, 04 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/04/在本文中，你将了解功能组件，并了解如何在 Vue 中使用工作流中的无状态组件。 在开始之前 你的PC需要以下内容： 安装 Node.js version 10.x 或以上版本。可以通过在终端中https://fe-tech.viewnode.com/post/201909/03/Tue, 03 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/03/我曾经用 Python 海龟图形生成过这个图像，并有用 JavaScript 复制它的强烈冲动。 对于那些不熟悉海龟图形的人来说，这是一个使用虚拟“海龟”绘制图形的概念，当海龟四https://fe-tech.viewnode.com/post/201909/02/Mon, 02 Sep 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201909/02/现在要写出优秀的代码并不是一个真正的问题。一切都只是先进行 Google 搜索，然后只需找到 Stackoverflow 的第一个链接，找到最受欢迎或赞同最多的答案并复制粘贴就足够了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/29/Thu, 29 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/29/在微服务架构的世界中，我们通过一系列服务构建应用。集合中的每项服务都符合以下标准： 松散耦合 可维护和可测试 可以独立部署 微服务架构中的每个服务都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/21/Wed, 21 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/21/在我完成 electrade 的工作之余，还帮助一个朋友的团队完成了他们的项目。最近，我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继，其中包含 “serverhttps://fe-tech.viewnode.com/post/201908/20/Tue, 20 Aug 2019 12:01:00 +0800https://fe-tech.viewnode.com/post/201908/20/大多数面向对象编程语言都鼓励编程到接口 的模式。 TypeScript 当然支持这一点，你可以创建一个或多个接口，然后再定义生成这个接口实例的类（或工厂）。 但是当程https://fe-tech.viewnode.com/post/201908/19/Mon, 19 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/19/介绍 你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？本文将指导你如何转换为所有这些类型的格式。 我们将使用 Node.js 和Sharhttps://fe-tech.viewnode.com/post/201908/16/Fri, 16 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/16/也许人们已经听说过 HTTP2，有很多数大公司都使用HTTP2，如Google、Youtube、Facebook …… 那么什么是HTTP2？我们现https://fe-tech.viewnode.com/post/201908/15/Thu, 15 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/15/根据 Gartner 的说法，微服务是云开发的新应用平台。微服务是独立部署和管理的，一旦应用实现在容器内，它们与底层操作系统的交互很少。因此，如果你希望把微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/201908/02/Fri, 02 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/02/当 cookie 被首次引入时，它是浏览器保存数据的唯一方式。之后又有了很多新的选择：Web Storage API、IndexedDB 和 Cache API。那么 cookie 死了吗？我们来看https://fe-tech.viewnode.com/post/201908/01/Thu, 01 Aug 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201908/01/我们生活在一个超连接的世界，希望网站能够在任何时候都100％ 的正常运行。我们不能接受任何时间长度的 Web 停机，因为它可能会造成灾难性的连锁反应。https://fe-tech.viewnode.com/post/201907/31/Wed, 31 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/31/Node.js 的创建者 Ryan Dahl 花了一年半的时间研究 Deno ，这是一个新的 JavaScript 运行时环境，可以解决Node 的所有问题。 不要误解我的意思，Node 本身就是一个很棒的服务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/26/Fri, 26 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/26/每当我听到人们谈论Node.js时，就会出现很多关于究竟是什么 ，这项技术有什么用处，以及其未来 的问题。 让我们试着解决第一部分。回答这个问题最https://fe-tech.viewnode.com/post/201907/25/Thu, 25 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/25/多年来，在 JavaScript 生态中出现了不同形式的模块化方案。开发人员使用了明确定义的规范（如 AMD 或 CommonJS）以及简单的编码模式（如通过揭示模块模式（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/23/Tue, 23 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/23/在本文中，你将了解如何在 Vue.js 中引用组件中的 HTML 元素。 前提条件 本文适用于所有使用 Vue 的开发人， 包括初学者。在阅读本文之前，你应该具备一些前提条件： Node.jshttps://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/18/Thu, 18 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/18/Vugo 是什么 Vugu 是一个 Go语言开发库，可以很容易地使用 Go 语言编写 Web 用户界面。 其基本思路如下： 在 .vugu 文件中编写 UI 组件。这些文件类似于你在 JavaScript 框架中看到的https://fe-tech.viewnode.com/post/201907/17/Wed, 17 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/17/你是否正处于选择 App 开发技术的两难境地？如今，渐进式 Web 应用程序需求旺盛。知道这是为什么吗 ？ 下面让我们来详细的梳理一下。 移动电话用户的增长促使在https://fe-tech.viewnode.com/post/201907/16/Tue, 16 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/16/1. 擅长 Google 搜索 成为优秀程序员的秘诀之一就是学习如何搜索问题的答案。通过有效地学习 Google 到的东西，你将节省大量的时间。 2. 承诺与交付 让你的团队知道自己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/10/Wed, 10 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/10/网络视频一直都很火。虽然在页面上嵌入 Instagram 和 Youtube 视频非常简单，但是有越来越多的需求 —— 比如许多电子商务的场景 —— 要求定制的视频传输方法。 在设置视频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/05/Fri, 05 Jul 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201907/05/有时候几乎每周都会发布新版本的 Node.js —— 每隔几周发布一次小版本，每隔几个月发布一次主要版本。如果你是一个需要在不同程序和项目之间切换的码农，可能https://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/26/Wed, 26 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/26/几乎每种编程语言都能将组成程序的代码拆分为多个文件。 在 C 和 C++ 中 #include 指令就用于这个目的，而 Java 和 Python 有 import 关键字。 JavaScript 是迄今为止为数不多的例外之一，但新https://fe-tech.viewnode.com/post/201906/25/Tue, 25 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/25/通常，在构建SPA时，需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 dashboard 路由，我们可以通过使用 auth 中间件来确保合法用户才能访问它https://fe-tech.viewnode.com/post/201906/21/Fri, 21 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/21/在本文中，我们来学习可用于 Vue JS 工作流程中所有的 hooks 。 Vue Vue JS 是一个非常先进的 JavaScript 框架，由尤雨溪 和 Vue 核心团队创建，超过 230 个开源社区爱好者贡献了代码。https://fe-tech.viewnode.com/post/201906/20/Thu, 20 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/20/CPU，也被称为微处理器，是计算机的大脑。让我们通过深入了解计算机的核心，来帮助自己有效地编写计算机程序。 “工具通常比机器更简单，它一般用手https://fe-tech.viewnode.com/post/201906/19/Wed, 19 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/19/Chrome Lighthouse 已经存在了一段时间了，但如果我要求你解释一下它能做什么，你能解释清楚吗？ 我发现许多 Web 开发人员包括初学者，都没有听说过这个工具，而那些尚未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/201906/13/Thu, 13 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/13/Web Share API 自从它首次在Android 版 Chrome 61中推出以来，似乎已经不再受到关注。从本质上讲，它提供了一种方法，可以直接从网站或 Web 应用中共享内容（例https://fe-tech.viewnode.com/post/201906/12/Wed, 12 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/12/什么是Svelte？ Svelte 是由 Rich Harris 创建的 JavaScript UI 库。 Rich 认为 virtual DOM 带来了额外开销，并提出了 Svelte，现在它正处于第三版的状态。 但是你为什么要学习Svhttps://fe-tech.viewnode.com/post/201906/11/Tue, 11 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/11/在计算机科学中，算法分析是非常关键的部分。找到解决问题的最有效算法非常重要。可能会有许多算法能够解决问题，但这里的挑战是选择最有效的算法。现https://fe-tech.viewnode.com/post/201906/10/Mon, 10 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/10/近一两年来 GraphQL 和 TypeScript 的使用都程爆发式增长 ，当两者与React结合使用时，它们可以为开发人员提供理想的开发体验。 GraphQL 改变了我们对 API 的思考方式，并利用https://fe-tech.viewnode.com/post/201906/06/Thu, 06 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/06/GraphQL是一种查询语言、一种执行引擎和一种规范，它引领开发人员重新思考应该怎样去构建客户端和API。 GraphQL 是当今软件技术领域最大的流行语之https://fe-tech.viewnode.com/post/201906/05/Wed, 05 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/05/浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。 好消息是https://fe-tech.viewnode.com/post/201906/04/Tue, 04 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/04/“可是在我的机器上能工作啊！”这种场景可能是调试 bug 时最常见的问题。这通常是由于出错的机器和你自己的机器上系统的底层依赖性不同的结果。所以 yarn 和https://fe-tech.viewnode.com/post/201906/03/Mon, 03 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/03/概述 在 React 16 中为了防止不必要的 DOM 更新，允许你决定是否让 .setState 更来新状态。在调用 .setState 时返回 null 将不再触发更新。 我们将通过重构一个 mocktail （一种不含酒精的鸡尾酒https://fe-tech.viewnode.com/post/201906/02/Sun, 02 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/02/如果一张图片胜过千言万语 —— 那么动画呢？ Flex 无法通过文字或静态图像有效地完全解释。为了巩固你对flex的了解，我制作了这些动画演示。 注意 **overflow: hidden** 行https://fe-tech.viewnode.com/post/201906/01/Sat, 01 Jun 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201906/01/牧羊人很擅长照顾他们的羊群，为牧群带来秩序和结构。即使有几百只毛茸茸的动物，牧羊人仍然会在一天结束时将它们悉数带回农场。 而对于程序员来说，当https://fe-tech.viewnode.com/post/201905/30/Thu, 30 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/30/最近关注了太多的工具，现在最好从所有 React 和 npm-install-everything 的文章中休息一下，来看看一些纯粹的 DOM 和 Web API 功能，它们可以在不依赖任何第三方库的前提下在现代浏览器中https://fe-tech.viewnode.com/post/201905/29/Wed, 29 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/29/当你为其他开发人员（前端，桌面，移动等）开发 API 时，需要生成一份风格良好的文档，以便他们知道可以使用的内容和方式，这非常重要。 为此，在Nodehttps://fe-tech.viewnode.com/post/201905/27/Mon, 27 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/27/类型和可测试代码是避免错误的两种最有效方法，尤其是代码随会时间而变化。我们可以分别通过利用 TypeScript 和依赖注入（DI）将这两种技术应用于JavaSchttps://fe-tech.viewnode.com/post/201905/26/Sun, 26 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/26/我在工作中很喜欢 Git 。 Git 在许多开发团队中扮演着重要的角色。 关于 Git 面试的第一个问题必须是： Q1. Git和SVN有什么区别？ Git SVN 1. Git是一个分布式的https://fe-tech.viewnode.com/post/201905/25/Sat, 25 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/25/为 Linux 系统配置网络连接可能是具有挑战性的。幸运的是，许多新的 Linux 发行版都带有网络管理工具，可以帮你自动连接到无线网络。但是能够为 Linux 机器建立静态网https://fe-tech.viewnode.com/post/201905/24/Fri, 24 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/24/当你开始用 JavaScript 进行开发时，可能学到的第一件事就是如何用 console.log 将内容记录到控制台。如果你去搜索如何调试 JavaScript，会发现数百篇博文和 StackOverflow 文章https://fe-tech.viewnode.com/post/201905/23/Thu, 23 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/23/Node.js 是一个 JavaScript 运行时环境。听起来还不错，不过这究竟意味着什么？它又是如何运作的？ Node 运行时环境包含执行 JavaScript 程序所需要的一切。 如果你了解 Java 的话，会发现https://fe-tech.viewnode.com/post/201905/21/Tue, 21 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/21/Node.js 对初学者来说可能是令人望而却步的，其灵活的结构和缺乏严格的规范使它看起来很复杂。 本教程是 Node.js，Express 框架和 MongoDB 的快速指南，https://fe-tech.viewnode.com/post/201905/20/Mon, 20 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/20/我发现官方的 TypeScript 文档非常有用，但是总觉得有点过于学术化并且枯燥无味。每当我发现一个新功能时，我想要知道这个功能究竟能够解决什么问题而不是长篇大https://fe-tech.viewnode.com/post/201905/19/Sun, 19 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/19/了解什么是 DevOps 的关键在于搞清楚 DevOps 的意图，即创建高质量的软件，同时在团队之间进行更快速、更可靠的沟通和协作。至于团队，我们可以参考这两个：开发团https://fe-tech.viewnode.com/post/201905/18/Sat, 18 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/18/惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的https://fe-tech.viewnode.com/post/201905/17/Fri, 17 May 2019 10:00:00 +0800https://fe-tech.viewnode.com/post/201905/17/Web 为了支持客户端和服务器之间的全双工（或双向）通信已经走过了很长的路。这是 WebSocket 协议的主要目的：通过单个 TCP 套接字连接在客户端和服务器之间提供持久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/13/Mon, 13 May 2019 11:08:53 +0800https://fe-tech.viewnode.com/post/201905/13/你是不是一直都想学正则表达式，但是因为它的复杂性而被推迟了？在本文中，我将向你展示五个易于学习的正则技巧，你可以立即在自己喜欢的文本编辑器中https://fe-tech.viewnode.com/post/201905/12/Sun, 12 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/12/本文将向你介绍一系列顶级CSS框架。有些人可能听说过，也可能对有些人是全新的。但它们都提供了各种有用的先进功能，可以改善你的工作流程。开始吧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/09/Thu, 09 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/09/在本教程中，我们将创建三维对象并为它们添加简单的交互。此外，你还可以学到如何在客户端和服务器之间建立简单的消息传递系统。 虚拟现实（VR）是一https://fe-tech.viewnode.com/post/201905/08/Wed, 08 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/08/shadow DOM不是超级英雄电影中的恶棍，也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型（或简称DOM）中缺少的树封装方法。 网页通常使用来自https://fe-tech.viewnode.com/post/201905/07/Tue, 07 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/07/Vue.js 是一个流行的 JavaScript 库，用于在短时间内开发原型。这包括用户界面、前端应用、静态网页和本机移动应用。它以易用的语法和简单的数据绑定功能而闻名。 最近https://fe-tech.viewnode.com/post/201905/06/Mon, 06 May 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201905/06/本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。 你可能会想到一些问题： 使用 GraphQL API 的目的是什么？ 什么是GraphQL API？ 什么是Graphhttps://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/30/Tue, 30 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/30/JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言，它对于网页操作非常有用。在本文中，我们将看到可以用哪些手段来修改 HTML 文档和交互。 什么是文档对象https://fe-tech.viewnode.com/post/201904/29/Mon, 29 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/29/当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。 在本文中https://fe-tech.viewnode.com/post/201904/25/Thu, 25 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/25/概要：本文将指导你快速上手 Vue CLI 3，包括最新的用户图形界面和即时原型制作功能的使用步骤。 介绍 尤雨溪（ Evan You ）发起并创建的 Vue JS ，是一个用于构建用户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/23/Tue, 23 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/23/在这篇关于 React Router 的博文中，我将引导你搞懂 React 中路由的概念。 你将看到以下主题： 常规路由 为什么需要 React 路由？ React 中的路由 React Router v4 的优点 常规路由 通常，当用户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/15/Mon, 15 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/15/在本文中，我们将探讨如何通过用已编译的 WebAssembly 替换 JavaScript 来加速 Web 应用。 如果你还有听说过 WebAssembly，就先看一下解释：WebAssembly 是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/10/Wed, 10 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/10/在最近的一个项目中，我们通过设置 ESLint 和 Prettier 来进行自动化语法检查，并对 JavaScript 项目的代码风格管理。 为什么自动 Lint 和代码风格很重要？ ESLint 通过对 JavaScript 文件执行自动扫https://fe-tech.viewnode.com/post/201904/09/Tue, 09 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/09/我们在工作中经常会进行很多繁琐的任务：更新配置文件，复制和粘贴文件，更新 Jira 标签等。 慢慢的花在这些任务上的时间会越来越多。我在 2016 年时在一家网络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/04/Thu, 04 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/04/事件驱动的编程变得流行之前，在程序内部进行通信的标准方法非常简单：如果一个组件想要向另外一个发送消息，只是显式地调用了那个组件上的方法。但是https://fe-tech.viewnode.com/post/201904/03/Wed, 03 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/03/前言 CORS 与 cookie 在前端是个非常重要的问题，不过在大多数情况下，因为前后端的 domain 一般是相同的，所以很少去关心这些问题。或者只是要求后端设置 Access-Control-Allow-Origin: * 就行了，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/201904/01/Mon, 01 Apr 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201904/01/CSS 规范一直在不断发展。尽管在 CSS 新功能的实现很复杂，但是 CSS 工作组还是决定要把简化版作为新元素添加到规范中。然后由浏览器来实现这些新元素，浏览器https://fe-tech.viewnode.com/post/201903/30/Sat, 30 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/30/自21世纪初以来，SVG就存在了，但仍有一些有趣的方法去用它。在本教程中，重点将放在 SVG 的过滤器上 —— 但不只是将它们应用于 SVG 图像，我将向你展示https://fe-tech.viewnode.com/post/201903/29/Fri, 29 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/29/在本文中，我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。 背景：几个月前，一个客户要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/27/Wed, 27 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/27/许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。 在本文中，我会与你分享我自己的 CSS reset 项目（除了https://fe-tech.viewnode.com/post/201903/26/Tue, 26 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/26/很多人都想知道单线程的 Node.js 怎么能与多线程后端竞争。考虑到其所谓的单线程特性，许多大公司选择 Node 作为其后端似乎违反直觉。要想知道原因，必须理解其单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/21/Thu, 21 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/21/如果你是一位有抱负的前端程序员并准备面试，那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。 JavaScript 工具缓慢而稳定地在市场中扎根，对 Reacthttps://fe-tech.viewnode.com/post/201903/20/Wed, 20 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/20/为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争，拥有一个吸引人的网站可以帮助你脱颖而出。研究表明，如果加载时间超过3秒，会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/18/Mon, 18 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/18/deno 如何偿还 node.js 的十大技术债 根据网络资料整理 “Node现在太难用了！”。Node.js之父 Ryan Dahl 去年初要开发一款 JavaScript 互动式数据分析工具时，忍不住抱怨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/14/Thu, 14 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/14/你将学到什么 阅读本文后，你应该能够理解以下代码的含义： interface Array<T> { concat(...items: Array<T[] | T>): T[]; reduce<U>( callback: (state: U, element: T, index: number, array: T[]) => U, firstState?: U): U; ··· } 如果你认为这段代码非常神秘 —— 那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/11/Mon, 11 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/11/正如 我们的React教程的第一部分 中所指出的，开始使用 React 相对容易。首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，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/09/Sat, 09 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/09/不管你是面试官还是求职者，里面的思路都能让你获益匪浅。 Web开发人员的职责是什么？ 解析： Web工程师应该充分了解自己的角色，以及怎样为Webhttps://fe-tech.viewnode.com/post/201903/07/Thu, 07 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/07/不管你是面试官还是求职者，里面的思路都能让你获益匪浅。 你能不能用纯 HTML 写出页面？ 解析： 有许多无需深入掌握 HTML 就能做出页面的工具。这个问题询问求职https://fe-tech.viewnode.com/post/201903/06/Wed, 06 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/06/摘要 听说过文字冒险游戏吗？ 如果你的年龄足够大的话（就像我一样），那么你可能听说过、甚至玩过“back in zhe day”。在本文中，我将向你展示编写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/201903/04/Mon, 04 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/04/本文描述了通过 Babel 生成 npm 包的最小设置。你可以在 GitHub 中看到案例 re-template-tag 的设置。 GitHub：https://github.com/rauschma/rehttps://fe-tech.viewnode.com/post/201903/01/Fri, 01 Mar 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201903/01/不管你是面试官还是求职者，里面的思路都能让你获益匪浅。 你用 CSS 多久了？ 解析： 这个问题可以让面试官了解求职者使用 CSS 的经验。它还可以告诉面试官该人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/27/Wed, 27 Feb 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201902/27/7个开放式的前端面试题 不关你是面试官还是求职者，里面的思路都能让你获益匪浅。 如何保证你的网站或 Web 应用的可访问性？ 解析： 前端开发人员在为最终用https://fe-tech.viewnode.com/post/201902/26/Tue, 26 Feb 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201902/26/前端和 JavaScript 是一个奇怪的世界。大量不断推出的新技术的同时，也在被不需要它们的人嘲笑，往往很多人都会这样做。我们有时会对不断涌现的信息、库和讨论感https://fe-tech.viewnode.com/post/201902/25/Mon, 25 Feb 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201902/25/在本文中，我们在 Node.js 中把 shell 命令作为子进程运行。然后异步读取这些进程的 stdout 并写入其 stdin。 在子进程中运行 shell 命令 首先从在子进程中运行 shell 命令开始：https://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/20/Wed, 20 Feb 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201902/20/摘要：通过渐进式 Web 应用（Progressive Web Apps）技术，你可以开发成熟的 Web 应用。 得益于大量新规范和新功能，以前需要在本机执行的应用，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/31/Thu, 31 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/31/浏览器对 CSS粘性定位有着非常好的支持，但很多开发者都没有用过它。 究其原因有两个： 第一，受到浏览器的良好支持需要漫长的等待：浏览器的支持往往https://fe-tech.viewnode.com/post/201901/29/Tue, 29 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/29/介绍 Flexbox是 Flexible Box Module（弹性盒模型）的缩写。 是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。 Flexbox同一时https://fe-tech.viewnode.com/post/201901/28/Mon, 28 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/28/你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可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/16/Wed, 16 Jan 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201901/16/前文目录： 现代浏览器探秘(part1)：架构 现代浏览器探秘(part2)：导航 现代浏览器探秘(part3)：渲染 现代浏览器探秘(part4)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/14/Mon, 14 Jan 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201901/14/现代浏览器探秘(part1)：架构 现代浏览器探秘(part2)：导航 渲染器进程的内部工作原理 这是关于浏览器内部工作原理系列的第3部分。 之前，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/10/Thu, 10 Jan 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201901/10/导航时都发生了什么 这是关于Chrome内部工作原理系列的第2部分。 在上一篇文章 中，我们研究了不同的进程与线程是怎样如何处理浏览器不同部分的。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/08/Tue, 08 Jan 2019 12:00:00 +0800https://fe-tech.viewnode.com/post/201901/08/CPU，GPU，内存和多进程架构 在这个由4部分组成的系列文章中，我们将介绍Chrome浏览器从高级架构到渲染管道的具体细节。 如果你想知道浏览https://fe-tech.viewnode.com/post/201901/07/Mon, 07 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/07/在过去的几年里，我在亚马逊和雅虎面试过许多前端工程师。在这篇文章中，我想分享一些技巧，帮助大家做好准备。 免责声明： 本文的目的并不是为你列出在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/201901/03/Thu, 03 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/03/前一段时间，有很多关于用CSS构建的“键盘记录器”的讨论（源代码见：https://github.com/maxchehab/CSS-Keyhttps://fe-tech.viewnode.com/post/201901/02/Wed, 02 Jan 2019 11:00:00 +0800https://fe-tech.viewnode.com/post/201901/02/人们总是认为我懂的很多。 这种想法并不那么差劲，所以我对此并不排斥。 （不过有少数人尽管知识渊博，但他们往往遭受相反的偏见，这很糟糕。） 在本文中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）中的最新功能，同时找到相关的示例代码更加困难。 为了解决这个问题，我将在本文中介绍