Web开发( 右侧选择分类 )
xiaozhi

1.React高级组件精讲

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

input只允许上传图片类型文件

指定只允许选择图片accept="image/*"例如:<input type="file" name="file" class="element" accept="image/*">但是:这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s 才能弹出文件选择对话框。简直不能忍呀。解决方法:确切指定类型例如:<input typ
963 人浏览
xiaozhi

3.React造轮系列:Layout 组件思路

本文是React造轮系列第三篇。1.React 造轮子系列:Icon 组件思路2.React造轮系列:对话框组件 - Dialog 思路初始化 Layout参考 And Design ,Layout 组件分别分为Layout,Header,Aside,Content,Footer五个组件。基本使用结构如下:<Layout> <Header>header</Heade
960 人浏览
xiaozhi

5.React 新特性 Hooks 讲解及实例(二)

什么是 HooksHook 是 React 16.8 的新增特性。它可以让你在不编写类组件的情况下使用state以及其他的React特性。类组件的不足状态逻辑复用难缺少复用机制渲染属性和高阶组件导致层级冗余趋向复杂难以维护生命周期函数混杂不相干逻辑相干逻辑分散在不同生命周期this 指向困扰内联函数过度创建新句柄类成员函数不能保证thisHooks 优势优化类组件的三大问题函数组件无 this 问
957 人浏览
xiaozhi

6.Web 性能优化:Preload,Prefetch的使用及在 Chrome 中的优先级

今天,我们将深入研究Chrome 的网络栈,以明确 web 加载原语(如<link rel= preload >&<link rel= prefetch >) 背后的工作原理,以便你能够更有效地使用它们。如其他文章所述,preload是一个声明式fetch,可以强制浏览器在不阻塞document的onload事件的情况下请求资源。Prefetch告诉浏览器这个资源将
956 人浏览
hangge

JS - 使用正则表达式获取字符串里的部分内容(截取两个字符串之间内容

(1)有时我们需要从一个字符串中提取出需要的部分,这个借助正则表达式就可以很方便地实现。比如:从下面的字符串中根据key(冒号前面部分)获取对应的value(冒号后面的部分)1time:2019,status:open,count:3(2)为方便使用我们封装一个方法:123456// 从字符串中根据key获取对应的value值// 字符串格式:key1:value1,key2:value2,...
951 人浏览
xiaozhi

19.JS 中有趣的事实

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

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

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

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

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

27.如何使用useReducer Hook

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

19.JavaScript 是如何工作的:编写自己的 Web 开发框架 + React 及其虚拟 DOM 原理

响应式原理Proxy 允许我们创建一个对象的虚拟代理(替代对象),并为我们提供了在访问或修改原始对象时,可以进行拦截的处理方法(handler),如 set()、get() 和 deleteProperty() 等等,这样我们就可以避免很常见的这两种限制(vue 中):添加新的响应性属性要使用 Vue.$set(),删除现有的响应性属性要使用数组的更新检测Proxyletproxy=newProx
925 人浏览
hangge

SpringBoot - 自定义启动Banner(附:使用艺术字体)

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

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

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

9. 4 个 useState Hook 示例

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

20.JavaScript 是如何工作的:模块的构建以及对应的打包工具

如果你是 JavaScript 的新手,一些像 “module bundlers vs module loaders”、“Webpack vs Browserify” 和 “AMD vs.CommonJS” 这样的术语,很快让你不堪重负。JavaScript 模块系统可能令人生畏,但理解它对 Web 开发人员至关重要。在这篇文章中,我将以简单的言语(以及一些代码示例)为你解释这些术语。 希望这对你
910 人浏览
xiaozhi

26.ES新提案:双问号操作符

本文主要讲Gabriel Isenberg撰写的ES提案“Nullish coalescing for JavaScript”。 它提出??替换||的运算符,并提供默认值。这里先把这相提案叫作双问号操作符,如果你有好的叫法,欢迎留言讨论。1.概述双问号??的操作符跟||类似,如果给定变量值为null或者undefined,刚使用双问号后的默认值,否则使用该变量值。如下:>undefined?
904 人浏览
hangge

K8s - 免费的Kubernetes在线实验平台介绍2(官网提供的在线系统)

kubernetes(简称K8s)是一个开源的,用于管理云平台中多个主机上的容器化的应用。 在之前的文章中,我介绍如何通过Docker为我们提供的实验网站Play with Kubernetes(PWK)来搭建Kubernetes集群(点击查看)。 但如果每次学习时都需要重新搭建一个K8s集群还是很麻烦。好在Kubernetes官网已经为我们准备好了现成的最小可用系统。我们通过Web浏览器就可
900 人浏览
xiaozhi

6.React 新特性 Hooks 讲解及实例(三)

使用 Context Hooks使用 Context ,首先顶层先声明Provier组件,并声明value属性,接着在后代组件中声明Consumer组件,这个Consumer子组件,只能是唯一的一个函数,函数参数即是Context的负载。如果有多个Context,Provider和Consumer任意的顺序嵌套即可。此外我们还可以针对任意一个Context使用contextType来简化对这个Co
898 人浏览
xiaozhi

25.JavaScript中函数式编程基本原理简介

原文:https://medium.com/better-programming/introduction-to-the-basic-principles-of-functional-programming-in-javascript-6849ae196326译者:前端小智为了保证的可读性,本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!在长时间学习和使用
894 人浏览
xiaozhi

29.5个 JS 解构有趣的用途

1. 交换变量通常交换两个变量的方法需要一个额外的临时变量,来看看例子:leta=1; letb=2; lettemp; temp=a; a=b; b=temp; a;//=>2 b;//=>1temp是一个临时变量,它先保存a的值。然后把b的值赋值给a,接着将temp值赋给b。如果使用解构的方式会更简单,不需要什么鬼的temp变量。leta=1; letb=2
892 人浏览