xiaozhi

9. 4 个 useState Hook 示例

为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！到 React 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。编写class Thing extends React.Component，将函数体复制到render()方法中，修复缩进，最后添加需要的状态。今天，可以使用 Hook 获得相同的

前端

2019-09-05  1827 人浏览

xiaozhi

21.JavaScript 是如何工作的：JavaScript 的内存模型

//声明一些变量并初始化它们 vara=5 letb='xy' constc=true //分配新值 a=6 b=b+'z' c=false//类型错误:不可对常量赋值作为程序员，声明变量、初始化变量(或不初始化变量)以及稍后为它们分配新值是我们每天都要做的事情。但是当这样做的时候会发生什么呢? JavaScript 如何在内部处理这些基本功能?

前端

2019-09-04  1820 人浏览

xiaozhi

24.JavaScript中轻松遍历对象属性的几种方式

自身可枚举属性Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。这是合理的，因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键：letsimpleColors={

前端

2019-09-04  1811 人浏览

xiaozhi

20.任务，微任务、队列和时间表

原文：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/译者：前端小智为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！思考下面 JavaScript 代码：console.log('scriptstart'); setTimeou

前端

2019-09-04  1804 人浏览

xiaozhi

9.JavaScript是如何工作的:Web推送通知的机制

推送通知在移动端非常常见。在 Web 端，尽管开发人员对其功能的需求很高，但出于某些原因，推送通知被引入 Web 的时间比较晚。简介Web 推送通知允许用户在 Web 应用程序需要更新时选择是否接收更新消息，目的是在重新吸引用户群注意的更新信息通常是对用户来说有趣、重要、实时的内容。推送通知的基础是我们上一篇讲的 Service Workers。在这种情况下，使用 Service Worker 的

前端

2019-09-04  1791 人浏览

xiaozhi

13.揭秘变量提升

为了保证可读性，本文采用意译而非直译。引用 ES6 规范作者 Allen Wirfs-Brock一条最近的推特：变量提升是一个陈旧且令人困惑的术语。甚至在 ES6之前：变量提升的意思究竟是“提升至当前作用域顶部”还是“从嵌套的代码块中提升到最近的函数或脚本作用域中”？还是两者都有？受 Allen 启发，本文提出了一种不同的方法来描述变量声明。1. 声明：作用域与激活可以将声明分为两个方面：作用域：

前端

2019-09-04  1782 人浏览

hangge

SpringBoot - 自定义启动Banner（附：使用艺术字体）

我们知道Spring Boot项目启动时会在控制台打印出一个banner，下面演示如何定制这个banner。1，修改 banner 文字（1）首先在resources目录下创建一个banner.txt文件。（2）在这个文件中写入的文本将在项目启动时打印出来。比如我写入如下内容：12345-----------------------welcome to hangge.com------------

前端

2019-09-02  1777 人浏览

xiaozhi

19.JS 中有趣的事实

原文：https://dev.to/shafikshaon/interesting-facts-in-javascript-22nk译者：前端小智为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！使用 JS 有很多有趣的地方。尽管工程师们每天都在与之打交道，但仍有一些语言没有被开发出来。本广将介绍一些你可能想不到的JS特性。NaN 是一个

前端

2019-09-04  1776 人浏览

xiaozhi

1.React高级组件精讲

React高级组件精讲高阶函数是以函数为参数，并且返回也是函数的的函数。类似的，高阶组件（简称HOC）接收 React 组件为参数，并且返回一个新的React组件。高阶组件本质也是一个函数，并不是一个组件。高阶组件的函数形式如下：constEnhanceComponent=higherOrderComponent(WrappedComponent)通过一个简单的例子解释高阶组件是如何复用的。现在有

前端

2019-09-05  1769 人浏览

xiaozhi

11.JavaScript是如何工作的:渲染引擎和优化其性能的技巧

当你构建 Web 应用程序时，你不只是编写单独运行的 JavaScript 代码，你编写的 JavaScript 正在与环境进行交互。了解这种环境，它的工作原理以及它的组，这些有助于你够构建更好的应用程序，并为应用程序发布后可能出现的潜在问题做好充分准备。浏览器的主要组件包括：用户界面 (User interface)：包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页

前端

2019-09-04  1766 人浏览

xiaozhi

27.如何使用useReducer Hook

看到“reducer”这个词，容易让人联想到Redux，但是在本文中，不必先理解Redux才能阅读这篇文章。咱们将一起讨论“reducer”实际上是什么，以及如何利用useReducer来管理组件中的复杂状态，以及这个新钩子对Redux意味着什么？Reducer 是什么鬼如果你熟悉Redux或数组上中的reduce方法，你大概就知道“reducer”是什么。 如果不熟悉，“reducer”大概是一

前端

2019-09-04  1764 人浏览

xiaozhi

2.Web 性能优化： 图片优化让网站大小减少 62%

图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。因此，虽然网络图像需要清晰明快，但它们尺寸可以缩小压缩的，使用加载时间保持在可接受的水平。在我的网站上，我注意到我的主页的页面大小 超过了1.1MB，图片占了约88%，我还注意到我提供的图像比它们需要的大(在分辨率方面)，显然，还有很多改进的空间。我开始阅读 Addy Osmani

前端

2019-09-04  1761 人浏览

web

XML中的转义字符

HTML中的转义字符 HTML中<, >，&等有特别含义，(前两个字符用于链接签，&用于转义)，不能直接使用。使用这三个字符时，应使用他们的转义序列，如下所示：&amp; 或 &&和&lt; 或 <<小于号&gt; 或 >>大于号&quot;"双引号空格&copy;©版权符&reg

前端

2019-08-20  1749 人浏览

xiaozhi

13.JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

概述你肯定知道，动画在创建引人注目的 Web 应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上，商户开始意识到完美、愉快的用户体验的重要性，结果 Web 应用程序变得越来越重，并具有更动态交互的 UI。这一切都需要更复杂的动画，以便用户在整个过程中更平稳地进行状态转换。今天，这甚至不被认为是什么特别的事情。用户正变得越来越挑剔，默认情况下，他们期望的是具有高响应性和交互性的用

前端

2019-09-04  1740 人浏览

xiaozhi

3.JavaScript如何工作:内存管理+如何处理4个常见的内存泄漏

本中，我们将讨论另一个重要主题——内存管理，这是由于日常使用的编程语言越来越成熟和复杂，开发人员容易忽视这一问题。我们还将提供一些有关如何处理JavaScript中的内存泄漏的技巧，在SessionStack中遵循这些技巧，既能确保SessionStack 不会导致内存泄漏，也不会增加我们集成的Web应用程序的内存消耗。概述像 C 这样的编程语言，具有低级内存管理原语，如malloc()和free

前端

2019-09-04  1740 人浏览

xiaozhi

4.Web 性能优化：21种优化CSS和加快网站速度的方法

CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小型 web 项目，CSS通常只占总资源消耗的一小部分。框架打破了这种平衡。包括一个 JavaScript GUI 堆栈，如 jQuery UI，可以观察 CSS, JS 和 HTML大小逐渐的变大。通

前端

2019-09-04  1729 人浏览

xiaozhi

23.关于css margin，你需要知道的一切

原文：https://www.smashingmagazine.com/2019/07/margins-in-css/译者：前端小智为了保证的可读性，本文采用意译而非直译。当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。CSS1中描述了margi

前端

2019-09-04  1724 人浏览

xiaozhi

34.JS 如何创建、读取和删除cookie

Cookie为 Web 应用程序保存用户相关信息提供了一种有用的方法。例如，当用户访问咱们的站点时，可以利用Cookie保存用户首选项或其他信息，这样，当用户下次再访问咱们的站点时，应用程序就可以检索以前保存的信息。Cookie 是什么鬼Cookie是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时，Web 应用程序都可以读取 Cookie 包含的信息。C

前端

2019-09-04  1718 人浏览

xiaozhi

7.JavaScript是如何工作的:Web Workers的构建块+ 5个使用他们的场景

这次我们会逐步讲解Web Workers，先说个简单的概念，接着讨论不同类型的Web Workers，他们的组成部分是如何一起工作的，以及不同场景下它们各自优势和限制。最后，提供5个正确使用Web Workers的场景。正如我们前面文章讨论的那样，你应该知道 JavaScript 语言采用的是单线程模型。然而，JavaScript 也为开发人员提供了编写异步代码的机会。异步编程的局限性以前的文章讨

前端

2019-09-04  1712 人浏览

web

js中获取当前url路径

可以使用 window.location 获取当前页面url。以下是一些简单应用。<script> $(function(){ // 返回 web 主机的域名，如：http://127.0.0.1:8080/testdemo/test.html?id=1&name=test var url = window.location.

前端

2019-08-15  1711 人浏览