你我学习网
你我博客
热衷分享技术，专注打造技术影响力的视频博客系统
-
xiaozhi
-
6.React 新特性 Hooks 讲解及实例(三)
使用 Context Hooks使用 Context ,首先顶层先声明Provier组件，并声明value属性，接着在后代组件中声明Consumer组件，这个Consumer子组件，只能是唯一的一个函数，函数参数即是Context的负载。如果有多个Context,Provider和Consumer任意的顺序嵌套即可。此外我们还可以针对任意一个Context使用contextType来简化对这个Co1514 人浏览
-
xiaozhi
-
1.React高级组件精讲
React高级组件精讲高阶函数是以函数为参数，并且返回也是函数的的函数。类似的，高阶组件（简称HOC）接收 React 组件为参数，并且返回一个新的React组件。高阶组件本质也是一个函数，并不是一个组件。高阶组件的函数形式如下：constEnhanceComponent=higherOrderComponent(WrappedComponent)通过一个简单的例子解释高阶组件是如何复用的。现在有1508 人浏览
-
xiaozhi
-
24.JavaScript中轻松遍历对象属性的几种方式
自身可枚举属性Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。这是合理的，因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键：letsimpleColors={1507 人浏览
-
xiaozhi
-
2.Web 性能优化： 图片优化让网站大小减少 62%
图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。因此，虽然网络图像需要清晰明快，但它们尺寸可以缩小压缩的，使用加载时间保持在可接受的水平。在我的网站上，我注意到我的主页的页面大小 超过了1.1MB，图片占了约88%，我还注意到我提供的图像比它们需要的大(在分辨率方面)，显然，还有很多改进的空间。我开始阅读 Addy Osmani1503 人浏览
-
xiaozhi
-
20.任务，微任务、队列和时间表
原文：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/译者：前端小智为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！思考下面 JavaScript 代码：console.log('scriptstart'); setTimeou1502 人浏览
-
xiaozhi
-
9.JavaScript是如何工作的:Web推送通知的机制
推送通知在移动端非常常见。在 Web 端，尽管开发人员对其功能的需求很高，但出于某些原因，推送通知被引入 Web 的时间比较晚。简介Web 推送通知允许用户在 Web 应用程序需要更新时选择是否接收更新消息，目的是在重新吸引用户群注意的更新信息通常是对用户来说有趣、重要、实时的内容。推送通知的基础是我们上一篇讲的 Service Workers。在这种情况下，使用 Service Worker 的1501 人浏览
-
xiaozhi
-
13.揭秘变量提升
为了保证可读性，本文采用意译而非直译。引用 ES6 规范作者 Allen Wirfs-Brock一条最近的推特：变量提升是一个陈旧且令人困惑的术语。甚至在 ES6之前：变量提升的意思究竟是“提升至当前作用域顶部”还是“从嵌套的代码块中提升到最近的函数或脚本作用域中”？还是两者都有？受 Allen 启发，本文提出了一种不同的方法来描述变量声明。1. 声明：作用域与激活可以将声明分为两个方面：作用域：1490 人浏览
-
hangge
-
SpringBoot - 自定义启动Banner（附：使用艺术字体）
我们知道Spring Boot项目启动时会在控制台打印出一个banner，下面演示如何定制这个banner。1，修改 banner 文字（1）首先在resources目录下创建一个banner.txt文件。（2）在这个文件中写入的文本将在项目启动时打印出来。比如我写入如下内容：12345-----------------------welcome to hangge.com------------1484 人浏览
-
web
-
XML中的转义字符
HTML中的转义字符 HTML中<, >，&等有特别含义，(前两个字符用于链接签，&用于转义)，不能直接使用。使用这三个字符时，应使用他们的转义序列，如下所示：& 或 &&和< 或 <<小于号> 或 >>大于号""双引号空格©©版权符®1464 人浏览
-
xiaozhi
-
7.JavaScript是如何工作的:Web Workers的构建块+ 5个使用他们的场景
这次我们会逐步讲解Web Workers，先说个简单的概念，接着讨论不同类型的Web Workers，他们的组成部分是如何一起工作的，以及不同场景下它们各自优势和限制。最后，提供5个正确使用Web Workers的场景。正如我们前面文章讨论的那样，你应该知道 JavaScript 语言采用的是单线程模型。然而，JavaScript 也为开发人员提供了编写异步代码的机会。异步编程的局限性以前的文章讨1454 人浏览
-
xiaozhi
-
27.如何使用useReducer Hook
看到“reducer”这个词，容易让人联想到Redux，但是在本文中，不必先理解Redux才能阅读这篇文章。咱们将一起讨论“reducer”实际上是什么，以及如何利用useReducer来管理组件中的复杂状态，以及这个新钩子对Redux意味着什么？Reducer 是什么鬼如果你熟悉Redux或数组上中的reduce方法，你大概就知道“reducer”是什么。 如果不熟悉，“reducer”大概是一1454 人浏览
-
xiaozhi
-
23.关于css margin，你需要知道的一切
原文：https://www.smashingmagazine.com/2019/07/margins-in-css/译者：前端小智为了保证的可读性，本文采用意译而非直译。当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。CSS1中描述了margi1453 人浏览
-
xiaozhi
-
4.React 新特性讲解及实例(一)
本节主要讲解以下几个新的特性：ContextContextTypelazySuspense错误边界（Error boundaries）momoContext定义：Context 提供了一种方式，能够让数据在组件树中传递而不必一级一级手动传递。这定义读的有点晦涩，来看张图：假设有如上的组件层级关系，如果最底层的Item组件，需要最顶层的Window组件中的变量，那我们只能一层一层的传递下去。非常的繁1446 人浏览
-
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.1441 人浏览
-
xiaozhi
-
4.Web 性能优化：21种优化CSS和加快网站速度的方法
CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小型 web 项目，CSS通常只占总资源消耗的一小部分。框架打破了这种平衡。包括一个 JavaScript GUI 堆栈，如 jQuery UI，可以观察 CSS, JS 和 HTML大小逐渐的变大。通1440 人浏览
-
xiaozhi
-
9. 10个流行的JavaScript面试题
译者：前端小智原文：https://medium.com/@jlanne119/10-popular-interview-questions-of-javascript-for-front-end-developers-973c2052892e为了保证可读性，本文采用意译而非直译想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！1.如何理解 JS 中的this关键字？JS 初学者1425 人浏览
-
xiaozhi
-
11.JavaScript是如何工作的:渲染引擎和优化其性能的技巧
当你构建 Web 应用程序时，你不只是编写单独运行的 JavaScript 代码，你编写的 JavaScript 正在与环境进行交互。了解这种环境，它的工作原理以及它的组，这些有助于你够构建更好的应用程序，并为应用程序发布后可能出现的潜在问题做好充分准备。浏览器的主要组件包括：用户界面 (User interface)：包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页1424 人浏览
-
xiaozhi
-
28.JavaScript 如何创建、读取和删除cookie
Cookie为 Web 应用程序保存用户相关信息提供了一种有用的方法。例如，当用户访问咱们的站点时，可以利用Cookie保存用户首选项或其他信息，这样，当用户下次再访问咱们的站点时，应用程序就可以检索以前保存的信息。Cookie 是什么鬼Cookie是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时，Web 应用程序都可以读取 Cookie 包含的信息。C1416 人浏览
-
xiaozhi
-
5.Web 性能优化：理解及使用 JavaScript 缓存
随着我们的应用程序的不断增长并开始进行复杂的计算时，对速度的需求越来越高（????️），所以流程的优化变得必不可少。 当我们忽略这个问题时，我们最终的程序需要花费大量时间并在执行期间消耗大量的系统资源。缓存是一种优化技术，通过存储开销大的函数执行的结果，并在相同的输入再次出现时返回已缓存的结果，从而加快应用程序的速度。如果这对你没有多大意义，那没关系。 本文深入解释了为什么需要进行缓存，缓存是什么，如何1412 人浏览
-
xiaozhi
-
34.JS 如何创建、读取和删除cookie
Cookie为 Web 应用程序保存用户相关信息提供了一种有用的方法。例如，当用户访问咱们的站点时，可以利用Cookie保存用户首选项或其他信息，这样，当用户下次再访问咱们的站点时，应用程序就可以检索以前保存的信息。Cookie 是什么鬼Cookie是一小段文本信息，伴随着用户请求和页面在 Web 服务器和浏览器之间传递。用户每次访问站点时，Web 应用程序都可以读取 Cookie 包含的信息。C1410 人浏览