<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>前端技术 on 疯狂的技术宅</title><link>https://fe-tech.viewnode.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/</link><description>Recent content in 前端技术 on 疯狂的技术宅</description><generator>Hugo -- gohugo.io</generator><language>zh-CN</language><lastBuildDate>Mon, 21 Jun 2021 10:00:00 +0800</lastBuildDate><atom:link href="https://fe-tech.viewnode.com/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/index.xml" rel="self" type="application/rss+xml"/><item><title>如何跨多个浏览器和设备同步测试网站</title><link>https://fe-tech.viewnode.com/post/202106/21/</link><pubDate>Mon, 21 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/21/</guid><description>在构建响应式网站时，我们需要在不同大小的屏幕下对其进行测试，来确保页面布局在这些屏幕上正确渲染。当然我们可以很方便的使用 screen-size 和 Chrome 中的设备模拟器</description></item><item><title>6个好用的 vue 内容加载动画库</title><link>https://fe-tech.viewnode.com/post/202106/15/</link><pubDate>Tue, 15 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/15/</guid><description>大家都不喜欢等待页面的长时间加载。看一下 Google 在 2017 年的统计数据就可以知道加载时间和跳出率的关联。 如果给你的网站添加视觉反馈很容易留住用户，因为这</description></item><item><title>JavaScript 中回调、Promise 和 Async/Await 的代码案例</title><link>https://fe-tech.viewnode.com/post/202106/14/</link><pubDate>Mon, 14 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/14/</guid><description>本文将通过代码示例展示如何使用基于回调的 API，然后将其改成使用 Promises，最后再用 Async/Await 语法。本文不会详细解释回调、promise 和 Async/Await 语</description></item><item><title>7个使 vue 开发如虎添翼的VS Code 扩展</title><link>https://fe-tech.viewnode.com/post/202106/09/</link><pubDate>Wed, 09 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/09/</guid><description>作为一个 Vue 搬砖工，我一直在为 Vue 开发寻找合适的 VS Code 扩展。以下是一些好用的扩展，可以让我们在搬砖时更加轻松。 Vetur 链接：https://market</description></item><item><title>用好 Vue 中 v-for 循环的 7 种方法</title><link>https://fe-tech.viewnode.com/post/202106/07/</link><pubDate>Mon, 07 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/07/</guid><description>Vue 中的 v-for 循环允许你在模板代码中编写 for 循环，尤其是当我们做下面的操作时非常有用： 渲染数组或列表 遍历对象属性 在最基本的用法中，v-for 循环是这</description></item><item><title>什么情况下可以使用 JavaScript 中的 Boolean 函数</title><link>https://fe-tech.viewnode.com/post/202106/03/</link><pubDate>Thu, 03 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/03/</guid><description>用 Boolean 进行真实检查 Boolean() 函数在对数据进行真值检查时特别有用，并且可能比双重否定 (!!) 操作更具可读性： let x = &amp;#39;some-value&amp;#39;; // 这看起来不太美观 if (!!x) { // ... } // 这更具可读</description></item><item><title>JavaScript 中的提升是什么？</title><link>https://fe-tech.viewnode.com/post/202106/02/</link><pubDate>Wed, 02 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/02/</guid><description>在执行JavaScript代码之前，js引擎首先会对其进行解析和编译。在编译阶段，变量和函数声明被放入内存，这被称为提升（hoisting）</description></item><item><title>创建你自己的 vue 自定义指令</title><link>https://fe-tech.viewnode.com/post/202106/01/</link><pubDate>Tue, 01 Jun 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202106/01/</guid><description>在 Vue 中，指令是用来直接编辑 DOM 的一种好方法。你肯定熟悉 vue 中的 v-if, v-show, v-bind 这些指令。 vue 自定义指令是，正如你可能猜到的那样，Vue的方式让我们为我们的项</description></item><item><title>vue 的 Suspense 组件</title><link>https://fe-tech.viewnode.com/post/202105/31/</link><pubDate>Mon, 31 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/31/</guid><description>Suspense 组件是 Vue3 中众所周知的特征之一。它可以使我们的 vue 程序在等待异步组件时渲染一些后备内容，从而使用户产生平滑流畅的体验。 Suspense 组件很容易理解，也不需</description></item><item><title>写给 js 程序员的 Dart 语言教程</title><link>https://fe-tech.viewnode.com/post/202105/30/</link><pubDate>Sun, 30 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/30/</guid><description>让我们以 JS 程序员的身份学习 Dart 语言：深入研究 OOP、类、继承和 mixins、异步、回调、async/await 和流。 本文针对那些了解 React</description></item><item><title>给 vue.js 项目添加拖放功能</title><link>https://fe-tech.viewnode.com/post/202105/28/</link><pubDate>Fri, 28 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/28/</guid><description>添加拖放功能是使你的程序更加自然和友好的方法。尽管有一些提供拖放功能的库，但是了解它们在底层的工作原理是非常有意义的。 在本文中，我们将用内置</description></item><item><title>用 Provide 和 Inject 设计Vue3插件</title><link>https://fe-tech.viewnode.com/post/202105/26/</link><pubDate>Wed, 26 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/26/</guid><description>使用 Provide 和 Inject 的 Vue依赖项注入对于构建Vue3插件或避免 prop 钻取非常有用。 尽管不常用，但是你可以仅使用两种内置方法来实现依赖项注入：provid</description></item><item><title>Vue3 中的包装器组件</title><link>https://fe-tech.viewnode.com/post/202105/25/</link><pubDate>Tue, 25 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/25/</guid><description>包装器组件非常有用，可以使你的代码库更有条理、更专业。 包装器组件是通过添加某些自定义功能、样式或其他功能来修改原生元素或第三方库的自定义组件</description></item><item><title>如何注册 Vue3 全局组件</title><link>https://fe-tech.viewnode.com/post/202105/21/</link><pubDate>Fri, 21 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/21/</guid><description>随着新版本的Vue3现在，开始学习新的更新如何改变我们编写代码的方式是有用的。一个示例是我们编写index.js文件方式的更改（处理创建我们</description></item><item><title>Vue3 中的 Teleport</title><link>https://fe-tech.viewnode.com/post/202105/20/</link><pubDate>Thu, 20 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/20/</guid><description>门户（Portal）的概念是Vue3的新功能之一，也就是将模板 HTML 移至 DOM 的不同部分的方法。 Portal 是 React 中的常见功能，Vue2 的 portal-vue 库也提供了相似的功能</description></item><item><title>vue 中的组件插槽</title><link>https://fe-tech.viewnode.com/post/202105/19/</link><pubDate>Wed, 19 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/19/</guid><description>在 Vue 中，插槽（Slots）是组件将内容“注入”到子组件的另一种方式。是使用模板代码来完成的。 在最终输出时，插槽的执行与 Vue 中的 prop 类似的功能——</description></item><item><title>4 个 Vue 路由过渡动效</title><link>https://fe-tech.viewnode.com/post/202105/17/</link><pubDate>Mon, 17 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/17/</guid><description>Vue 路由过渡是对 Vue 程序一种快速简便的增加个性化效果的的方法。 可以让你在程序的不同页面之间增加平滑的动画和过渡。如果使用得当，可以使你的程序显得</description></item><item><title>快速创建HTML文档的三种方法</title><link>https://fe-tech.viewnode.com/post/202105/12/</link><pubDate>Wed, 12 May 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202105/12/</guid><description>有时我们需要即时动态的创建 HTML 文档，无论是目标页，还是显示确定的页面，或者是包含整个页面的 iframe，如果文档足够简单，则可以轻松地将其放在</description></item><item><title>怎样把箭头函数作为事件侦听器的回调</title><link>https://fe-tech.viewnode.com/post/202104/29/</link><pubDate>Thu, 29 Apr 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202104/29/</guid><description>箭头函数 ES6 引入了箭头函数的概念，这是一种新的定义和编写函数的方法。虽然它看起来像是常规函数的句法糖，但它们之间的关键差异是对 this 的绑定方式。在</description></item><item><title>代码越写越乱？那是因为你没用责任链</title><link>https://fe-tech.viewnode.com/post/202104/27/</link><pubDate>Tue, 27 Apr 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202104/27/</guid><description>目的 在开始学习责任链之前，先看一下在开发中常见的问题。下面是前端用来处理 API 错误码的代码： const httpErrorHandler = (error) =&amp;gt; { const errorStatus = error.response.status; if (errorStatus === 400) { console.log</description></item><item><title>用装饰器模式解决频繁修改的需求</title><link>https://fe-tech.viewnode.com/post/202104/25/</link><pubDate>Sun, 25 Apr 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202104/25/</guid><description>目的 装饰器模式（Decorator Pattern） 的目的非常简单，那就是： 在不修改原有代码的情况下增加逻辑。 这句话听起来可能有些矛盾，既然都</description></item><item><title>用 Enum 提高TypeScript代码的可读性</title><link>https://fe-tech.viewnode.com/post/202104/23/</link><pubDate>Fri, 23 Apr 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202104/23/</guid><description>Enum Enum 是在 TypeScript 中新增的语法，也叫做枚举，一般用它来管理多个相同系列的常量（即不能被修改的变量），用于状态的判断。 在 Web 中比较常见的状态判断，是在处</description></item><item><title>一些不好记却很好用的 CSS 属性</title><link>https://fe-tech.viewnode.com/post/202104/22/</link><pubDate>Thu, 22 Apr 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202104/22/</guid><description>一些不好记却很好用的 CSS 属性 前言 在写过一点时间 CSS 之后，大家对于常见的属性应该都很熟了，例如最基本的 display、position、paddi</description></item><item><title>用 JS 玩转 iOS 快捷指令</title><link>https://fe-tech.viewnode.com/post/202103/30/</link><pubDate>Tue, 30 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/30/</guid><description>前言 在 GitHub 上闲逛时，发现一个叫做 shortcuts-js 的项目，其描述写的是“A JavaScript iOS 12 快捷指令 creator”，花了几个小时的时间玩了一下，发现挺不错。 iOS 12 推出了一</description></item><item><title>DOM Clobbering 的原理及应用</title><link>https://fe-tech.viewnode.com/post/202103/25/</link><pubDate>Thu, 25 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/25/</guid><description>前言 做为一个前端程序猿，肯定应该知道很多与前端相关的知识，像是 HTML 或是 JS 相关的东西，但这些通常都与“使用”有关。例如说我知道写 HTML 的时候要语义化</description></item><item><title>一个能够确定 this 值的算法</title><link>https://fe-tech.viewnode.com/post/202103/19/</link><pubDate>Fri, 19 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/19/</guid><description>每个 JavaScript 程序猿，包括我自己，都一直在努力了解 this 关键字在代码中的真正身份。 我设计了一个通用算法，可以帮你在任何情况下确定 this 关键字的值。虽然我尽可</description></item><item><title>ES2018 中 4 个有用的功能</title><link>https://fe-tech.viewnode.com/post/202103/18/</link><pubDate>Thu, 18 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/18/</guid><description>ES2018 规范引入了四个新功能。这些功能包括异步迭代，rest/spread 属性，Promise.prototype.finally() 和正则表达式</description></item><item><title>仅用10分钟用Hugo打造一个静态网站</title><link>https://fe-tech.viewnode.com/post/202103/17/</link><pubDate>Wed, 17 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/17/</guid><description>什么是静态网站生成器？ 简简单的说，静态网站生成器会获取你的内容，并将其应用于模板，然后生成基于 HTML 的静态网站。非常适合个人博客。 好处： 快速部署</description></item><item><title>Sass / SCSS 入门教程</title><link>https://fe-tech.viewnode.com/post/202103/15/</link><pubDate>Mon, 15 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/15/</guid><description>Sass / SCSS简介 Sass 是 CSS3 的扩展，添加了嵌套规则、变量、mixins、选择器继承等。可以用命令行工具或网络框架插件将其转换为格式良好的标准 CSS</description></item><item><title>对网站进行测试的 9 个要点</title><link>https://fe-tech.viewnode.com/post/202103/12/</link><pubDate>Fri, 12 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/12/</guid><description>网站或网页的效率在很大程度上取决于测试，并且涉及对网站或相关软件的细致检查。那么我们如何该测试 Web 程序呢？在探究 Web 程序测试服务的更多细节之前，</description></item><item><title>Web 安全简明入门指南</title><link>https://fe-tech.viewnode.com/post/202103/10/</link><pubDate>Wed, 10 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/10/</guid><description>Web 安全已经是 Web 开发中一个重要的组成部分，而许多程序猿往往希望专注于程序的实现，而忽略了信息安全的实质。如果没有严谨地考虑到信息安全问题，等出</description></item><item><title>ES2019 中 8 个非常有用的功能</title><link>https://fe-tech.viewnode.com/post/202103/08/</link><pubDate>Mon, 08 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/08/</guid><description>ES2019 规范是对 JavaScript的小规模扩展，但仍带来了一些有趣的功能。本文向你展示八个 ES2019 的功能，这些功能可以使你的开发变得更轻松。 String.prototype.trimStart() 和 String.prototype.trimEnd() 有时</description></item><item><title>关于 Node.js 中的异步迭代器</title><link>https://fe-tech.viewnode.com/post/202103/04/</link><pubDate>Thu, 04 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/04/</guid><description>从 10.0.0 版开始，异步迭代器就出现在 Node 中了，在本文中，我们将讨论异步迭代器的作用，以及它们可以用在什么地方。 什么是异步迭代器 异步迭代器实际上是以前</description></item><item><title>即将发布的 ES2021（ES12）中有哪些有趣的功能</title><link>https://fe-tech.viewnode.com/post/202103/02/</link><pubDate>Tue, 02 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/02/</guid><description>简述 ES2021（ES12）将于 2021 年中发布。在本文中，你将将会了解五个最有趣的功能：String.prototype.replaceAll(</description></item><item><title>用装饰器模式增强 fetch()</title><link>https://fe-tech.viewnode.com/post/202103/01/</link><pubDate>Mon, 01 Mar 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202103/01/</guid><description>fetch() 很好用，但还能更好用 fetch() API使你可以在 Web 应用中执行网络请求。 fetch() 的用法非常简单：通过调用 fetch('/movies.json') 启动请求，请求完成后得到一个 Response 对象，然后从中提取数</description></item><item><title>在 promise 中 then 和 finally 有什么区别</title><link>https://fe-tech.viewnode.com/post/202102/27/</link><pubDate>Sat, 27 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/27/</guid><description>看上去 promise.prototype.then() 和 promise.prototype.finally 似乎非常相似。但是你需要明白它们有一些重要的差异。 第一个也最明显的是 finally() 没有得到 promise 链的结果。由于 finally() 没有收到值，因此无法更改 promise 的已解</description></item><item><title>关于 JavaScript 方法的全部知识点都在这了</title><link>https://fe-tech.viewnode.com/post/202102/25/</link><pubDate>Thu, 25 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/25/</guid><description>1. 什么是方法 首先让我们定义并调用常规函数： function greet(who) { return `Hello, ${who}!`; } greet(&amp;#39;World&amp;#39;); // =&amp;gt; &amp;#39;Hello, World!&amp;#39; 常规函数定义的形式为关键字 function 后跟名称、参数和函数体：function greet(who) {...} 。</description></item><item><title>array.sort() 的这些坑你踩过没有</title><link>https://fe-tech.viewnode.com/post/202102/22/</link><pubDate>Mon, 22 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/22/</guid><description>在 JavaScript 中可以用 array.sort() 对数组进行排序。下面用它来对一些数字进行排序： const numbers = [10, 5, 11]; numbers.sort(); // =&amp;gt; [10, 11, 5] 呃。。。 numbers.sort() 的返回值居然是 [10，11，5]，这是怎么回事</description></item><item><title>在 javascript 中如何使用解构赋值语法？</title><link>https://fe-tech.viewnode.com/post/202102/20/</link><pubDate>Sat, 20 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/20/</guid><description>首先在 ES6中引入的“解构赋值语法”允许把数组和对象中的值插入到不同的变量中。虽然看上去可能很难，但实际上很容易学习和使用。 数组解构 数组解构</description></item><item><title>创建自己的查询选择器</title><link>https://fe-tech.viewnode.com/post/202102/19/</link><pubDate>Fri, 19 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/19/</guid><description>很多人都熟悉 jQuery，但是很少有人知道 Chrome Console 的 $ 和 $$ 这两个选择器的简写形式。我最近想出可以在自己的代码中复用这些选择器的方法，只需要使用 Document.querySelector(),</description></item><item><title>用 JavaScript 检测大写锁定键的状态</title><link>https://fe-tech.viewnode.com/post/202102/18/</link><pubDate>Thu, 18 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/18/</guid><description>有的时候尤其是在进行密码输入时，我们需要检查键盘上的 Caps Lock 键是否被打开，并通知用户。这时可以通过用 KeyboardEvent.getModifierState() 方法 CapsLock 的值来执行此操作。换句话说，我们必须</description></item><item><title>如何在JavaScript中克隆数组？</title><link>https://fe-tech.viewnode.com/post/202102/17/</link><pubDate>Wed, 17 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/17/</guid><description>JavaScript 提供了很多克隆数组的方法，其中大多数在性能和结果方面都非常相似。以下就是这些方法的简要介绍。 展开运算符 ES6 引入了展开运算符（...），它可能</description></item><item><title>JavaScript console.log() 技巧与窍门</title><link>https://fe-tech.viewnode.com/post/202102/16/</link><pubDate>Tue, 16 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/16/</guid><description>每个前端都会用 JavaScript 控制台打日志或调试。但是 console 对象比 console.log() 有更多的东西。 计算属性名称 ES6 的计算属性名称特别有用，因为它们可以通过在变量周围添加一对大括</description></item><item><title>用 Chrome DevTools 调试 Node.js</title><link>https://fe-tech.viewnode.com/post/202102/15/</link><pubDate>Mon, 15 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/15/</guid><description>JavaScript, Node, Debugging 从 v 6.3.0 开始，可以用 Chrome Developer Tools 调试 Node.js。以下是操作步骤： 在自己的机器上安装 Node.js v6.3.0 或更高版本。 使用 --inspect-brk 标志运行 node（例如：node --inspect-brk</description></item><item><title>JavaScript中的 Object.is() 与 === 运算符有什么区别？</title><link>https://fe-tech.viewnode.com/post/202102/12/</link><pubDate>Fri, 12 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/12/</guid><description>如果要检查 JavaScript 中的相等性，有两个比较运算符：双等号运算符（==）和三等号运算符（===）。 简而言之，双等号运算符（==）仅仅比较值，而三等号运</description></item><item><title>如何在JavaScript中清空数组？</title><link>https://fe-tech.viewnode.com/post/202102/11/</link><pubDate>Thu, 11 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/11/</guid><description>在使用 JavaScript 数组时，一个很常见的问题是如何清空数组并删除其所有元素。有几种方法可以解决这个问题，每种方法都各有利弊。 将其分配给一个空数组 你可以通</description></item><item><title>10个写TypeScript代码的坏习惯</title><link>https://fe-tech.viewnode.com/post/202102/10/</link><pubDate>Wed, 10 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/10/</guid><description>近几年 TypeScript 和 JavaScript 一直在稳步发展。我们在过去写代码时养成了一些习惯，而有些习惯却没有什么意义。以下是我们都应该改正的 10 个坏习惯。 1.不使用 strict 模式 这</description></item><item><title>15 个优秀的响应式 CSS 框架</title><link>https://fe-tech.viewnode.com/post/202102/08/</link><pubDate>Mon, 08 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/08/</guid><description>响应式 Web 设计旨在为各种设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的</description></item><item><title>浅析 JavaScript 中的方法链</title><link>https://fe-tech.viewnode.com/post/202102/07/</link><pubDate>Sun, 07 Feb 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202102/07/</guid><description>方法链是一种流行的编程方法，可以帮助你写出更简洁易读的代码。在本文中我们一起学习 JavaScript 中的方法链是什么，以及它是怎样工作的。另外我们还会探讨如何</description></item><item><title>Node.js 的 QUIC 支持</title><link>https://fe-tech.viewnode.com/post/202101/22/</link><pubDate>Fri, 22 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/22/</guid><description>在2019年3月，受到 NearForm 和 Protocol Labs 的支持，我开始为 Node.js 实现 QUIC 协议 支持。这个基于 UDP 的新传输协议旨在最终替代所有使用 TCP 的 HTTP 通信。 熟悉 UDP 的人可能会产生质</description></item><item><title>JS 中循环遍历数组方式总结</title><link>https://fe-tech.viewnode.com/post/202101/21/</link><pubDate>Thu, 21 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/21/</guid><description>本文比较并总结遍历数组的四种方式： for 循环： for (let index=0; index &amp;lt; someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环： for (const key in someArray) { console.log(key); } 数组方法 .forEach()： someArray.forEach((elem, index) =&amp;gt; { console.log(elem,</description></item><item><title>数组将要新增的方法：array.at(index)</title><link>https://fe-tech.viewnode.com/post/202101/19/</link><pubDate>Tue, 19 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/19/</guid><description>除了普通对象之外，数组是 JavaScript 中使用最广泛的数据结构。数组上最常使用的操作是按索引访问元素。 本文介绍新的数组方法 array.at（index）。</description></item><item><title>用WebAssembly在浏览器中对视频进行转码</title><link>https://fe-tech.viewnode.com/post/202101/18/</link><pubDate>Mon, 18 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/18/</guid><description>我们可以凭借 FFmpeg 的 WebAssembly 版直接在浏览器中运行这个能强大的视频处理工具。在本文中，我们来探索一下 FFmpeg.wasm ，并写一个简单的代码转换器，把数据流传输到视频元素</description></item><item><title>DOM节点和元素之间有什么区别</title><link>https://fe-tech.viewnode.com/post/202101/15/</link><pubDate>Fri, 15 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/15/</guid><description>文档对象模型（DOM）是将 HTML 或 XML 文档视为树结构的接口，其中每个节点（node）都是文档的对象。 DOM 还提供了一组用于查询树、修改结构和样式的方法</description></item><item><title>如果await 同一个 Promise 两次会怎么样？</title><link>https://fe-tech.viewnode.com/post/202101/14/</link><pubDate>Thu, 14 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/14/</guid><description>先看下面这道面试题： let counter = 0; const increment = new Promise(resolve =&amp;gt; { counter++; resolve(); }); await increment; await increment; console.log(counter); // 结果是什么？ 你认为 counter 的值是什么？ 什么是 promise ？这是否意味着“稍后再做”？ 实际上应该把</description></item><item><title>为什么 Promise 比setTimeout() 更快？</title><link>https://fe-tech.viewnode.com/post/202101/11/</link><pubDate>Mon, 11 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/11/</guid><description>实验 先做一个实验：来看看立即解决的 Promise 和立即超时（ 0 毫秒的超时）哪个执行的更快？ Promise.resolve(1).then(function resolve() { console.log(&amp;#39;Resolved!&amp;#39;); }); setTimeout(function timeout() { console.log(&amp;#39;Timed out!&amp;#39;); }, 0); // logs &amp;#39;Resolved!&amp;#39; // logs &amp;#39;Timed out!&amp;#39; Promise.resolve(1) 是一个静态函数，可返回</description></item><item><title>HTML 5 拖放API 教程</title><link>https://fe-tech.viewnode.com/post/202101/08/</link><pubDate>Fri, 08 Jan 2021 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202101/08/</guid><description>拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。 在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项</description></item><item><title>关于 JavaScript 回调函数的所有知识</title><link>https://fe-tech.viewnode.com/post/202012/30/</link><pubDate>Wed, 30 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/30/</guid><description>回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。 本文将会解释回调函数的概念，同时帮你区</description></item><item><title>你可能已经忘记了这些 HTML标签的作用</title><link>https://fe-tech.viewnode.com/post/202012/29/</link><pubDate>Tue, 29 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/29/</guid><description>随着对 JavaScript 框架和库的依赖越来越深，很多人对 HTML 的重视程度降低了。这就导致了我们无法充分利用 HTML 的很多功能，这些功能可以大大的增强网站功能。另外通过</description></item><item><title>TypeScript 高级类型总结</title><link>https://fe-tech.viewnode.com/post/202012/23/</link><pubDate>Wed, 23 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/23/</guid><description>TypeScript 是一种类型化的语言，允许你指定变量、函数参数、返回的值和对象属性的类型。 以下是 TypeScript 高级类型的使用方法总结，而且带有例子。 Intersection 类型 Intersection 类型是一种把</description></item><item><title>分析 gulp 的运作方式</title><link>https://fe-tech.viewnode.com/post/202012/22/</link><pubDate>Tue, 22 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/22/</guid><description>要说到 gulp 的运作方式，就不得不提到 vinyl 和 Node.js 的 stream vinyl vinyl 是 gulp 所使用的虚拟的文件格式，在它的自述文件是这么说的：“当提到文件时你首先想到的是什么？肯定是</description></item><item><title>2020 年 Chrome 开发者峰会的亮点</title><link>https://fe-tech.viewnode.com/post/202012/21/</link><pubDate>Mon, 21 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/21/</guid><description>2020 年的Chrome 开发者峰会和往年有所不同，今年是在线上召开的，每次谈话大约十分钟，讨论规模更大。虽然我没有在第一时间观看会议的直播，但是看</description></item><item><title>手写一个 babel 插件</title><link>https://fe-tech.viewnode.com/post/202012/17/</link><pubDate>Thu, 17 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/17/</guid><description>在前文《babel是怎样工作的 》中介绍了 Bable 中的的AST，这次咱们给 bable 写一个插件，文中会覆盖大部份的用法，如果你对某些细节不是很明白，可以去看</description></item><item><title>在 JavaScript 中正确处理变量</title><link>https://fe-tech.viewnode.com/post/202012/15/</link><pubDate>Tue, 15 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/15/</guid><description>变量无处不在。即便我们写一个小函数或一个小工具，也要对变量进行声明、赋值和读取等操作。提高对变量的重视，可以增加代码的可读性和可维护性。。 1</description></item><item><title>还在用 console.log() 调试 js 代码？</title><link>https://fe-tech.viewnode.com/post/202012/14/</link><pubDate>Mon, 14 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/14/</guid><description>JavaScript中的 console 对象可用于访问浏览器调试控制台，可以用它在控制台中输出代码中变量的值。 不过很多人都只用 console.log() 在浏览器控制台中进行输出调</description></item><item><title>9 个好用的 JavaScript 小技巧</title><link>https://fe-tech.viewnode.com/post/202012/11/</link><pubDate>Fri, 11 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/11/</guid><description>黑客的方法论是一种涉及不断改进和迭代的构建方法。黑客们认为总有一天会变得更好，而且没有什么是永远不能够实现的。 真正的黑客总是用不同的方式来解</description></item><item><title>ES2020 的新功能</title><link>https://fe-tech.viewnode.com/post/202012/10/</link><pubDate>Thu, 10 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/10/</guid><description>Ecma International 负责对 JavaScript 标准化。是他们制定了 ECMAScript 规范。当提到 ECMAScript 时，基本上可以把它看作是 JavaScript 的同义词。从 2015 年开始，开始用年份标记版本，即 ECMAScript 2015 缩写为 ES2015</description></item><item><title>babel是怎样工作的</title><link>https://fe-tech.viewnode.com/post/202012/07/</link><pubDate>Mon, 07 Dec 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202012/07/</guid><description>babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。 转换成AS</description></item><item><title>给 eslint 写一个插件</title><link>https://fe-tech.viewnode.com/post/202011/27/</link><pubDate>Fri, 27 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/27/</guid><description>eslint 是很有名的 linter，地球上每一个 JavaScript 程序员都应该知道。 linter 是一种代码静态分析工具，它可以帮你找到代码中可能存在的错误与 bug，也能找出代码</description></item><item><title>你知道 Chrome 为调试专门提供的这些函数吗？</title><link>https://fe-tech.viewnode.com/post/202011/19/</link><pubDate>Thu, 19 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/19/</guid><description>在 Chrome 的 DevTools 中的控制台提供了一些 Debug 专用的函数，每一个都身怀绝技。 Console Utility Functions 这些函数只能用在 Chrome 的 console 中。当我在第一次看到这些函数时非常兴奋，把它们直接写</description></item><item><title>详解 JavaScript 中的模块、Import和Export</title><link>https://fe-tech.viewnode.com/post/202011/16/</link><pubDate>Mon, 16 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/16/</guid><description>在互联网的洪荒时代，网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中，通常是以小片段的形式提供效果和交互，一般会把所有的 JavaScript 代码全都写在一个</description></item><item><title>JavaScript 代码加不加分号有什么区别</title><link>https://fe-tech.viewnode.com/post/202011/13/</link><pubDate>Fri, 13 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/13/</guid><description>这个问题在很多文章找那个都讨论过，在 ESlint 规范中也因为加不加分号而分为两大阵营，到于加不加分号，关键是需要了解分号对于 JavaScript 的影响，开始之前可以先看</description></item><item><title>在调用函数时到底可以传多少个参数</title><link>https://fe-tech.viewnode.com/post/202011/10/</link><pubDate>Tue, 10 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/10/</guid><description>在创建一个函数并调用时可以传入一些参数或变量，不过函数究竟可以有多少可用的参数呢？？ 函数中的变量 以下通过一个例子来检查在调用函数时会有哪些变</description></item><item><title>怎样把 Node.js 中的回调转换为 Promise</title><link>https://fe-tech.viewnode.com/post/202011/09/</link><pubDate>Mon, 09 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/09/</guid><description>介绍 在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。 在 ES6 中引入了 Promise 作为这些问题的解决方</description></item><item><title>JS 内存管理机制及验证</title><link>https://fe-tech.viewnode.com/post/202011/06/</link><pubDate>Fri, 06 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/06/</guid><description>作用域 JavaScript 的变量被作用域所限制，如果超出了作用域，那么变量就没有办法再被使用，这样做的优点是： 可以避免当前的变量转为全局变量 有效限制变量的作用</description></item><item><title>JavaScript 开发中常见错误解决小总结</title><link>https://fe-tech.viewnode.com/post/202011/05/</link><pubDate>Thu, 05 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/05/</guid><description>身为一名前端打工人，当然是经验越多，在排查错误时会更容易。道理都懂，但仍然会在遇到问题时会不知道怎样着手。 Chrome DevTools 中的常见错误排查 Chrome 开发者工具的</description></item><item><title>跨域请求产生错误的原因及处理方法</title><link>https://fe-tech.viewnode.com/post/202011/03/</link><pubDate>Tue, 03 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/03/</guid><description>如果你在开发网站时曾经尝试通过框架或是浏览器的 fetch、XHR 请求过外部 API 的话，那么一定遇到过跨域请求，还有那个触目惊心的 CORS 错误信息；今天</description></item><item><title>什么是原型链</title><link>https://fe-tech.viewnode.com/post/202011/02/</link><pubDate>Mon, 02 Nov 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202011/02/</guid><description>今天聊聊很多人搞不清的“对象原型“及 ”原型链“。 对象原型 相信大家都这样用过 map ： let arr = [0, 1, 2] let doubleArr = arr.map(c =&amp;gt; c * 2) console.log(doubleArr) // 0, 2, 4 不知道你有没有想过， arr 本</description></item><item><title>处理异步事件的三种方式</title><link>https://fe-tech.viewnode.com/post/202010/30/</link><pubDate>Fri, 30 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/30/</guid><description>在Web开发中，异步事件是项目必然需要处理的一个环节，也因为前端框架的兴起，通过框架实现的 SPA 已经是快速建构网站的标配了，一部获取数据也就成了</description></item><item><title>常见的网站安全问题</title><link>https://fe-tech.viewnode.com/post/202010/29/</link><pubDate>Thu, 29 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/29/</guid><description>常见的网站安全问题 经过一番 996，精心打造的网站眼看就要部属上线了，但在网站正式上线之前，你有没有想过自己的网站是否安全吗？尽管你的网站用了</description></item><item><title>浏览器 DOM 的事件代理指的是什么</title><link>https://fe-tech.viewnode.com/post/202010/28/</link><pubDate>Wed, 28 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/28/</guid><description>事件 在网页中，如果想与使用者进行“互动”，必须要通过某种方法知道他都做了什么。当然，浏览器开发者们早已根据 W3C 事件规范 实现好了底层的逻辑，我们</description></item><item><title>通过 POST 获取数据需要注意的问题</title><link>https://fe-tech.viewnode.com/post/202010/27/</link><pubDate>Tue, 27 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/27/</guid><description>现代网站越来越多的使用前后端分离架构，先用前端 MVC 框架快速堆砌出 SPA，再用 API 获取动态数据也已经成为日常的开发内容；而用来连接前后端的 API，</description></item><item><title>捕获冒泡？难道浏览器是鱼吗？</title><link>https://fe-tech.viewnode.com/post/202010/26/</link><pubDate>Mon, 26 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/26/</guid><description>身为一个前端码农，在开发中遇到凡是需要与用户互动或是需要由用户触发的功能，总是离不开事件处理。 今天聊聊浏览器的 DOM 事件传递机制。 DOM 事件 在浏览器</description></item><item><title>CSS 选择器是如何运作的？</title><link>https://fe-tech.viewnode.com/post/202010/23/</link><pubDate>Fri, 23 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/23/</guid><description>在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译</description></item><item><title>浅析script 标签的 async 和 defer 属性</title><link>https://fe-tech.viewnode.com/post/202010/21/</link><pubDate>Wed, 21 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/21/</guid><description>浅析script 标签的 async 和 defer 属性 前端当然要从 HTML 开始，这次来聊聊在 script 标签中加上 async/defer 时的功能及差异。 都明白的道理 我们都知道，浏览器解析 HTML 是一行一行</description></item><item><title>在 Vue.js 中集成 CSS 框架</title><link>https://fe-tech.viewnode.com/post/202010/19/</link><pubDate>Mon, 19 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/19/</guid><description>CSS 框架之所以出色是有很多原因的：比如代码更容易理解、Web 应用更容易维护、简化实现原型时的步骤等。一般来说在 VUE 中集成 CSS 框架的方法是相同的，本</description></item><item><title>JavaScript 中替换字符串的几种方法</title><link>https://fe-tech.viewnode.com/post/202010/16/</link><pubDate>Fri, 16 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/16/</guid><description>替换字符串中的文本是 JavaScript 中的常见任务。本文研究几种用 replace 和正则表达式替换文本的方法。 替换单个字串 通常 JavaScript 的 String replace() 函数只会替换它在字符串中找到的第一个</description></item><item><title>用 EventEmitter 处理 Node.js 中的事件</title><link>https://fe-tech.viewnode.com/post/202010/15/</link><pubDate>Thu, 15 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/15/</guid><description>在本教程中我们学习 Node.js 的原生 EvenEmitter 类。学完后你将了解事件、怎样使用 EvenEmitter 以及如何在程序中利用事件。另外还会学习 EventEmitter 类从其他本地模块扩展的内容，并通过一些</description></item><item><title>给本机运行的 React 程序配置 HTTPS</title><link>https://fe-tech.viewnode.com/post/202010/14/</link><pubDate>Wed, 14 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/14/</guid><description>如果用 create-react-app 构建一个程序，并且在本地运行，默认情况下会用 HTTP 协议为该程序提供服务。 而在生产环境中运行的程序都用 HTTPS 进行服务。 尽管说把 HTTPS 配置出来非常简</description></item><item><title>用Node.js处理CORS</title><link>https://fe-tech.viewnode.com/post/202010/13/</link><pubDate>Tue, 13 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/13/</guid><description>介绍 在本文中，我们将研究怎样用 Express 配置 CORS 以及根据需要定制 CORS 中间件。 什么是CORS CORS 是“跨域资源共享”的简写。它是一种允许或限制向 Web 服务器上请求</description></item><item><title>50个能帮你节省时间的开发工具</title><link>https://fe-tech.viewnode.com/post/202010/10/</link><pubDate>Sat, 10 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/10/</guid><description>本文列举出 50 个能够帮你提高开发效率，节省开发时间的 Chrome 扩展和 Web 应用，它们很有可能会在什么时候派上用场。老规矩，先转发、点赞、点再看三连，最后再</description></item><item><title>为 Vue 的惰性加载加一个进度条</title><link>https://fe-tech.viewnode.com/post/202010/09/</link><pubDate>Fri, 09 Oct 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202010/09/</guid><description>简介 通常用 Vue.js 编写单页应用（SPA）时，当加载页面时，所有必需的资源（如 JavaScript 和 CSS 文件）都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。</description></item><item><title>用Single-spa 创建基于 React 和 Vue 的微前端</title><link>https://fe-tech.viewnode.com/post/202009/30/</link><pubDate>Wed, 30 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/30/</guid><description>Single SPA Single SPA 是一个用于前端微服务的 javascript 框架。 它使你可以在单页应用中使用多个框架，这样就可以按功能拆分代码，并 能使 Angular、React、Vue</description></item><item><title>一些小众却有用的 Node.js 包</title><link>https://fe-tech.viewnode.com/post/202009/29/</link><pubDate>Tue, 29 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/29/</guid><description>yargs yargs 是一个用来处理命令行参数的包，可以帮你处理自行设置的命令行标志和输入的任何类型的数据，其中包括布尔值、浮点数和字符串等。这个包非常简单明</description></item><item><title>初探 TensorFlow.js</title><link>https://fe-tech.viewnode.com/post/202009/28/</link><pubDate>Mon, 28 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/28/</guid><description>在本文中我们来研究怎样用 TensorFlow.js 创建基本的 AI 模型，并使用更复杂的模型实现一些有趣的功能。我只是刚刚开始接触人工智能，尽管不需要深入的人工智能知识，</description></item><item><title>写 JavaScript 代码的几个小技巧</title><link>https://fe-tech.viewnode.com/post/202009/25/</link><pubDate>Fri, 25 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/25/</guid><description>1. 生成指定区间内的数字 有时候需要创建在某个数字范围内的数组。比如在选择生日时。以下是最简单的实现方法。 let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); // [ 1900, 1901, ..., 2000] // 也</description></item><item><title>检查 JavaScript 变量是否为数字的几种方式</title><link>https://fe-tech.viewnode.com/post/202009/23/</link><pubDate>Wed, 23 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/23/</guid><description>介绍 JavaScript 是一种动态类型的语言，这意味着解释器是在运行时确定变量类型的。这允许我们可以用同一变量中存储不同类型的数据。但是如果没有文档和保持一致</description></item><item><title>怎样设计一个 JavaScript 插件系统</title><link>https://fe-tech.viewnode.com/post/202009/17/</link><pubDate>Thu, 17 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/17/</guid><description>不管是 jQuery、 Vue 还是 React，它们都支持插件。 插件是库和框架中很常见的功能，并且有一个充分的理由：它们允许开发人员以安全、可扩展的方</description></item><item><title>在 JavaScript 中定义函数的几种不同方法</title><link>https://fe-tech.viewnode.com/post/202009/16/</link><pubDate>Wed, 16 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/16/</guid><description>你知道在 JavaScript 中创建一个函数有多少种方式吗？ 1. 声明函数 function sum(a, b) { return a + b; } 2. 表达式函数 // 可以命名: (function sum(a, b) { return a + b; }); // 也可匿名 (AVOID): (function(a, b) { return a + b; }); //</description></item><item><title>关于JavaScript计时器：你需要知道的一切</title><link>https://fe-tech.viewnode.com/post/202009/15/</link><pubDate>Tue, 15 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/15/</guid><description>先从一个面试题开始： JavaScript 面试题： setTimeout 和 setInterval 的源代码是在哪里实现的？ （不能百度和谷歌😎） 在继续往下看之前，请先在你的头脑子中回答问题 你的答案可能会是</description></item><item><title>JavaScript 的 var，let 和 const 总结</title><link>https://fe-tech.viewnode.com/post/202009/14/</link><pubDate>Mon, 14 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/14/</guid><description>var var 语句用来在 JavaScript 中声明一个变量，该变量遵守以下规则： 作用域范围是函数作用域或全局作用域的。 不受暂存死区（TDZ）的限制。 它会在 window 上以相同的名</description></item><item><title>Vuex 映射完全指南</title><link>https://fe-tech.viewnode.com/post/202009/10/</link><pubDate>Thu, 10 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/10/</guid><description>Vuex 是一把双刃剑。如果使用得当，使用 Vue 可以使你的工作更加轻松。如果不小心，它也会使你的代码混乱不堪。 使用 Vuex 之前，你应该先了解四个主要概念：st</description></item><item><title>面向对象与函数式编程的简单案例</title><link>https://fe-tech.viewnode.com/post/202009/09/</link><pubDate>Wed, 09 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/09/</guid><description>先简要介绍一下面向对象和函数式编程。 两者都是编程范式，在允许和禁止的技术上有所不同。 有仅支持一种范式的编程语言，例如 Haskell （纯函数式）。 还有支持</description></item><item><title>用 WebGL 做一个齿轮动画</title><link>https://fe-tech.viewnode.com/post/202009/08/</link><pubDate>Tue, 08 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/08/</guid><description>本文继续 “WebGL 的第一步 ” 中的内容，上一篇文章中我讲述了 WebGL是什么以及它是如何工作的，包括：shader、program、缓冲区、</description></item><item><title>学习WebGL的第一步</title><link>https://fe-tech.viewnode.com/post/202009/07/</link><pubDate>Mon, 07 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/07/</guid><description>在本文中，我们将了解什么是 WebGL，以及如何通过与 GPU 进行对话来绘制“三角形”。尽管有更好的方法来实现本文中的例子，例如用具有 2d 上下文的 canvas 甚</description></item><item><title>Async/Await有什么用？</title><link>https://fe-tech.viewnode.com/post/202009/04/</link><pubDate>Fri, 04 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/04/</guid><description>当我第一次看到 async/await 的描述时有点困惑，直到我了解了 async/await 的出处，才领悟到它的价值。本文我们来讨论 javascript 世界中最先进的异步编程思想之一。 什么是异步函数 javascript 中</description></item><item><title>顶级在线设计工具收藏</title><link>https://fe-tech.viewnode.com/post/202009/02/</link><pubDate>Wed, 02 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/02/</guid><description>介绍 这是一些精心挑选的在线工具，这些工具都经过了测试，我发现它们非常有用，并与大家分享。 背景 1. SVG BACKGROUNDS 与PNG、JPG 或 GIF一样，SVG 图像也</description></item><item><title>JavaScript 错误处理大全</title><link>https://fe-tech.viewnode.com/post/202009/01/</link><pubDate>Tue, 01 Sep 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202009/01/</guid><description>编程中有什么错误？ 在我们的程序中，事情并非一帆风顺。特别是在某些情况下，我们可能希望在停止程序或在发生不良状况时通知用户。 例如： 程序试图打开</description></item><item><title>Node.js 中的异步生成器和异步迭代</title><link>https://fe-tech.viewnode.com/post/202008/28/</link><pubDate>Fri, 28 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/28/</guid><description>生成器函数在 JavaScript 中的出现早于引入 async/await，这意味着在创建异步生成器（始终返回 Promise 且可以 await 的生成器）的同时，还引入了许多需要注意的事</description></item><item><title>快速优化 Web 性能的10 个手段</title><link>https://fe-tech.viewnode.com/post/202008/27/</link><pubDate>Thu, 27 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/27/</guid><description>优化网站的性能需要花费大量的时间，并且如果要根据自己的需求进行优化则花费的时间可能更多。 在本文中，我将向你展示 10 个快速优化 Web 性能的手段，能在</description></item><item><title>ES6 的循环和可迭代对象</title><link>https://fe-tech.viewnode.com/post/202008/26/</link><pubDate>Wed, 26 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/26/</guid><description>本文将研究 ES6 的 for ... of 循环。 旧方法 在过去，有两种方法可以遍历 javascript。 首先是经典的 for i 循环，它使你可以遍历数组或可索引的且有 length 属性</description></item><item><title>最全面的 Deno 入门教程</title><link>https://fe-tech.viewnode.com/post/202008/25/</link><pubDate>Tue, 25 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/25/</guid><description>Deno 是新的 JavaScript 和 TypeScript 运行时。Node.js 的发明者 Ryan Dahl 于 2020 年发布了 Deno，作为 Node.js 的改进。但是 Deno 不是 Node.js，而是全新的 JavaScript 运行时，同时也支持</description></item><item><title>Javascript 生成器（Generator）</title><link>https://fe-tech.viewnode.com/post/202008/24/</link><pubDate>Mon, 24 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/24/</guid><description>什么是生成器？ 生成器是在函数内部运行的一些代码 返回值后，它会自行暂停，并且—— 调用程序可以要求取消暂停并返回另一个值 这种“返回”不是传统的从</description></item><item><title>免费 UI 套件精选</title><link>https://fe-tech.viewnode.com/post/202008/21/</link><pubDate>Fri, 21 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/21/</guid><description>本文列出了精心挑选的清单，其中包含精美且免费的 UI 套件，这些套件可以直接从 Github 下载源代码。 Jinja版本由 AppSeed 提供，该平台使用自动化工具生成简单的</description></item><item><title>14个最佳免费图标资源网站</title><link>https://fe-tech.viewnode.com/post/202008/20/</link><pubDate>Thu, 20 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/20/</guid><description>在本文中我精心挑选出了 14 个最好的免费图标网站，使你不必再去四处寻找资源。 LineIcons 网址：https://lineicons.com/ LineIcons 是 2020 年最好的免</description></item><item><title>在Deno中使用 Node 模块</title><link>https://fe-tech.viewnode.com/post/202008/19/</link><pubDate>Wed, 19 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/19/</guid><description>Deno 是基于 Web 技术的服务器端代码执行环境。 Node 使用 JavaScript 与 commonjs 模块，并把 npm/yarn 作为其包管理器。 Deno 使用 Typescript 或 JavaScript， 以及现代的 javascript 导入语句。它不需要</description></item><item><title>在 JavaScript 中交换值的 10 种方法</title><link>https://fe-tech.viewnode.com/post/202008/17/</link><pubDate>Mon, 17 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/17/</guid><description>是的，你没有看错！在 JavaScript 中交换值的方法不止一种 在开发过程中又是我们需要对值进行交换。一般我们都在用一种简单的解决方案：“临时变量”。不过还有更</description></item><item><title>方便快捷的调试 Node.js 程序</title><link>https://fe-tech.viewnode.com/post/202008/14/</link><pubDate>Fri, 14 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/14/</guid><description>在调试程序时总是会遇到各种挑战。 Node.js 的异步工作流为这一艰巨的过程增加了额外的复杂性。尽管 V8 引擎为了方便访问异步栈跟踪进行了一些更新，但是在很多</description></item><item><title>10 个用纯 Javascript 实现的好用插件</title><link>https://fe-tech.viewnode.com/post/202008/12/</link><pubDate>Wed, 12 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/12/</guid><description>介绍 现代 JavaScript 框架使构建复杂的 Web 应用变得非常容易。 Vanilla JavaScript 指的是纯 Javascript 代码，没有使用任何框架进行扩展，这在创建小型应用程序时很好用。 1. Swiper.js Swiper 是免费的现代</description></item><item><title>JavaScript 空值合并运算符</title><link>https://fe-tech.viewnode.com/post/202008/11/</link><pubDate>Tue, 11 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/11/</guid><description>今年ECMAScript 2020（ES2020）将发布！自 2015 年 ECMAScript 2015（ES6）发布以来，我们每年都对 JavaScript 语言进行更新。 目录 使用 JavaScript 空值合并运</description></item><item><title>探索闭包</title><link>https://fe-tech.viewnode.com/post/202008/10/</link><pubDate>Mon, 10 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/10/</guid><description>闭包是令人困惑的，因为它是一个“无形的”概念。 当使用对象、变量或函数时，你会想：“在这里我需要一个变量”，然后将其添加到你的代码中。 闭包有各</description></item><item><title>构建一个带身份验证的 Deno 应用</title><link>https://fe-tech.viewnode.com/post/202008/06/</link><pubDate>Thu, 06 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/06/</guid><description>Node.js 的创建者 Ryan Dahl 创建了一个用于设计 Web 应用程序的新框架。他回过头来，利用在最初编写 Node 时还不可用的新技术，纠正了事后发现的一些错误。这就是 Deno （发音</description></item><item><title>在Node.js中使用Zip文件</title><link>https://fe-tech.viewnode.com/post/202008/05/</link><pubDate>Wed, 05 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/05/</guid><description>Working with Zip Files in Node.js Zip文件是常用的压缩文件格式。在本文中，我将演示如何用 adm-zip npm模块 创建和提取zip文件。 创建一个Zip文件 从 adm-zip 的 npm 模块中导出一</description></item><item><title>DevTools（Chrome 85）的新功能</title><link>https://fe-tech.viewnode.com/post/202008/04/</link><pubDate>Tue, 04 Aug 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202008/04/</guid><description>DevTools 是开发和测试 Web 应用时最有用的工具之一。在Chrome 85 中，DevTools 做了一些改进，例如： Network 面板的 Timing 选项卡现在增添了 respondWith 事件，该事件记录</description></item><item><title>浅析 JavaScript 中的事件委托</title><link>https://fe-tech.viewnode.com/post/202007/23/</link><pubDate>Thu, 23 Jul 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202007/23/</guid><description>为什么要进行事件委托？ 首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。 为了实现这个小功能，你需要选择按钮，然后再用 addEventListener() 方法来附加事件</description></item><item><title>深入研究 Node.js 的回调队列</title><link>https://fe-tech.viewnode.com/post/202007/21/</link><pubDate>Tue, 21 Jul 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202007/21/</guid><description>队列是 Node.js 中用于有效处理异步操作的一项重要技术。 在本文中，我们将深入研究 Node.js 中的队列：它们是什么，它们如何工作（通过事件循环）以及它们的类型。 Node.js</description></item><item><title>最简WebGL教程，仅需 75 行代码</title><link>https://fe-tech.viewnode.com/post/202007/14/</link><pubDate>Tue, 14 Jul 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202007/14/</guid><description>现代 OpenGL（以及名为WebGL的扩展）与我过去学习的传统 OpenGL 有很大不同。我了解栅格化的工作原理，所以对这些概念很满意。但是我所阅读的每篇</description></item><item><title>近距离观察 Vue 路由</title><link>https://fe-tech.viewnode.com/post/202007/06/</link><pubDate>Mon, 06 Jul 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202007/06/</guid><description>能够构建出色的单页应用程序（SPA）是 Vue.js 最具有吸引力的功能之一。 SPA 非常好，因为它们不需要在每次更改路由时都去加载页面。这就意味着一旦加载了全</description></item><item><title>在 React 中用事件驱动进行状态管理</title><link>https://fe-tech.viewnode.com/post/202006/23/</link><pubDate>Tue, 23 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/23/</guid><description>自 Hook 被引入 React 以来，Context API 与 Hook 库在应用状态管理中被一起使用。但是把 Context API 和 Hooks（许多基于 Hooks 的状态管理库建立在其基础上）组合的用法</description></item><item><title>探索 Vue-Multiselect</title><link>https://fe-tech.viewnode.com/post/202006/16/</link><pubDate>Tue, 16 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/16/</guid><description>创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时，select 元素的作用非常有限。如果用 Vue 来构建我们的应用，则可以用一些组件来帮助简化</description></item><item><title>TypeScript中的类型断言</title><link>https://fe-tech.viewnode.com/post/202006/15/</link><pubDate>Mon, 15 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/15/</guid><description>本文是关于 TypeScript 中的 type assertions 的，它与其他语言中的类型强制转换有相似之处，并通过 as 运算符执行。 类型断言 类型断言使我们可以覆盖 TypeScript 为存储位置计算的静态类型</description></item><item><title>比较 JavaScript 对象的四种方式</title><link>https://fe-tech.viewnode.com/post/202006/11/</link><pubDate>Thu, 11 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/11/</guid><description>比较 JavaScript 中的原始值非常简单。只需使用任何一种可用的相等运算符即可，例如严格相等运算符： &amp;#39;a&amp;#39; === &amp;#39;c&amp;#39;; // =&amp;gt; false 1 === 1; // =&amp;gt; true 但是对象却有结构化数据，所以比较</description></item><item><title>Typescript 使用笔记</title><link>https://fe-tech.viewnode.com/post/202006/10/</link><pubDate>Wed, 10 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/10/</guid><description>最近这两年，有很多人都在讨论 Typescript，无论是社区还是各种文章都能看出来，整体来说正面的信息是大于负面的，这篇文章就来整理一下我所</description></item><item><title>TypeScript 中的顶级类型：any 和 unknown</title><link>https://fe-tech.viewnode.com/post/202006/05/</link><pubDate>Fri, 05 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/05/</guid><description>在 TypeScript中，any 和 unknown 是包含所有值的类型。在本文中，我们将会研究它们是怎样工作的。 TypeScript 的两种顶级类型 any and unknown are so-called top types in TypeScript. Quoting Wikipedia : any 和</description></item><item><title>10 个超有用的 JavaScript 技巧</title><link>https://fe-tech.viewnode.com/post/202006/04/</link><pubDate>Thu, 04 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/04/</guid><description>众所周知，JavaScript 一直在迅速变化。新的 ES2020 引入了许多很棒的功能。你可以通过很多不同的方式去编写代码。他们会达到相同的目标，但其中一</description></item><item><title>VS Code 调试完全攻略（6）：调试用 TypeScript 开发并打包的 React 📦</title><link>https://fe-tech.viewnode.com/post/202006/02/</link><pubDate>Tue, 02 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/02/</guid><description>说到前端，我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置，只需最少的配置。本文将向你</description></item><item><title>VS Code 调试完全攻略（5）：基于浏览器的 React 应用</title><link>https://fe-tech.viewnode.com/post/202006/01/</link><pubDate>Mon, 01 Jun 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202006/01/</guid><description>这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。我们将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。它超级强大，同时又很容易，所以在调</description></item><item><title>VS Code 调试完全攻略（4）：launch.json 和调试控制台</title><link>https://fe-tech.viewnode.com/post/202005/29/</link><pubDate>Fri, 29 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/29/</guid><description>VS Code 调试完全攻略系列目录 基础知识 步进逐行调试 编辑变量并重新执行函数 launch.json 和调试控制台 基于浏览器的 React 应用 调试用 TypeScript 开发并打包的 React 📦 调试可能会是一件复</description></item><item><title>VS Code 调试完全攻略（3）：编辑变量并重新执行函数</title><link>https://fe-tech.viewnode.com/post/202005/28/</link><pubDate>Thu, 28 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/28/</guid><description>可以通过在调试器中重新执行代码块，来查看它们在不同情况下的行为。让我们看看如何在调用栈中修改变量并重新执行函数——这样可以让你节省大量的时间</description></item><item><title>VS Code 调试完全攻略（2）：步进逐行调试</title><link>https://fe-tech.viewnode.com/post/202005/27/</link><pubDate>Wed, 27 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/27/</guid><description>在要检查的代码之间跳转很重要。如果去遍历代码的每一行，那将会是乏味且没有必要的。调试器提供了便捷的方法来查看重要的内容，并跳出无关紧要的代码</description></item><item><title>VS Code 调试完全攻略（1）：基础知识</title><link>https://fe-tech.viewnode.com/post/202005/26/</link><pubDate>Tue, 26 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/26/</guid><description>在接下来的几篇文章中，我们将研究如何以专业的方式调试 JavaScript 和 TypeScript 代码。我们将学习如何使用 Visual Studio Code 中内置的调试器，而不是让 console.log 到处乱飞。 VS Code 调试完全攻略</description></item><item><title>箭头函数和常规函数之间的 5 个区别</title><link>https://fe-tech.viewnode.com/post/202005/25/</link><pubDate>Mon, 25 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/25/</guid><description>在 JavaScript 中，你可以通过多种方式去定义函数。 第一种常用的方法是使用关键字 function： // 函数声明 function greet(who) { return `Hello, ${who}!`; } // 函数表达式 const greet = function(who) { return `Hello, ${who}`; } 代</description></item><item><title>从 Node 到 Deno</title><link>https://fe-tech.viewnode.com/post/202005/22/</link><pubDate>Fri, 22 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/22/</guid><description>我收集了一些 Node 中最常用的主题，并寻找 Deno 的替代方案。首先我想说明，许多当前的 Node.js 模块都可以都可以用在 Deno 中。由于许多模块都是可重用的，所以没有必要</description></item><item><title>在 10 分钟内实现安全的 React + Docker</title><link>https://fe-tech.viewnode.com/post/202005/19/</link><pubDate>Tue, 19 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/19/</guid><description>假如你已经构建了一个 React 应用，但是现在需要部署它。应该怎么做？首先，最好选择一个云提供商，因为它们一般成本低而且部署容易。 大多数云提供商都提供</description></item><item><title>Deno 环境 TypeScript 开发入门</title><link>https://fe-tech.viewnode.com/post/202005/18/</link><pubDate>Mon, 18 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/18/</guid><description>我每周都会探索一些新的项目，但很少会有像 Deno 这样吸引我的注意力的。 在本文中，我会让你快速了解 Deno，并把它与 Node.js 进行比较，以此构建你的第一个 REST</description></item><item><title>深入探索 CSS Grid</title><link>https://fe-tech.viewnode.com/post/202005/20/</link><pubDate>Mon, 18 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/20/</guid><description>简介 本教程将深入探讨 CSS 网格布局，并探索几乎所有的属性和功能。读完之后，你将能够用这种出色的 CSS 附加功能去处理任何一种布局。 术语：Grid Grid 是二</description></item><item><title>Deno 意味着什么？</title><link>https://fe-tech.viewnode.com/post/202005/15/</link><pubDate>Fri, 15 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/15/</guid><description>如果你一直关注 Web 开发领域，那么最近可能已经听到了很多关于 Deno 的信息——一种新的 JavaScript 运行时，它可能也会被认为是 Node.js 的继承者。但是这意味着什么，我们需</description></item><item><title>为什么 CommonJS 会使你的程序包变大</title><link>https://fe-tech.viewnode.com/post/202005/14/</link><pubDate>Thu, 14 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/14/</guid><description>在本文中，我们将研究什么是 CommonJS，以及为什么它会使你的 JavaScript 包变得那么大。 什么是 CommonJS？ CommonJS 是 2009 年的标准，为 JavaScript 模块建立了约定。</description></item><item><title>为什么需要“跨域隔离”才能获得强大的功能</title><link>https://fe-tech.viewnode.com/post/202005/12/</link><pubDate>Tue, 12 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/12/</guid><description>为什么需要跨域隔离才能使用功能强大的功能，例如 SharedArrayBuffer，performance.measureMemory() 和 JS</description></item><item><title>关于前端的 13 个安全提示</title><link>https://fe-tech.viewnode.com/post/202005/11/</link><pubDate>Mon, 11 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/11/</guid><description>关于前端的 13 个安全提示 无论你是 React.js、Angular、Vue.js 程序员还是前端页面仔，你的代码都可以成为引诱黑客入侵的大门。 作为</description></item><item><title>用思维模型去理解 React</title><link>https://fe-tech.viewnode.com/post/202005/09/</link><pubDate>Sat, 09 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/09/</guid><description>我了解到，掌握了某种语言、框架或工具的人与没有掌握的人之间的最大区别在于他们所使用的思维模型（Mental Model）。前者拥有清晰而先进的</description></item><item><title>它改变了 JavaScript 的体系结构——Webpack 5 Module Federation</title><link>https://fe-tech.viewnode.com/post/202005/08/</link><pubDate>Fri, 08 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/08/</guid><description>模块联合（Module federation）允许 JavaScript 应用在客户端和服务器上动态运行来自另一个包或版本的代码。 这是 JavaScript 捆绑器，等效于在 Apollo 中使用 Gr</description></item><item><title>Node.js 中的异步迭代器</title><link>https://fe-tech.viewnode.com/post/202005/07/</link><pubDate>Thu, 07 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/07/</guid><description>从 Node.js v10.0.0 开始，异步迭代器就出现中了，最近它们在社区中的吸引力越来越大。在本文中，我们将讨论异步迭代器的作用，还将解决它们可能用于什么目的的问题</description></item><item><title>10 个实用的 JavaScript 小技巧</title><link>https://fe-tech.viewnode.com/post/202005/06/</link><pubDate>Wed, 06 May 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202005/06/</guid><description>我一直在寻找提高效率的新方法。 JavaScript 总是充满令人出乎意料的惊喜。 1. 将 arguments 对象转换为数组 arguments 对象是函数内部可访问的类似数组的对象，其中包含传递给该函数</description></item><item><title>为你的 Vue.js 单页应用提速</title><link>https://fe-tech.viewnode.com/post/202004/28/</link><pubDate>Tue, 28 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/28/</guid><description>我有一个项目用了 Vue.js 来构建单页应用程序。随着上线日期的临近，性能优化的工作变得越来越重要。在本文中，我收集了有关在加载时间和渲染性能方面提高 Vue.js</description></item><item><title>十分钟了解 TypeScript 是怎样工作的</title><link>https://fe-tech.viewnode.com/post/202004/27/</link><pubDate>Mon, 27 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/27/</guid><description>本文概述了 TypeScript 的工作原理：典型的 TypeScript 项目的结构是什么？什么被编译以及怎样编译？我们如何使用 IDE 编写 TypeScript？ TypeScript项目的</description></item><item><title>用什么策略把你的 JavaScript 迁移到 TypeScript</title><link>https://fe-tech.viewnode.com/post/202004/22/</link><pubDate>Wed, 22 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/22/</guid><description>本文概述了将代码库从 JavaScript 迁移到 TypeScript 的策略。还提到了需要进一步阅读的材料。 三种迁移策略 这是用于迁移到TypeScript的三种策略： 对于我们的代码</description></item><item><title>ECMAScript 2020 的新功能</title><link>https://fe-tech.viewnode.com/post/202004/21/</link><pubDate>Tue, 21 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/21/</guid><description>ECMAScript 2020 是我们最喜欢的编程语言的第 11 版，其中包含一些新功能。有些是小特性，但有些将会有可能永远改变我们编写 JavaScript 的方式。 Dynamic import() ES2015 引入了 static import 语法。现在你</description></item><item><title>18 个漂亮的 Bootstrap 模板</title><link>https://fe-tech.viewnode.com/post/202004/17/</link><pubDate>Fri, 17 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/17/</guid><description>本文中出现的所有日期和数字在撰写本文时都是正确的。要查找最新信息，请点击文章中的链接。 如果你正在阅读本文，则意味着你与时俱进。根据预测，对模</description></item><item><title>简简单单在 JavaScript 中克隆对象</title><link>https://fe-tech.viewnode.com/post/202004/16/</link><pubDate>Thu, 16 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/16/</guid><description>JavaScript 的原始数据类型（例如number、string、null，undefined 和 boolean）是不可变的，这意味着一旦创建，它们的值就无法</description></item><item><title>奇怪的 Javascript</title><link>https://fe-tech.viewnode.com/post/202004/18/</link><pubDate>Thu, 16 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/18/</guid><description>我的意思是，对于刚开始使用这种语言和他语言（例如 C++ 或 C#）的开发人员来说，javascript 可能会很奇怪。 某些语言可能会让你大吃一惊🤯🤯 在</description></item><item><title>与 JavaScript 模块相关的所有知识点</title><link>https://fe-tech.viewnode.com/post/202004/15/</link><pubDate>Wed, 15 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/15/</guid><description>JavaScript 语言最初是为简单的表单操作而发明的，没有诸如模块或命名空间之类的内置功能。多年以来发明了大量的术语、模式、库、语法和工具来模块化 JavaS</description></item><item><title>推荐 8 个漂亮的 vue.js 进度条组件</title><link>https://fe-tech.viewnode.com/post/202004/10/</link><pubDate>Fri, 10 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/10/</guid><description>为大家精心挑选了 8 个漂亮的 Progress Bars 组件，并附上 GitHub 链接和 vue.js 代码示例。 1.easy-circular-progress 一个简单的循环进度组件，带有计数效果。 作者：dreambo8563 Githu</description></item><item><title>让 JavaScript 与 CSS 和 Sass 对话</title><link>https://fe-tech.viewnode.com/post/202004/09/</link><pubDate>Thu, 09 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/09/</guid><description>JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改，而是使</description></item><item><title>ReactJS与VueJS：两种最流行的前端 JS 框架之战</title><link>https://fe-tech.viewnode.com/post/202004/07/</link><pubDate>Tue, 07 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/07/</guid><description>如果有人问你将在 2020 年选择哪种框架进行开发，你的答案将是什么？很明显，你主要有两个选择： React.Js 和 Vue.Js！但是，如果你需要选择一个怎么办？好吧</description></item><item><title>JavaScript 模块导入的一个小麻烦</title><link>https://fe-tech.viewnode.com/post/202004/03/</link><pubDate>Fri, 03 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/03/</guid><description>1.命名导入和自动完成 假设你编写了一个简单的 JavaScript 模块： // stringUtils.js export function equalsIgnoreCase(string1, string2) { return string1.toLowerCase() === string2.toLowerCase(); } 这是一个模块 stringUtils。该模块有一个导出为 equalsIgnoreCase 的函数，</description></item><item><title>WebAR 如何改变增强现实的未来</title><link>https://fe-tech.viewnode.com/post/202004/02/</link><pubDate>Thu, 02 Apr 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202004/02/</guid><description>增强现实技术在开发人员和智能手机用户中越来越受欢迎，但它还是没有在无所不在的技术中占据一席之地。要体验 AR，用户必须安装专用的程序，但经常会</description></item><item><title>如何与 Service Worker 通信</title><link>https://fe-tech.viewnode.com/post/202003/31/</link><pubDate>Tue, 31 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/31/</guid><description>Service Worker 很棒。它们使 Web 开发人员可以实现以前原生应用专有的类似功能。这类功能是例如推送通知或后台同步的离线功能。 它们是渐进式 Web 应用的核心。但是在设</description></item><item><title>怎样测试 JavaScript 函数的性能</title><link>https://fe-tech.viewnode.com/post/202003/30/</link><pubDate>Mon, 30 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/30/</guid><description>通过衡量执行某个函数所花费的时间，以“证明”某些实现比另一些实现更高效始终是一个很好的主意。这也是确保性能在进行一些修改后不受影响并找出瓶颈</description></item><item><title>怎样避免Node.js模块的日志污染程序日志</title><link>https://fe-tech.viewnode.com/post/202003/27/</link><pubDate>Fri, 27 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/27/</guid><description>你是否有过这样的经历，当把 logging 添加到自定义 Node 模块中，并认为自己将会从这些额外信息中受益，却发现当你将模块添加为依赖项并运行 npm install 和 npm start 时，你的程</description></item><item><title>当一个模块被导入两次时，会发生什么？</title><link>https://fe-tech.viewnode.com/post/202003/26/</link><pubDate>Thu, 26 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/26/</guid><description>让我们从一个问题开始。 名为 increment 的 ES2015 模块包含以下代码： // increment.js let counter = 0; counter++; export default counter; 然后在另一个模块 consumer 中，将上述模块 increment 导入两次： // consumer.js import counter1 from &amp;#39;./increment&amp;#39;; import counter2 from &amp;#39;./increment&amp;#39;; counter1; // =&amp;gt;</description></item><item><title>如何取消 Fetch 请求</title><link>https://fe-tech.viewnode.com/post/202003/23/</link><pubDate>Mon, 23 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/23/</guid><description>JavaScript 的 promise一直是该语言的一大胜利——它们引发了异步编程的革命，极大地改善了 Web 性能。原生 promise 的一个缺点是，到目前为止，还没有可以取消 fetch 的</description></item><item><title>JavaScript 控制台详解</title><link>https://fe-tech.viewnode.com/post/202003/17/</link><pubDate>Tue, 17 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/17/</guid><description>你可能在 JavaScript 项目中都用了console.log。这是一种查看变量的值或程序运行中发生的事情的便捷方法。但是 JavaScript console 对象还有许多其他的功能，可以在处</description></item><item><title>如何取消 JavaScript 中的异步任务</title><link>https://fe-tech.viewnode.com/post/202003/16/</link><pubDate>Mon, 16 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/16/</guid><description>有时候执行异步任务可能是很困难的，尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异步活动</description></item><item><title>你应该知道的 7 个 JavaScript 原生错误类型</title><link>https://fe-tech.viewnode.com/post/202003/07/</link><pubDate>Sat, 07 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/07/</guid><description>了解 JavaScript 中原生错误的常见类型。 从浏览器控制台到运行 Node.js 的终端，我们到处都会看到错误。 本文的重点是概述我们在 JS 开发过程中可能遇到的错误类型。 **提</description></item><item><title>React 状态管理的 3 个规则</title><link>https://fe-tech.viewnode.com/post/202003/06/</link><pubDate>Fri, 06 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/06/</guid><description>React 组件内部的状态是在渲染过程之间保持不变的封装数据。 useState() 是 React hook，负责管理功能组件内部的状态。 我喜欢 useState() ，它确实使状态处理变得非常容易。但是</description></item><item><title>用函数式编程在 JS 中开发游戏</title><link>https://fe-tech.viewnode.com/post/202003/05/</link><pubDate>Thu, 05 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/05/</guid><description>一段时间以来，函数式编程范式比较火热，并且在互联网上有很多关于它的精彩书籍和文章，但是要找到相关程序的真实示例并不容易。因此，我决定尝试使用</description></item><item><title>在 Vue.js 中使用嵌套路由</title><link>https://fe-tech.viewnode.com/post/202003/03/</link><pubDate>Tue, 03 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/03/</guid><description>随着 Vue.js 单页应用（SPA）变得相当复杂，你开始需要 Vue 路由 以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的</description></item><item><title>从两个角度理解 TypeScript 中的类型是什么？</title><link>https://fe-tech.viewnode.com/post/202003/02/</link><pubDate>Mon, 02 Mar 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202003/02/</guid><description>TypeScript中的类型是什么？本文中描述了两种有助于理解它们的观点。 每个角度三个问题 以下三个问题对于理解类型如何工作非常重要，并且需要</description></item><item><title>JavaScript 执行线程图解</title><link>https://fe-tech.viewnode.com/post/202002/28/</link><pubDate>Fri, 28 Feb 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202002/28/</guid><description>这是研究 JavaScript 内部工作方式的系列文章的第一篇。我会尽力使它变得有趣，并且不让你感到厌烦，因为我知道这些东西有时会变得非常乏味！ 想象一下，飞行员知</description></item><item><title>在 Vue.js 中制作自定义选择组件</title><link>https://fe-tech.viewnode.com/post/202002/27/</link><pubDate>Thu, 27 Feb 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202002/27/</guid><description>定制 select 标签的设计非常困难。有时候，如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定</description></item><item><title>怎样修复Web应用中的内存泄漏</title><link>https://fe-tech.viewnode.com/post/202002/26/</link><pubDate>Wed, 26 Feb 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202002/26/</guid><description>从服务器端渲染的网站切换到客户端渲染的 SPA 时，我们突然不得不更加注意用户设备上的资源，必须做很多工作：不要阻塞 UI 线程，不要使笔记本电脑的风扇疯</description></item><item><title>JavaScript 的代理对象</title><link>https://fe-tech.viewnode.com/post/202002/25/</link><pubDate>Tue, 25 Feb 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202002/25/</guid><description>JavaScript 支持 setters 和 getters 已经很长时间了。他们用带有 set 和 get 关键字的简单语法来拦截对象的属性访问和值的修改操作。 const obj = { propValue: 1, get prop() { console.log(&amp;#34;Retrieving property prop&amp;#34;); return this.propValue; }, set prop(value) { console.log(&amp;#34;Setting property prop to&amp;#34;,</description></item><item><title>Debug Visualizer：用于 VS Code 调试中的可视化数据插件</title><link>https://fe-tech.viewnode.com/post/202002/19/</link><pubDate>Wed, 19 Feb 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202002/19/</guid><description>用于在调试期间可视化数据结构的 VS Code 扩展。 用法 安装此扩展后，使用命令 Open a new Debug Visualizer View 打开新的可视化器视图。在这个视图中，你可以输入一个表达式，该表</description></item><item><title>了解 ECMAScript 规范，第1部分</title><link>https://fe-tech.viewnode.com/post/202002/17/</link><pubDate>Mon, 17 Feb 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202002/17/</guid><description>前言 即便你对 JavaScript 很了解，但是去阅读 ECMAScript 语言规范，或简称为 ECMAScript 规范 也会令人生畏。至少这是我在第一次开始阅读时的感受。 让我们从一个具体的例子开始，然后</description></item><item><title>Node.js 中间件是怎样工作的？</title><link>https://fe-tech.viewnode.com/post/202001/20/</link><pubDate>Mon, 20 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/20/</guid><description>什么是 Express 中间件？ 中间件在字面上的意思是你在软件的一层和另一层中间放置的任何东西。 Express 中间件是在对 Express 服务器请求的生命周期内所执行的函数。 每个中间</description></item><item><title>JavaScript 私有类字段和 TypeScript 私有修饰符</title><link>https://fe-tech.viewnode.com/post/202001/17/</link><pubDate>Fri, 17 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/17/</guid><description>JavaScript 私有类字段和隐私需求 在过去，JavaScript 没有保护变量不受访问的原生机制，当然除非是**典型闭包 **。 闭包是 JavaScript 中许多类似于私有模式（</description></item><item><title>TypeScript 真的值得吗？</title><link>https://fe-tech.viewnode.com/post/202001/16/</link><pubDate>Thu, 16 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/16/</guid><description>在开始之前，希望大家知道，我是 TypeScript 爱好者。它是我在前端 React 项目和基于后端 Node 工作时的主要编程语言。但我确实有一些疑惑，所以想在本文中进行讨论。迄今</description></item><item><title>用 JavaScript 实现基于类的枚举模式</title><link>https://fe-tech.viewnode.com/post/202001/14/</link><pubDate>Tue, 14 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/14/</guid><description>在本文中，我们将会研究在 JavaScript 中实现基于类的枚举模式。还会研究一下 Enumify 这个能够帮助我们使用枚举模式的库 。 实现枚举：第一次尝试 枚举是由一组值组成的类</description></item><item><title>JavaScript 中的 NaN</title><link>https://fe-tech.viewnode.com/post/202001/10/</link><pubDate>Fri, 10 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/10/</guid><description>JavaScript 中的数字类型包含整数和浮点数： const integer = 4; const float = 1.5; typeof integer; // =&amp;gt; &amp;#39;number&amp;#39; typeof float; // =&amp;gt; &amp;#39;number&amp;#39; 另外还有 2 个特殊的数字值：Infinity（比其他任何数字都大的数字）和</description></item><item><title>JavaScript 中的调节器：提高应用程序的性能</title><link>https://fe-tech.viewnode.com/post/202001/08/</link><pubDate>Wed, 08 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/08/</guid><description>调节器是浏览器中通过限制代码要处理的事件数量来提高性能的常用技术。当你想以受控的速率执行回调时，应该使用调节器，它允许你在每个固定的时间间隔</description></item><item><title>JavaScript 类完整指南</title><link>https://fe-tech.viewnode.com/post/202001/07/</link><pubDate>Tue, 07 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/07/</guid><description>JavaScript 使用原型继承：每个对象都从其原型对象继承属性和方法。 在 JavaScript 中不存在 Java 或 Swift 等语言中所使用的作为创建对象 蓝图的传统类，原型继承仅处理对象。 原型继</description></item><item><title>Vue.js 中的片段</title><link>https://fe-tech.viewnode.com/post/202001/03/</link><pubDate>Fri, 03 Jan 2020 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/202001/03/</guid><description>在本文中将会给你介绍一个令人兴奋的概念，它将帮你精通 Vue.js 。 在 Vue 中实现可访问性 为了实现 Web 上的可访问性，你需要设计每个人都可以使用的页面、工具和技</description></item><item><title>JavaScript 和 Node.js 中的“事件驱动”是什么意思？</title><link>https://fe-tech.viewnode.com/post/201912/30/</link><pubDate>Mon, 30 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/30/</guid><description>事件驱动和发布-订阅 事件驱动架构是建立在软件开发中一种通用模式上的，这种模式被称为发布-订阅或观察者模式。 在事件驱动架构中，至少有两个参与者</description></item><item><title>npm 和 yarn 你选哪个？</title><link>https://fe-tech.viewnode.com/post/201912/18/</link><pubDate>Wed, 18 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/18/</guid><description>每个团队都必须在开发过程中做出各种决定。其中通常会涉及到 yarn，npm 或其它用于构建和打包 javascript 代码的工具。一些开发人员渴望朝着某个方向前进，</description></item><item><title>值得关注的 Vue.js 开源项目</title><link>https://fe-tech.viewnode.com/post/201912/17/</link><pubDate>Tue, 17 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/17/</guid><description>Vue.js 框架是由经验丰富的开发人员创建的，具有可靠的社区支持，丰富的功能，而且是轻量级的。 Vue.js 的另一个大优点是易于理解和学习。可以在 Vue 框架的帮助下创</description></item><item><title>生产环境下的 Node.js 日志记录方案</title><link>https://fe-tech.viewnode.com/post/201912/12/</link><pubDate>Thu, 12 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/12/</guid><description>设置正确的日志记录基础结构可帮助我们查找发生的问题、调试和监视应用程序。从最基本的角度来看，我们应该从基础架构中得到以下内容： 能够在我们的日</description></item><item><title>9 个强大的 JavaScript 小技巧</title><link>https://fe-tech.viewnode.com/post/201912/11/</link><pubDate>Wed, 11 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/11/</guid><description>以下是 9 个功能强大的 JavaScript hack 技巧。 1. 全部替换 我们知道 string.replace() 函数仅替换第一次出现的情况。 你可以通过在正则表达式的末尾添加 /g 来替换所有出现的内容。 var example =</description></item><item><title>从 JavaScript、ES6、ES7 到 ES10，你学到哪儿了？</title><link>https://fe-tech.viewnode.com/post/201912/06/</link><pubDate>Fri, 06 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/06/</guid><description>**什么是 JavaScript？**据 Wikipedia 的描述，它是一种符合 ECMAScript 规范的脚本语言。 ES6，ES7等这些名字你可能听说过，你也很可能已经使用 ES6 有一</description></item><item><title>Vue.js 中的无渲染行为插槽</title><link>https://fe-tech.viewnode.com/post/201912/05/</link><pubDate>Thu, 05 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/05/</guid><description>在本文中我们讨论 Vue 中的无渲染插槽模式能够帮助解决哪些问题。 在 Vue.js 2.3.0 中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生，解决了提</description></item><item><title>用 globalThis 访问全局对象</title><link>https://fe-tech.viewnode.com/post/201912/04/</link><pubDate>Wed, 04 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/04/</guid><description>JavaScript 语言越来越被广泛地用于各种环境中。除了 Web 浏览器（这是 JavaScript 的最常见的宿主环境类型）之外，你还可以在服务器，智能手机甚至机器人硬件中运行 JavaScript 程序。</description></item><item><title>一文学会 Node.js 中的流</title><link>https://fe-tech.viewnode.com/post/201912/02/</link><pubDate>Mon, 02 Dec 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201912/02/</guid><description>Node.js 中的流（Stream）是出了名的难用甚至是难以理解。 用 Dominic Tarr 的话来说：“流是 Node 中最好的，也是最容易被误解的想法。”即使是 Redux 的创建者和 React.js 的核心</description></item><item><title>能用 CSS 能播放声音吗？</title><link>https://fe-tech.viewnode.com/post/201911/27/</link><pubDate>Wed, 27 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/27/</guid><description>CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗，它还可以在网页上控制播放声音。 本文介绍了一些技巧。实际上它并不是真正的 h</description></item><item><title>package.json 详解</title><link>https://fe-tech.viewnode.com/post/201911/25/</link><pubDate>Mon, 25 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/25/</guid><description>Node 项目在项目根目录中名为 package.json 的文件中跟踪依赖关系和元数据。这是你项目的核心。它包含名称、描述和版本之类的信息，以及运行、开发以及有选择地将项目</description></item><item><title>AssemblyScript 入门指南</title><link>https://fe-tech.viewnode.com/post/201911/19/</link><pubDate>Tue, 19 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/19/</guid><description>WebAssembly （Wasm）是 Web 浏览器中相对较新的功能，但它地扩展了把 Web 作为服务应用平台的功能潜力。 对于 Web 开发人员来说，学习使用 WebAssembly 可能会有一个艰难的过程，</description></item><item><title>JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互</title><link>https://fe-tech.viewnode.com/post/201911/18/</link><pubDate>Mon, 18 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/18/</guid><description>JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 JavaScript测</description></item><item><title>JavaScript 测试教程–part 3：测试 props，挂载函数和快照测试</title><link>https://fe-tech.viewnode.com/post/201911/15/</link><pubDate>Fri, 15 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/15/</guid><description>JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 JavaScript测</description></item><item><title>JavaScript测试教程-part 2：引入 Enzyme 并测试 React 组件</title><link>https://fe-tech.viewnode.com/post/201911/14/</link><pubDate>Thu, 14 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/14/</guid><description>JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并测试 React 组件 JavaScript测</description></item><item><title>JavaScript 测试教程 part 1：用 Jest 进行单元测试</title><link>https://fe-tech.viewnode.com/post/201911/13/</link><pubDate>Wed, 13 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/13/</guid><description>本文是 JavaScript 测试教程 系列中的第1部分 JavaScript测试教程-part 1：用 Jest 进行单元测试 JavaScript测试教程–part 2：引入 Enzyme 并</description></item><item><title>sql.js：JS专用的内存型数据库</title><link>https://fe-tech.viewnode.com/post/201911/12a/</link><pubDate>Tue, 12 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/12a/</guid><description>项目链接：https://github.com/kripken/sql.js 对于没有耐心的人，请在这里处尝试Demo：http://krip</description></item><item><title>解决 JavaScript 中处理 null 和 undefined 的麻烦事</title><link>https://fe-tech.viewnode.com/post/201911/12/</link><pubDate>Tue, 12 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/12/</guid><description>许多 JavaScript 开发人员正在为怎么处理可选值头痛。有什么好办法来最大程度地减少由值（可能为 null、undefined或在运行时未初始化）引起的错误？</description></item><item><title>JavaScript 框架安全报告2019</title><link>https://fe-tech.viewnode.com/post/201911/11/</link><pubDate>Mon, 11 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/11/</guid><description>欢迎来到 Snyk 的 JavaScript 框架状态安全报 告2019。 在此报告中，我们调查了 Angular 和 React 生态系统的安全状态。在这份报告种我们根本没有将它们作为竞争性框架进行比较</description></item><item><title>一段神奇的 DOM 监视代码</title><link>https://fe-tech.viewnode.com/post/201911/08/</link><pubDate>Fri, 08 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/08/</guid><description>通过使用此模块，只需将鼠标悬停在浏览器中，即可快速查看DOM元素的属性。基本上它是一个即时检查器。 将鼠标悬停在 DOM 元素上会显示其属性！ 自己尝试</description></item><item><title>完全搞懂 Javascript 中的...</title><link>https://fe-tech.viewnode.com/post/201911/07/</link><pubDate>Thu, 07 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/07/</guid><description>曾几何时，ES6/ES2015 对 Javascript 语言进行了重大升级。它引入了许多不同的新功能。其中之一就是我们可以用在任何兼容容器（对象、数组、字符串、集</description></item><item><title>你可能错过的现代 JavaScript 特性</title><link>https://fe-tech.viewnode.com/post/201911/04/</link><pubDate>Mon, 04 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/04/</guid><description>尽管我在过去 7 年中几乎每天都在写 JavaScript 代码，但不得不承认，我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事，但是每年都有稳定的</description></item><item><title>深入理解 JavaScript 回调函数</title><link>https://fe-tech.viewnode.com/post/201911/01/</link><pubDate>Fri, 01 Nov 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201911/01/</guid><description>JavaScript回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信，在阅读本文之后，你将能够克服以前使用回调方法遇到</description></item><item><title>在现代 JavaScript 中编写异步任务</title><link>https://fe-tech.viewnode.com/post/201910/30/</link><pubDate>Wed, 30 Oct 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/30/</guid><description>在现代 JavaScript 中编写异步任务 在本文中，我们将探讨过去异步执行的 JavaScript 的演变，以及它是怎样改变我们编写代码的方式的。我们将从最早的 Web 开发开始，一直到现代</description></item><item><title>在 Node.js 上运行 Flutter Web 应用和 API</title><link>https://fe-tech.viewnode.com/post/201910/29/</link><pubDate>Tue, 29 Oct 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/29/</guid><description>大量的跨平台应用开发框架，使你可以编写一次代码，然后在 Android，iOS 等多个平台上甚至在台式机上运行。你可能听说过一些流行的框架，例如</description></item><item><title>共享可变状态中出现的问题以及如何避免</title><link>https://fe-tech.viewnode.com/post/201910/28/</link><pubDate>Mon, 28 Oct 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/28/</guid><description>本文回答了以下问题： 么是共享可变状态？ 为什么会出现问题？ 如何避免其问题？ 标有“（高级）”的部分会更深入，如果你想更快地阅读本文，可以跳过。 什</description></item><item><title>为什么我喜欢 JavaScript 可选链</title><link>https://fe-tech.viewnode.com/post/201910/22/</link><pubDate>Tue, 22 Oct 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/22/</guid><description>JavaScript 的很多特性极大地改变了你的编码方式。从 ES2015 及更高版本开始，对我的代码影响最大的功能是解构、箭头函数、类和模块系统。 截至2019年8月，一项新</description></item><item><title>缩短箭头函数的小诀窍</title><link>https://fe-tech.viewnode.com/post/201910/21/</link><pubDate>Mon, 21 Oct 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/21/</guid><description>使用箭头语法，你可以定义比函数表达式 短的函数。在某些情况下，你可以完全省略： 参数括号 (param1, param2) return 关键字 甚至大括号 { }。 下面就让我们来探讨一下如何使</description></item><item><title>JavaScript 解构的5个有趣用法</title><link>https://fe-tech.viewnode.com/post/201910/18/</link><pubDate>Fri, 18 Oct 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/18/</guid><description>如果你查看我的常规 JavaScript 代码，会看到到处都有解构。 读取对象属性和访问数组项是常见的操作。结构使这些操作变得更加轻松和简洁。 在本文中，除了基本用法</description></item><item><title>别在不知道临时死区的情况下使用 JavaScript 变量</title><link>https://fe-tech.viewnode.com/post/201910/15/</link><pubDate>Tue, 15 Oct 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/15/</guid><description>我问一个简单的问题。以下哪个代码片段将会产生错误？ 第一个创建实例，然后定义所用的类： new Car(&amp;#39;red&amp;#39;); // Does it work? class Car { constructor(color) { this.color = color; } } 第二个先调用然后定义函数</description></item><item><title>在 JavaScript 中轻松处理 “this”</title><link>https://fe-tech.viewnode.com/post/201910/14/</link><pubDate>Mon, 14 Oct 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/14/</guid><description>我喜欢 JavaScript 中能够更改函数执行上下文（也称为 this）的特性。 例如，你可以在类似数组的对象上使用数组方法： const reduce = Array.prototype.reduce; function sumArgs() { return reduce.call(arguments, (sum, value) =&amp;gt; { return sum += value; }); }</description></item><item><title>用 map 代替纯 JavaScript 对象</title><link>https://fe-tech.viewnode.com/post/201910/11/</link><pubDate>Fri, 11 Oct 2019 10:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/11/</guid><description>JavaScript 普通对象 {key: 'value'} 可用于保存结构化数据。 但是我发现很烦人的一件事：对象的键必须是字符串（或很少使用的符号）。 如果用数字作键会怎样？在这种情况下没</description></item><item><title>为什么要使用 package-lock.json</title><link>https://fe-tech.viewnode.com/post/201910/10/</link><pubDate>Thu, 10 Oct 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201910/10/</guid><description>在本文中，我们将介绍 package-lock.json 为什么重要，以及如何与 NPM CLI 一起使用。 历史 NPM v5 引入了 package-lock.json， 将其作为捕获在任意时刻安装的确切</description></item><item><title>JavaScript中的异步生成器函数</title><link>https://fe-tech.viewnode.com/post/201909/27/</link><pubDate>Fri, 27 Sep 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/27/</guid><description>TC39异步迭代器提案 将 [for/await/of 引入了 JavaScript](http://thecodebarbarian.com/getting-started- with-async-iterators-in-node-js)，还介绍了异步生成器函数 的概念。现在 JavaScript 有 6</description></item><item><title>JavaScript 的 Map 指南</title><link>https://fe-tech.viewnode.com/post/201909/25/</link><pubDate>Wed, 25 Sep 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/25/</guid><description>在JavaScript中，Map 是存储键/值对的对象。Map 类似于一般 JavaScript 对象 ，但对象与 Map 之间一些关键的差异 使 Map 很有用。 Map 与 Object 如果你要创建一个</description></item><item><title>Javascript 的新功能 — Part 1</title><link>https://fe-tech.viewnode.com/post/201909/24/</link><pubDate>Tue, 24 Sep 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/24/</guid><description>JavaScript 的应用领域已经从 Web 浏览器扩展到所有需要编程的地方。 Node.js — 用于CLI和服务器。 Electron — 用于跨平台的桌面应用程序。 React native — 用于跨平台的移动应用。 IoT — 低</description></item><item><title>用JavaScript把 CSV 与 Excel 转为 Json</title><link>https://fe-tech.viewnode.com/post/201909/23/</link><pubDate>Mon, 23 Sep 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/23/</guid><description>有两个 JavaScript 插件可用于读取和处理 CSV 和 Excel 文件，之后仅对自己的脚本进行编码即可。 CSV 表示 ：用逗号分隔值 这是一种文件格式，用于存储表格数据，如电子表格或</description></item><item><title>怎样用 JavaScript 操作 Cookie</title><link>https://fe-tech.viewnode.com/post/201909/20/</link><pubDate>Fri, 20 Sep 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/20/</guid><description>介绍 Web 服务器和 HTTP 服务器是无状态的，因此当 Web 服务器将网页发送到浏览器时，连接会被断开，服务器会忘记与用户相关的所有内容。 那么浏览器和 Web 服务器是</description></item><item><title>在 HTML 中包含资源的新思路</title><link>https://fe-tech.viewnode.com/post/201909/19/</link><pubDate>Thu, 19 Sep 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/19/</guid><description>在 HTML 中包含资源的新思路 注意：这篇文章描述了一种我们仍需要测其试性能影响的实验技术。 它可能最终会成为一种有用的工具，也有可能成为不被推荐的做法</description></item><item><title>JavaScript和TypeScript中的符号</title><link>https://fe-tech.viewnode.com/post/201909/16/</link><pubDate>Mon, 16 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/16/</guid><description>symbol 是 JavaScript 和 TypeScript 中的原始数据类型，可用于对象属性。与 number 和 string 相比，symbol 具有一些独特的功能，使它脱颖而出。 JavaScript 中的符号 可以用 Symbol() 工厂函数创建符号：</description></item><item><title>JavaScript和TypeScript中的void</title><link>https://fe-tech.viewnode.com/post/201909/11/</link><pubDate>Wed, 11 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/11/</guid><description>如果你来自传统的强类型语言，可能会很熟悉 void 的概念：一种类型，告诉你函数和方法在调用时不返回任何内容。 void 作为运算符存在于 JavaScript 中，而作为基本类型存</description></item><item><title>用 Mongoose 插件记录Node.js API 日志</title><link>https://fe-tech.viewnode.com/post/201909/10/</link><pubDate>Tue, 10 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/10/</guid><description>本教程需要事先了解mongoose 对象关系映射（ORM）技术 介绍 随着程序的增长，日志记录成为跟踪所有内容的关键部分。它对于调试目的尤为重要。</description></item><item><title>把 WebAssembly 用于提升速度和代码重用</title><link>https://fe-tech.viewnode.com/post/201909/09/</link><pubDate>Mon, 09 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/09/</guid><description>有这样一种技术，可以把用高级语言编写的非 Web 程序转换成为 Web 准备的二进制模块，而无需对 Web 程序的源代码进行任何更改即可完成这种转换。浏览器可以有效</description></item><item><title>Node.js 应用最佳实践：日志</title><link>https://fe-tech.viewnode.com/post/201909/06/</link><pubDate>Fri, 06 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/06/</guid><description>日志记录是每个开发人员从第一天编写代码时就要做的事情，但很少有人知道它可以产生的价值和最佳实践。 在本文中，我们将讨论以下主题： 什么是日志，为</description></item><item><title>内置于浏览器中的国际化API</title><link>https://fe-tech.viewnode.com/post/201909/05/</link><pubDate>Thu, 05 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/05/</guid><description>你的程序很有可能需要支持多种语言。其中包括对语言敏感的日期处理。一个广受欢迎的库Moment.js 有助于实现这一目标，它的功能之一是国际化。</description></item><item><title>在 Vue.js 中使用无状态组件</title><link>https://fe-tech.viewnode.com/post/201909/04/</link><pubDate>Wed, 04 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/04/</guid><description>在本文中，你将了解功能组件，并了解如何在 Vue 中使用工作流中的无状态组件。 在开始之前 你的PC需要以下内容： 安装 Node.js version 10.x 或以上版本。可以通过在终端中</description></item><item><title>在 JavaScript 中使用海龟图形绘图</title><link>https://fe-tech.viewnode.com/post/201909/03/</link><pubDate>Tue, 03 Sep 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201909/03/</guid><description>我曾经用 Python 海龟图形生成过这个图像，并有用 JavaScript 复制它的强烈冲动。 对于那些不熟悉海龟图形的人来说，这是一个使用虚拟“海龟”绘制图形的概念，当海龟四</description></item><item><title>用 Jest 进行 JavaScript 测试</title><link>https://fe-tech.viewnode.com/post/201908/30/</link><pubDate>Fri, 30 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/30/</guid><description>测试是什么意思？ 在技​​术术语中测试意味着检查我们的代码是否符合某些预期。例如：给定一些输入，一个名为“transformer”的函数应返回</description></item><item><title>使用 React 要懂的 JavaScript 特性</title><link>https://fe-tech.viewnode.com/post/201908/27/</link><pubDate>Tue, 27 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/27/</guid><description>与我使用的其他框架相比，我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL（ JSX 编译为合理的 JavaScript），组件 API 只是通过添加 React</description></item><item><title>用 NodeJS 重命名系统文件</title><link>https://fe-tech.viewnode.com/post/201908/26/</link><pubDate>Mon, 26 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/26/</guid><description>介绍 你是在 Node.js 中操作系统文件，并且需要一种简单的方法来以编程方式重命名文件？ 幸运的是 Node.js 的文件系统 (Fs) 核心模块 实现了内置的方法，可以通过 fs.renam() 和 fs.renameSync() 方法</description></item><item><title>Javascript 性能测试 - for vs for each vs (map, reduce, filter, find)</title><link>https://fe-tech.viewnode.com/post/201908/23/</link><pubDate>Fri, 23 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/23/</guid><description>我们都知道 for 循环比 each 或 javascript 函数更快，因为在javascript函数的引擎下可能会使用for循环或其他我不确定的东西。我使用一个对象数组进行了一</description></item><item><title>为什么我喜欢 JavaScript Optional Chaining</title><link>https://fe-tech.viewnode.com/post/201908/22/</link><pubDate>Thu, 22 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/22/</guid><description>JavaScript 的特性极大地改变了你的编码方式。从 ES2015 开始，对我代码影响最多的功能是解构、箭头函数、类和模块系统。 截至 2019 年 8 月，一项新提案 optional chaining 达到了第3阶段</description></item><item><title>用 await/async 正确链接 Javascript 中的多个函数</title><link>https://fe-tech.viewnode.com/post/201908/21/</link><pubDate>Wed, 21 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/21/</guid><description>在我完成 electrade 的工作之余，还帮助一个朋友的团队完成了他们的项目。最近，我们希望为这个项目构建一个 Craiglist 风格的匿名电子邮件中继，其中包含 “server</description></item><item><title>从TypeScript中的类中派生接口</title><link>https://fe-tech.viewnode.com/post/201908/20/</link><pubDate>Tue, 20 Aug 2019 12:01:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/20/</guid><description>大多数面向对象编程语言都鼓励编程到接口 的模式。 TypeScript 当然支持这一点，你可以创建一个或多个接口，然后再定义生成这个接口实例的类（或工厂）。 但是当程</description></item><item><title>在 Node.js 中将 SVG 图像转换为PNG，JPEG，TIFF，WEBP和HEIF格式</title><link>https://fe-tech.viewnode.com/post/201908/19/</link><pubDate>Mon, 19 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/19/</guid><description>介绍 你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP 和 HEIF 格式吗？本文将指导你如何转换为所有这些类型的格式。 我们将使用 Node.js 和Shar</description></item><item><title>HTTP/2：更快的页面加载时间</title><link>https://fe-tech.viewnode.com/post/201908/16/</link><pubDate>Fri, 16 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/16/</guid><description>也许人们已经听说过 HTTP2，有很多数大公司都使用HTTP2，如Google、Youtube、Facebook &amp;hellip;&amp;hellip; 那么什么是HTTP2？我们现</description></item><item><title>从.env文件中为Node.js加载环境变量</title><link>https://fe-tech.viewnode.com/post/201908/13/</link><pubDate>Tue, 13 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/13/</guid><description>使用环境变量是配置 Node.js 程序的好方法。而且许多包或模块可以基于不同的 NODE_ENV 变量的值表现出不同的行为。 存储环境变量的一种方法是将它们放在 .env 文件中。这些</description></item><item><title>如何开发跨框架组件？</title><link>https://fe-tech.viewnode.com/post/201908/08/</link><pubDate>Thu, 08 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/08/</guid><description>**跨框架组件（Cross Framework Component (CFC)）**是一种支持各种框架的基于单个通用模块有效结构。 跨框架组件用到了跨平台的方法。 跨平台是一种允许你</description></item><item><title>怎样编写更好的 JavaScript 代码</title><link>https://fe-tech.viewnode.com/post/201908/06/</link><pubDate>Tue, 06 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/06/</guid><description>我看到没有多少人谈论改进 JavaScript 代码的实用方法。以下是我用来编写更好的 JS 的一些顶级方法。 使用TypeScript 改进你 JS 代码要做的第一件事就是不写</description></item><item><title>超越 Cookie：当今的客户端数据存储</title><link>https://fe-tech.viewnode.com/post/201908/02/</link><pubDate>Fri, 02 Aug 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201908/02/</guid><description>当 cookie 被首次引入时，它是浏览器保存数据的唯一方式。之后又有了很多新的选择：Web Storage API、IndexedDB 和 Cache API。那么 cookie 死了吗？我们来看</description></item><item><title>什么是Deno，它与Node.js有什么不同？</title><link>https://fe-tech.viewnode.com/post/201907/31/</link><pubDate>Wed, 31 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/31/</guid><description>Node.js 的创建者 Ryan Dahl 花了一年半的时间研究 Deno ，这是一个新的 JavaScript 运行时环境，可以解决Node 的所有问题。 不要误解我的意思，Node 本身就是一个很棒的服务</description></item><item><title>回到基础：JavaScript API</title><link>https://fe-tech.viewnode.com/post/201907/30/</link><pubDate>Tue, 30 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/30/</guid><description>JavaScript 中的 API JavaScript 有许多可用的 API，通常被定义为浏览器 API或第三方 API。我们来分别学习它们。 浏览器 API 浏览器 API 内置于浏览器中 —— 包含来自浏览器的</description></item><item><title>Node.js 12 中的 ES 模块</title><link>https://fe-tech.viewnode.com/post/201907/25/</link><pubDate>Thu, 25 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/25/</guid><description>多年来，在 JavaScript 生态中出现了不同形式的模块化方案。开发人员使用了明确定义的规范（如 AMD 或 CommonJS）以及简单的编码模式（如通过揭示模块模式（</description></item><item><title>用 ref 访问 Vue.js 程序中的 DOM</title><link>https://fe-tech.viewnode.com/post/201907/23/</link><pubDate>Tue, 23 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/23/</guid><description>在本文中，你将了解如何在 Vue.js 中引用组件中的 HTML 元素。 前提条件 本文适用于所有使用 Vue 的开发人， 包括初学者。在阅读本文之前，你应该具备一些前提条件： Node.js</description></item><item><title>11个顶级 JavaScript 日历插件</title><link>https://fe-tech.viewnode.com/post/201907/19/</link><pubDate>Fri, 19 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/19/</guid><description>日历是我们生活中重要的一部分。在当今世界，人们大多使用网络或移动日历。它们随处可见，包括在各种软件中：预订应用、旅行软件、项目管理、管理面板</description></item><item><title>Vugu：Go + WebAssembly的现代UI库</title><link>https://fe-tech.viewnode.com/post/201907/18/</link><pubDate>Thu, 18 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/18/</guid><description>Vugo 是什么 Vugu 是一个 Go语言开发库，可以很容易地使用 Go 语言编写 Web 用户界面。 其基本思路如下： 在 .vugu 文件中编写 UI 组件。这些文件类似于你在 JavaScript 框架中看到的</description></item><item><title>PWA – 渐进式Web应用：你需要知道的一切</title><link>https://fe-tech.viewnode.com/post/201907/17/</link><pubDate>Wed, 17 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/17/</guid><description>你是否正处于选择 App 开发技术的两难境地？如今，渐进式 Web 应用程序需求旺盛。知道这是为什么吗 ？ 下面让我们来详细的梳理一下。 移动电话用户的增长促使在</description></item><item><title>用原生 JavaScript 实现十大 jQuery 函数</title><link>https://fe-tech.viewnode.com/post/201907/11/</link><pubDate>Thu, 11 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/11/</guid><description>在本文中我将把自己最常用的 jQuery 函数转换为原生 JavaScript。 有时我需要创建一个简单的静态 HTML 或登录页面，而且不想引入任何库或其它依赖。对这</description></item><item><title>Web 视频格式简明指南</title><link>https://fe-tech.viewnode.com/post/201907/10/</link><pubDate>Wed, 10 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/10/</guid><description>网络视频一直都很火。虽然在页面上嵌入 Instagram 和 Youtube 视频非常简单，但是有越来越多的需求 —— 比如许多电子商务的场景 —— 要求定制的视频传输方法。 在设置视频</description></item><item><title>TS与JS中的Getters和Setter究竟有什么用</title><link>https://fe-tech.viewnode.com/post/201907/09/</link><pubDate>Tue, 09 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/09/</guid><description>在本文中，我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗？什么时候使用它们是有意义的？ 当 ECMAScript 5（2009）发布时，getters</description></item><item><title>怎样切换不同版本的 Node</title><link>https://fe-tech.viewnode.com/post/201907/05/</link><pubDate>Fri, 05 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/05/</guid><description>有时候几乎每周都会发布新版本的 Node.js —— 每隔几周发布一次小版本，每隔几个月发布一次主要版本。如果你是一个需要在不同程序和项目之间切换的码农，可能</description></item><item><title>在 JavaScript 中深度克隆对象（及其工作原理）</title><link>https://fe-tech.viewnode.com/post/201907/04/</link><pubDate>Thu, 04 Jul 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201907/04/</guid><description>在 JavaScript 中深度克隆对象（及其工作原理） 如果你打算用 JavaScript 进行编码，那么就需要了解对象的工作方式。对象是 JavaScript 最重要的元素之一，深入理解了它会使你在编码时</description></item><item><title>Node.js 中的ES模块现状</title><link>https://fe-tech.viewnode.com/post/201906/26/</link><pubDate>Wed, 26 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/26/</guid><description>几乎每种编程语言都能将组成程序的代码拆分为多个文件。 在 C 和 C++ 中 #include 指令就用于这个目的，而 Java 和 Python 有 import 关键字。 JavaScript 是迄今为止为数不多的例外之一，但新</description></item><item><title>一文学会Vue中间件管道</title><link>https://fe-tech.viewnode.com/post/201906/25/</link><pubDate>Tue, 25 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/25/</guid><description>通常，在构建SPA时，需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 dashboard 路由，我们可以通过使用 auth 中间件来确保合法用户才能访问它</description></item><item><title>Vue生命周期钩子简介</title><link>https://fe-tech.viewnode.com/post/201906/21/</link><pubDate>Fri, 21 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/21/</guid><description>在本文中，我们来学习可用于 Vue JS 工作流程中所有的 hooks 。 Vue Vue JS 是一个非常先进的 JavaScript 框架，由尤雨溪 和 Vue 核心团队创建，超过 230 个开源社区爱好者贡献了代码。</description></item><item><title>页面审核工具 Chrome Lighthouse 简介</title><link>https://fe-tech.viewnode.com/post/201906/19/</link><pubDate>Wed, 19 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/19/</guid><description>Chrome Lighthouse 已经存在了一段时间了，但如果我要求你解释一下它能做什么，你能解释清楚吗？ 我发现许多 Web 开发人员包括初学者，都没有听说过这个工具，而那些尚未</description></item><item><title>怎样操作 JavaScript 数组</title><link>https://fe-tech.viewnode.com/post/201906/18/</link><pubDate>Tue, 18 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/18/</guid><description>JavaScript 中的数组是什么？ 在开始之前，你需要先了解数组的真正含义。 在 JavaScript 中，数组是一个用于存储不同数据类型的变量。它将不同的元素存储在一个盒子中，供以</description></item><item><title>用Vue.js在浏览器中裁剪图像</title><link>https://fe-tech.viewnode.com/post/201906/17/</link><pubDate>Mon, 17 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/17/</guid><description>你是否写了一个需要接受用户上传图片的 Web 应用，后来才意识到用户总是提供各种形状和大小的图像来破坏你的网站主题？在网络上处理图像很容易成为一种痛</description></item><item><title>如何使用Web Share API</title><link>https://fe-tech.viewnode.com/post/201906/13/</link><pubDate>Thu, 13 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/13/</guid><description>Web Share API 自从它首次在Android 版 Chrome 61中推出以来，似乎已经不再受到关注。从本质上讲，它提供了一种方法，可以直接从网站或 Web 应用中共享内容（例</description></item><item><title>Svelte 3 快速开发指南</title><link>https://fe-tech.viewnode.com/post/201906/12/</link><pubDate>Wed, 12 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/12/</guid><description>什么是Svelte？ Svelte 是由 Rich Harris 创建的 JavaScript UI 库。 Rich 认为 virtual DOM 带来了额外开销，并提出了 Svelte，现在它正处于第三版的状态。 但是你为什么要学习Sv</description></item><item><title>这才是GraphQL最详尽的解释</title><link>https://fe-tech.viewnode.com/post/201906/06/</link><pubDate>Thu, 06 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/06/</guid><description>GraphQL是一种查询语言、一种执行引擎和一种规范，它引领开发人员重新思考应该怎样去构建客户端和API。 GraphQL 是当今软件技术领域最大的流行语之</description></item><item><title>什么时候不能在 Node.js 中使用 Lock Files</title><link>https://fe-tech.viewnode.com/post/201906/04/</link><pubDate>Tue, 04 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/04/</guid><description>“可是在我的机器上能工作啊！”这种场景可能是调试 bug 时最常见的问题。这通常是由于出错的机器和你自己的机器上系统的底层依赖性不同的结果。所以 yarn 和</description></item><item><title>在 React 16 中从 setState 返回 null 的妙用</title><link>https://fe-tech.viewnode.com/post/201906/03/</link><pubDate>Mon, 03 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/03/</guid><description>概述 在 React 16 中为了防止不必要的 DOM 更新，允许你决定是否让 .setState 更来新状态。在调用 .setState 时返回 null 将不再触发更新。 我们将通过重构一个 mocktail （一种不含酒精的鸡尾酒</description></item><item><title>通过动图学习 CSS Flex</title><link>https://fe-tech.viewnode.com/post/201906/02/</link><pubDate>Sun, 02 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/02/</guid><description>如果一张图片胜过千言万语 —— 那么动画呢？ Flex 无法通过文字或静态图像有效地完全解释。为了巩固你对flex的了解，我制作了这些动画演示。 注意 **overflow: hidden** 行</description></item><item><title>用CSS Grid Shepherd 技术对数据进行排序</title><link>https://fe-tech.viewnode.com/post/201906/01/</link><pubDate>Sat, 01 Jun 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201906/01/</guid><description>牧羊人很擅长照顾他们的羊群，为牧群带来秩序和结构。即使有几百只毛茸茸的动物，牧羊人仍然会在一天结束时将它们悉数带回农场。 而对于程序员来说，当</description></item><item><title>8 个你不知道的 DOM 功能</title><link>https://fe-tech.viewnode.com/post/201905/30/</link><pubDate>Thu, 30 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/30/</guid><description>最近关注了太多的工具，现在最好从所有 React 和 npm-install-everything 的文章中休息一下，来看看一些纯粹的 DOM 和 Web API 功能，它们可以在不依赖任何第三方库的前提下在现代浏览器中</description></item><item><title>使用 apiDoc 为你的 Node.js API 生成文档</title><link>https://fe-tech.viewnode.com/post/201905/29/</link><pubDate>Wed, 29 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/29/</guid><description>当你为其他开发人员（前端，桌面，移动等）开发 API 时，需要生成一份风格良好的文档，以便他们知道可以使用的内容和方式，这非常重要。 为此，在Node</description></item><item><title>深入解析 Node.js 的 console.log</title><link>https://fe-tech.viewnode.com/post/201905/24/</link><pubDate>Fri, 24 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/24/</guid><description>当你开始用 JavaScript 进行开发时，可能学到的第一件事就是如何用 console.log 将内容记录到控制台。如果你去搜索如何调试 JavaScript，会发现数百篇博文和 StackOverflow 文章</description></item><item><title>Node.js 究竟是什么？</title><link>https://fe-tech.viewnode.com/post/201905/23/</link><pubDate>Thu, 23 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/23/</guid><description>Node.js 是一个 JavaScript 运行时环境。听起来还不错，不过这究竟意味着什么？它又是如何运作的？ Node 运行时环境包含执行 JavaScript 程序所需要的一切。 如果你了解 Java 的话，会发现</description></item><item><title>杀手级的TypeScript功能：const断言</title><link>https://fe-tech.viewnode.com/post/201905/20/</link><pubDate>Mon, 20 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/20/</guid><description>我发现官方的 TypeScript 文档非常有用，但是总觉得有点过于学术化并且枯燥无味。每当我发现一个新功能时，我想要知道这个功能究竟能够解决什么问题而不是长篇大</description></item><item><title>用惰性加载优化 React 程序</title><link>https://fe-tech.viewnode.com/post/201905/18/</link><pubDate>Sat, 18 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/18/</guid><description>惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的</description></item><item><title>JavaScript中Object.freeze()与const之间的区别</title><link>https://fe-tech.viewnode.com/post/201905/15/</link><pubDate>Wed, 15 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/15/</guid><description>ES6 自发布以来为 JavaScript 带来了一些新功能和方法。与 JavaScript 相比，这些功能更好地改善了我们的工作流程。这些新功能包括 Object.freeze() 方法和 const。 一些开发人员尤其是新</description></item><item><title>13个帮你提高开发效率的现代CSS框架</title><link>https://fe-tech.viewnode.com/post/201905/12/</link><pubDate>Sun, 12 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/12/</guid><description>本文将向你介绍一系列顶级CSS框架。有些人可能听说过，也可能对有些人是全新的。但它们都提供了各种有用的先进功能，可以改善你的工作流程。开始吧</description></item><item><title>深入理解Shadow DOM v1</title><link>https://fe-tech.viewnode.com/post/201905/08/</link><pubDate>Wed, 08 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/08/</guid><description>shadow DOM不是超级英雄电影中的恶棍，也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型（或简称DOM）中缺少的树封装方法。 网页通常使用来自</description></item><item><title>快速上手BootstrapVue</title><link>https://fe-tech.viewnode.com/post/201905/07/</link><pubDate>Tue, 07 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/07/</guid><description>Vue.js 是一个流行的 JavaScript 库，用于在短时间内开发原型。这包括用户界面、前端应用、静态网页和本机移动应用。它以易用的语法和简单的数据绑定功能而闻名。 最近</description></item><item><title>用Node.js创建安全的 GraphQL API</title><link>https://fe-tech.viewnode.com/post/201905/06/</link><pubDate>Mon, 06 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/06/</guid><description>本文的目标是提供关于如何创建安全的 Node.js GraphQL API 的快速指南。 你可能会想到一些问题： 使用 GraphQL API 的目的是什么？ 什么是GraphQL API？ 什么是Graph</description></item><item><title>JavaScript 闭包基本指南</title><link>https://fe-tech.viewnode.com/post/201905/05/</link><pubDate>Sun, 05 May 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201905/05/</guid><description>闭包是函数创建时作用域内所有变量的集合。要使用闭包，需要在另一个函数中创建一个函数，这种函数被称为嵌套函数。内部函数可以访问外部函数作用域中</description></item><item><title>浏览器中的JavaScript：文档对象模型与 DOM 操作</title><link>https://fe-tech.viewnode.com/post/201904/30/</link><pubDate>Tue, 30 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/30/</guid><description>JavaScript 并没有那么糟糕。作为运行在浏览器中的脚本语言，它对于网页操作非常有用。在本文中，我们将看到可以用哪些手段来修改 HTML 文档和交互。 什么是文档对象</description></item><item><title>用 TypeScript 开发 Node.js 程序</title><link>https://fe-tech.viewnode.com/post/201904/29/</link><pubDate>Mon, 29 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/29/</guid><description>当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。 在本文中</description></item><item><title>快速上手最新的 Vue CLI 3</title><link>https://fe-tech.viewnode.com/post/201904/25/</link><pubDate>Thu, 25 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/25/</guid><description>概要：本文将指导你快速上手 Vue CLI 3，包括最新的用户图形界面和即时原型制作功能的使用步骤。 介绍 尤雨溪（ Evan You ）发起并创建的 Vue JS ，是一个用于构建用户</description></item><item><title>JavaScript 程序员可以从C ++中学到什么</title><link>https://fe-tech.viewnode.com/post/201904/24/</link><pubDate>Wed, 24 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/24/</guid><description>如何通过了解类型、内存以及低级语言使你成为更好的程序员 像许多开发新手一样，JavaScript 是我学的第一门语言。它是一种 Web 前端编程语言 ——</description></item><item><title>React Router v4教程：为你的 React 应用创建路由</title><link>https://fe-tech.viewnode.com/post/201904/23/</link><pubDate>Tue, 23 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/23/</guid><description>在这篇关于 React Router 的博文中，我将引导你搞懂 React 中路由的概念。 你将看到以下主题： 常规路由 为什么需要 React 路由？ React 中的路由 React Router v4 的优点 常规路由 通常，当用户</description></item><item><title>如何删除 JavaScript 数组中的虚值</title><link>https://fe-tech.viewnode.com/post/201904/19/</link><pubDate>Fri, 19 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/19/</guid><description>引用自 MDN : falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值. JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为</description></item><item><title>Javascript 的对象拷贝</title><link>https://fe-tech.viewnode.com/post/201904/17/</link><pubDate>Wed, 17 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/17/</guid><description>在开始之前，我先普及一些基础知识。Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的，也就是说，它们可以重新被赋值。所</description></item><item><title>回到基础：用循环优化 JavaScript 程序</title><link>https://fe-tech.viewnode.com/post/201904/16/</link><pubDate>Tue, 16 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/16/</guid><description>对于提高 JavaScript 程序的性能这个问题，最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。 我们将看到 JavaScript 中主</description></item><item><title>如何用 WebAssembly 为Web应用提速20倍（案例研究）</title><link>https://fe-tech.viewnode.com/post/201904/15/</link><pubDate>Mon, 15 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/15/</guid><description>在本文中，我们将探讨如何通过用已编译的 WebAssembly 替换 JavaScript 来加速 Web 应用。 如果你还有听说过 WebAssembly，就先看一下解释：WebAssembly 是</description></item><item><title>JavaScript 中的强制类型转换</title><link>https://fe-tech.viewnode.com/post/201904/11/</link><pubDate>Thu, 11 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/11/</guid><description>JavaScript 原语 JavaScript 建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了，比如字符串和数字： var greet = &amp;#34;Hello&amp;#34;; var year = 89; 字符串和数字是该语言所谓“原语”的一部分</description></item><item><title>使用 ESLint + Prettier 简化代码 Review 过程</title><link>https://fe-tech.viewnode.com/post/201904/10/</link><pubDate>Wed, 10 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/10/</guid><description>在最近的一个项目中，我们通过设置 ESLint 和 Prettier 来进行自动化语法检查，并对 JavaScript 项目的代码风格管理。 为什么自动 Lint 和代码风格很重要？ ESLint 通过对 JavaScript 文件执行自动扫</description></item><item><title>我怎样用Node.js自动完成工作的</title><link>https://fe-tech.viewnode.com/post/201904/09/</link><pubDate>Tue, 09 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/09/</guid><description>我们在工作中经常会进行很多繁琐的任务：更新配置文件，复制和粘贴文件，更新 Jira 标签等。 慢慢的花在这些任务上的时间会越来越多。我在 2016 年时在一家网络</description></item><item><title>怎样使你的 JavaScript 代码简单易读</title><link>https://fe-tech.viewnode.com/post/201904/08/</link><pubDate>Mon, 08 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/08/</guid><description>解决一个问题可以有很多方法，但是有些方法很复杂，甚至有些是荒谬的。在本文中，我想谈谈解决一个问题时的好方案和坏方案。 #1 让我们先从怎样删除数组</description></item><item><title>怎样与 CORS 和 cookie 打交道</title><link>https://fe-tech.viewnode.com/post/201904/03/</link><pubDate>Wed, 03 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/03/</guid><description>前言 CORS 与 cookie 在前端是个非常重要的问题，不过在大多数情况下，因为前后端的 domain 一般是相同的，所以很少去关心这些问题。或者只是要求后端设置 Access-Control-Allow-Origin: * 就行了，</description></item><item><title>一网打尽 JavaScript 的作用域</title><link>https://fe-tech.viewnode.com/post/201904/02/</link><pubDate>Tue, 02 Apr 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201904/02/</guid><description>作用域决定了变量的生命周期和可见性，变量在作用域范围之外是不可见的。 JavaScript 的作用域包括：模块作用域，函数作用域，块作用域，词法作用域和全局作用域</description></item><item><title>回到基础：理解 JavaScript DOM</title><link>https://fe-tech.viewnode.com/post/201903/28/</link><pubDate>Thu, 28 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/28/</guid><description>什么是 DOM？ 基本上网页由 HTML 和 CSS 文档组成。浏览器用于创建文档的描述被称为文档对象模型（DOM）。它使 Javascript 能够访问和操作页面的元素和样式。该模型</description></item><item><title>14个最好的 JavaScript 数据可视化库</title><link>https://fe-tech.viewnode.com/post/201903/25/</link><pubDate>Mon, 25 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/25/</guid><description>你的程序有多么依赖数据？即使应用程序不完全面向业务，你也可能需要管理面板、仪表板、性能跟踪以及用户非常喜欢的类似分析功能的数据。 对于 JS 开发人</description></item><item><title>提高网站加载速度的一些小技巧</title><link>https://fe-tech.viewnode.com/post/201903/20/</link><pubDate>Wed, 20 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/20/</guid><description>为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争，拥有一个吸引人的网站可以帮助你脱颖而出。研究表明，如果加载时间超过3秒，会</description></item><item><title>11 个最好的 JavaScript 动态效果库</title><link>https://fe-tech.viewnode.com/post/201903/19/</link><pubDate>Tue, 19 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/19/</guid><description>当我想要在网上找一个简洁的 Javascript 动效库时，总是发现很多“推荐”的库都是缺乏持续维护的。 经过一番研究，我收集了 11 个最好的库，你可以用在自己的项目中</description></item><item><title>deno 如何偿还 node.js 的十大技术债</title><link>https://fe-tech.viewnode.com/post/201903/18/</link><pubDate>Mon, 18 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/18/</guid><description>deno 如何偿还 node.js 的十大技术债 根据网络资料整理 “Node现在太难用了！”。Node.js之父 Ryan Dahl 去年初要开发一款 JavaScript 互动式数据分析工具时，忍不住抱怨</description></item><item><title>JavaScript 高阶函数快速入门</title><link>https://fe-tech.viewnode.com/post/201903/15/</link><pubDate>Fri, 15 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/15/</guid><description>高阶函数 接受和/或返回另外一个函数的函数被称为高阶函数。 之所以是高阶，是因为它并非字符串、数字或布尔值，而是从更高层次来操作函数。漂亮的元。</description></item><item><title>一文学懂 TypeScript 的类型</title><link>https://fe-tech.viewnode.com/post/201903/14/</link><pubDate>Thu, 14 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/14/</guid><description>你将学到什么 阅读本文后，你应该能够理解以下代码的含义： interface Array&amp;lt;T&amp;gt; { concat(...items: Array&amp;lt;T[] | T&amp;gt;): T[]; reduce&amp;lt;U&amp;gt;( callback: (state: U, element: T, index: number, array: T[]) =&amp;gt; U, firstState?: U): U; ··· } 如果你认为这段代码非常神秘 —— 那</description></item><item><title>尝鲜 ES2019 的新功能</title><link>https://fe-tech.viewnode.com/post/201903/13/</link><pubDate>Wed, 13 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/13/</guid><description>ECMAScript 每年都会发布一个新版本，其中的提案是已经正式通过的，并分发给开发者和用户。本文将讨论该语言的最新版本，以及它又具有了什么新功能。 ES10/ES2019 在本次更</description></item><item><title>React教程：组件，Hooks和性能</title><link>https://fe-tech.viewnode.com/post/201903/11/</link><pubDate>Mon, 11 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/11/</guid><description>正如 我们的React教程的第一部分 中所指出的，开始使用 React 相对容易。首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，</description></item><item><title>回到基础：如何用原生 DOM API 生成表格</title><link>https://fe-tech.viewnode.com/post/201903/10/</link><pubDate>Sun, 10 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/10/</guid><description>怎样用原生 JavaScript 生成表格需？本文告诉你答案！ 这是一个刷 JavaScript 经验值的好机会：在技术面试中出现的最多的一个问题就是怎样用原生 API 操作 DOM。 在下面的教程</description></item><item><title>基于 Babel 的 npm 包的最小化设置</title><link>https://fe-tech.viewnode.com/post/201903/04/</link><pubDate>Mon, 04 Mar 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201903/04/</guid><description>本文描述了通过 Babel 生成 npm 包的最小设置。你可以在 GitHub 中看到案例 re-template-tag 的设置。 GitHub：https://github.com/rauschma/re</description></item><item><title>React 教程：快速上手指南</title><link>https://fe-tech.viewnode.com/post/201902/26/</link><pubDate>Tue, 26 Feb 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201902/26/</guid><description>前端和 JavaScript 是一个奇怪的世界。大量不断推出的新技术的同时，也在被不需要它们的人嘲笑，往往很多人都会这样做。我们有时会对不断涌现的信息、库和讨论感</description></item><item><title>通过 Web 控制蓝牙设备：WebBluetooth入门</title><link>https://fe-tech.viewnode.com/post/201902/20/</link><pubDate>Wed, 20 Feb 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201902/20/</guid><description>摘要：通过渐进式 Web 应用（Progressive Web Apps）技术，你可以开发成熟的 Web 应用。 得益于大量新规范和新功能，以前需要在本机执行的应用，</description></item><item><title>怎样使用React Context API</title><link>https://fe-tech.viewnode.com/post/201902/19/</link><pubDate>Tue, 19 Feb 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201902/19/</guid><description>React Context API 现在已经成为一个实验性功能，但是只有在 React 16.3.0 中才能用在生产中。本文将向你展示两个基本的 Web 商店应用程序，一个使用了 Context API 进行构建，另一个则不</description></item><item><title>正则表达式在 ES2018 中的新写法</title><link>https://fe-tech.viewnode.com/post/201902/18/</link><pubDate>Mon, 18 Feb 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201902/18/</guid><description>摘要：如果你曾用 JavaScript 做过复杂的文本处理和操作，那么你将会对 ES2018 中引入的新功能爱不释手。 在本文中，我们将详细介绍第 9 版标准如何提高 JavaScript 的文本处理能力</description></item><item><title>怎样开发可重用组件并发布到NPM</title><link>https://fe-tech.viewnode.com/post/201902/15/</link><pubDate>Fri, 15 Feb 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201902/15/</guid><description>摘要：本文着眼于使用具有内置功能和样式的组件来扩充HTML。 我们还将学习如何通过 NPM 使这些自定义元素在项目中得到重用。 即便是最简单的组件，人力</description></item><item><title>推荐一个基于 Node.js 的表单验证库</title><link>https://fe-tech.viewnode.com/post/201902/14/</link><pubDate>Thu, 14 Feb 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201902/14/</guid><description>API 在执行过程中的一个基本任务是数据验证。 在本文中，我想向你展示如何为你的数据添加防弹验证，同时返回风格良好的格式。 在 Node.js 中进行自定义数据验证既</description></item><item><title>CSS粘性定位是怎样工作的</title><link>https://fe-tech.viewnode.com/post/201901/31/</link><pubDate>Thu, 31 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/31/</guid><description>浏览器对 CSS粘性定位有着非常好的支持，但很多开发者都没有用过它。 究其原因有两个： 第一，受到浏览器的良好支持需要漫长的等待：浏览器的支持往往</description></item><item><title>CSS Flexbox 基础可视化手册</title><link>https://fe-tech.viewnode.com/post/201901/29/</link><pubDate>Tue, 29 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/29/</guid><description>介绍 Flexbox是 Flexible Box Module（弹性盒模型）的缩写。 是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。 Flexbox同一时</description></item><item><title>12个令人难以置信的CSS实验项目</title><link>https://fe-tech.viewnode.com/post/201901/28/</link><pubDate>Mon, 28 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/28/</guid><description>你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可</description></item><item><title>JavaScript中的持续传递风格</title><link>https://fe-tech.viewnode.com/post/201901/25/</link><pubDate>Fri, 25 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/25/</guid><description>持续传递风格( CPS)是起源于20世纪70年代的一种编程风格，它在20世纪80和90年代成为高级程序设计语言中的特色之一。 现在，CPS作为非</description></item><item><title>异步函数中的异常处理及测试方法</title><link>https://fe-tech.viewnode.com/post/201901/22/</link><pubDate>Tue, 22 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/22/</guid><description>可以在 Javascript 的异步函数中抛出错误吗？ 这个话题已被反复提起过几百次，不过这次让我们从TDD的角度来回答它。 如果你能不在Stackoverflow上</description></item><item><title>对SVG动画进行异步光栅化处理</title><link>https://fe-tech.viewnode.com/post/201901/21/</link><pubDate>Mon, 21 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/21/</guid><description>渲染SVG图像可能会非常慢 在转换 SVG 图像时，浏览器会试着在每一帧上进行渲染，以便使图像尽可能的清晰。 不幸的是，SVG渲染可能会很慢，特别是对于</description></item><item><title>JavaScript的工作原理：V8引擎内部机制及优化代码的5个技巧</title><link>https://fe-tech.viewnode.com/post/201901/17/</link><pubDate>Thu, 17 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/17/</guid><description>几个星期前，我们开始了一系列旨在深入挖掘 JavaScript 及其工作原理的系列：通过了解JavaScript的构建模块以及它们如何共同发挥作用，你将能够编写更</description></item><item><title>现代浏览器探秘(part4)：事件处理</title><link>https://fe-tech.viewnode.com/post/201901/16/</link><pubDate>Wed, 16 Jan 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/16/</guid><description>前文目录： 现代浏览器探秘(part1)：架构 现代浏览器探秘(part2)：导航 现代浏览器探秘(part3)：渲染 现代浏览器探秘(part4)</description></item><item><title>JavaScript的工作原理：引擎，运行时和调用栈</title><link>https://fe-tech.viewnode.com/post/201901/15/</link><pubDate>Tue, 15 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/15/</guid><description>随着JavaScript变得越来越流行，越来越多的团队正在利用他们为技术栈中做多个级别的支持：前端、后端、混合应用、嵌入式设备等等。 本文旨在</description></item><item><title>现代浏览器探秘(part3)：渲染</title><link>https://fe-tech.viewnode.com/post/201901/14/</link><pubDate>Mon, 14 Jan 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/14/</guid><description>现代浏览器探秘(part1)：架构 现代浏览器探秘(part2)：导航 渲染器进程的内部工作原理 这是关于浏览器内部工作原理系列的第3部分。 之前，</description></item><item><title>浅议 Promises/Futures 模式</title><link>https://fe-tech.viewnode.com/post/201901/11/</link><pubDate>Fri, 11 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/11/</guid><description>随着 JavaScript 使用的不断增加，异步事件驱动的应用程序变得越来越流行。 但是，许多开发者经常面临的一个问题是：在异步环境中进行依赖于结果的操作。 你可能经</description></item><item><title>现代浏览器探秘(part2)：导航</title><link>https://fe-tech.viewnode.com/post/201901/10/</link><pubDate>Thu, 10 Jan 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/10/</guid><description>导航时都发生了什么 这是关于Chrome内部工作原理系列的第2部分。 在上一篇文章 中，我们研究了不同的进程与线程是怎样如何处理浏览器不同部分的。</description></item><item><title>深入探讨 Undefined</title><link>https://fe-tech.viewnode.com/post/201901/09/</link><pubDate>Wed, 09 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/09/</guid><description>Undefined 这个概念听起来很简单，不过你知道应该怎样检查JavaScript中的变量或属性是否真的存在吗？ 做这件事最好的方法是什么？ 我们如何涵盖所有的</description></item><item><title>现代浏览器探秘(part 1)：架构</title><link>https://fe-tech.viewnode.com/post/201901/08/</link><pubDate>Tue, 08 Jan 2019 12:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/08/</guid><description>CPU，GPU，内存和多进程架构 在这个由4部分组成的系列文章中，我们将介绍Chrome浏览器从高级架构到渲染管道的具体细节。 如果你想知道浏览</description></item><item><title>聊一聊 JavaScript 中的执行上下文和调用栈</title><link>https://fe-tech.viewnode.com/post/201901/04/</link><pubDate>Fri, 04 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/04/</guid><description>在本文中，我将深入探讨JavaScript的最基本部分之一，即Execution Context(执行上下文)。 在本文结束时，你应该对解释器了</description></item><item><title>第三方CSS安全吗？</title><link>https://fe-tech.viewnode.com/post/201901/03/</link><pubDate>Thu, 03 Jan 2019 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/201901/03/</guid><description>前一段时间，有很多关于用CSS构建的“键盘记录器”的讨论（源代码见：https://github.com/maxchehab/CSS-Key</description></item><item><title>聊聊 Array 中的一个小坑</title><link>https://fe-tech.viewnode.com/post/2018/1227/</link><pubDate>Thu, 27 Dec 2018 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/2018/1227/</guid><description>Array 类型检测 function foo(obj) { // … } 假设obj是一个数组，我们想要实现一些功能。比如 JSON.stringify就是一个例子，它以不同的方式把数组输出到其</description></item><item><title>正确使用异步函数的姿势</title><link>https://fe-tech.viewnode.com/post/2018/1226/</link><pubDate>Wed, 26 Dec 2018 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/2018/1226/</guid><description>在编写异步函数时，await 、 return与return await之间存在差异，选择正确的处理方式非常重要。 让我们先从这个异步函数开始： async function</description></item><item><title>ECMAScript 2016,2017和2018中所有新功能的示例</title><link>https://fe-tech.viewnode.com/post/2018/1129/</link><pubDate>Thu, 29 Nov 2018 11:00:00 +0800</pubDate><guid>https://fe-tech.viewnode.com/post/2018/1129/</guid><description>我们很难及时得知JavaScript（ECMAScript）中的最新功能，同时找到相关的示例代码更加困难。 为了解决这个问题，我将在本文中介绍</description></item></channel></rss>