你我学习网
你我博客
热衷分享技术，专注打造技术影响力的视频博客系统
-
web
-
HTML5 CSS3专题 纯CSS打造相册效果
转载请标明出处：http://blog.csdn.NET/lmj623565791/article/details/...今天偶然发现电脑里面还有这样的一个例子，感觉效果还不错，不记得啥时候下载的了，也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。效果图：效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。先看html文件：<body> <di2583 人浏览
-
xiaozhi
-
7.React 新特性 Hooks 讲解及实例(四)
使用 Ref Hooks类组件中使用 Ref 一般有：String RefCallback RefCreateRef上述在函数组件中没有办法使用它们，取而代之的是useRefHooks。useRef主要有两个使用场景：获取子组件或者 DOM 节点的句柄渲染周期之间的共享数据的存储大家可能会想到 state 也可跨越渲染周期保存，但是state的赋值会触发重渲染，但是ref不会，从这点看 ref 更2578 人浏览
-
xiaozhi
-
33.JS中，如何提高展开运算符的性能
本文主要讲解怎么提高展开运算的性能，在此之前先简单说说展开运算在数组中的工作原理。展开运算符或三个点，接受一个数组数组或通常是可迭代的[... arrayOrIterable]并将数组元素分解，并使用这些分解部分构造一个新数组。展开运算符可以放在数组中的任何位置：constnumbers=[1,2,3]; [0,...numbers];//=>[0,1,2,3] [0,...number2570 人浏览
-
xiaozhi
-
5.React 新特性 Hooks 讲解及实例(二)
什么是 HooksHook 是 React 16.8 的新增特性。它可以让你在不编写类组件的情况下使用state以及其他的React特性。类组件的不足状态逻辑复用难缺少复用机制渲染属性和高阶组件导致层级冗余趋向复杂难以维护生命周期函数混杂不相干逻辑相干逻辑分散在不同生命周期this 指向困扰内联函数过度创建新句柄类成员函数不能保证thisHooks 优势优化类组件的三大问题函数组件无 this 问2565 人浏览
-
xiaozhi
-
30.JS可选链的好处
JS的一些特性极大地改变了咱们的编码方式。从ES6年开始，对咱们代码影响最大的特性的解 、箭头函数、类和模块系统。到2019年8月，一个新的可选链提案已经进入第三阶段，这是一个很好的改进。可选链接改变了从深层对象结构访问属性的方式。来看看这是又是什么骚操作。这个礼拜《大迁世界》有抽奖活动，奖品：专栏 《左耳听风》 x3, 技术书 x5,欢迎关注回复：抽奖问题由于JS的动态特性，对象可以具有多层不同2545 人浏览
-
hangge
-
K8s - 免费的Kubernetes在线实验平台介绍2（官网提供的在线系统）
kubernetes（简称K8s）是一个开源的，用于管理云平台中多个主机上的容器化的应用。 在之前的文章中，我介绍如何通过Docker为我们提供的实验网站Play with Kubernetes（PWK）来搭建Kubernetes集群（点击查看）。 但如果每次学习时都需要重新搭建一个K8s集群还是很麻烦。好在Kubernetes官网已经为我们准备好了现成的最小可用系统。我们通过Web浏览器就可2543 人浏览
-
web
-
rem是什么，如何使用
使用rem很长时间了，一直想好好总结一下，迟迟没有写，太懒大家都懂。。。 当然还有一个原因不会写总结。在总结rem之前先说一下，之前是怎么解决移动端布局的。百分比布局宽度还好说 屏幕宽度100%，各个板块按照计算的比例各种xx%但是高度就不行了没有参照物，图片还好说，背景图、字体大小就呵呵了。只能做到大概。固宽320px这种方案简单粗爆，以px为单位该是多少就是多少。但是当手机分辨率越高，两边留白2539 人浏览
-
xiaozhi
-
6.Web 性能优化：Preload,Prefetch的使用及在 Chrome 中的优先级
今天，我们将深入研究Chrome 的网络栈，以明确 web 加载原语(如<link rel= preload >&<link rel= prefetch >) 背后的工作原理，以便你能够更有效地使用它们。如其他文章所述，preload是一个声明式fetch，可以强制浏览器在不阻塞document的onload事件的情况下请求资源。Prefetch告诉浏览器这个资源将2536 人浏览
-
xiaozhi
-
26.Promise 中的三兄弟 .all(), .race(), .allSettled()
作者：Dr. Axel Rauschmayer译者：前端小智来源:2ality为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！从ES6 开始，我们大都使用的是Promise.all()和Promise.race()，Promise.allSettled()提案已经到第4阶段，因此将会成为ECMAScript 2020的一部分。1.概述Pr2525 人浏览
-
xiaozhi
-
20.任务，微任务、队列和时间表
原文：https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/译者：前端小智为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！思考下面 JavaScript 代码：console.log('scriptstart'); setTimeou2492 人浏览
-
web
-
input只允许上传图片类型文件
指定只允许选择图片accept="image/*"例如：<input type="file" name="file" class="element" accept="image/*">但是：这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题，可能要等 6~10s 才能弹出文件选择对话框。简直不能忍呀。解决方法：确切指定类型例如：<input typ2491 人浏览
-
web
-
从Vue.js源码角度再看数据绑定
写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。 文章的原地址：https://github.com/answershuto/learnVue。 在学习过程中，为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src，希2481 人浏览
-
xiaozhi
-
21.JavaScript 是如何工作的：JavaScript 的内存模型
//声明一些变量并初始化它们 vara=5 letb='xy' constc=true //分配新值 a=6 b=b+'z' c=false//类型错误:不可对常量赋值作为程序员，声明变量、初始化变量(或不初始化变量)以及稍后为它们分配新值是我们每天都要做的事情。但是当这样做的时候会发生什么呢? JavaScript 如何在内部处理这些基本功能?2478 人浏览
-
xiaozhi
-
9. 4 个 useState Hook 示例
为了保证的可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！到 React 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。编写class Thing extends React.Component，将函数体复制到render()方法中，修复缩进，最后添加需要的状态。今天，可以使用 Hook 获得相同的2476 人浏览
-
xiaozhi
-
19.JavaScript 是如何工作的：编写自己的 Web 开发框架 + React 及其虚拟 DOM 原理
响应式原理Proxy 允许我们创建一个对象的虚拟代理（替代对象），并为我们提供了在访问或修改原始对象时，可以进行拦截的处理方法（handler），如 set()、get() 和 deleteProperty() 等等，这样我们就可以避免很常见的这两种限制(vue 中)：添加新的响应性属性要使用 Vue.$set()，删除现有的响应性属性要使用数组的更新检测Proxyletproxy=newProx2475 人浏览
-
hangge
-
SpringBoot - 自定义启动Banner（附：使用艺术字体）
我们知道Spring Boot项目启动时会在控制台打印出一个banner，下面演示如何定制这个banner。1，修改 banner 文字（1）首先在resources目录下创建一个banner.txt文件。（2）在这个文件中写入的文本将在项目启动时打印出来。比如我写入如下内容：12345-----------------------welcome to hangge.com------------2463 人浏览
-
web
-
Html5 Css3实现VCD包装盒个性幻灯片
转载请标明出处：http://blog.csdn.NET/lmj623565791/article/details/...哈，首先感谢下w3cfuns的老师，嗯~好了，这次给发夹分享一个CSS3+JavaScript VCD包装盒个性幻灯片的一个案例。效果图：图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。先看下html：<!DOCTYPE HTML PUBLIC "-/2463 人浏览
-
xiaozhi
-
24.JavaScript中轻松遍历对象属性的几种方式
自身可枚举属性Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。这是合理的，因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键：letsimpleColors={2444 人浏览
-
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=22434 人浏览
-
web
-
html5和css3实现绚丽动画-诱人的实例 3D旋转木马效果相册
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/32964301首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客 ），对前台感兴趣的可以没事去看看他的博客，很给力~这篇博客的目的是因为上篇HTML5 CSS3专2434 人浏览