前端
文章平均质量分 63
不知名网友小H
vinchin
展开
-
【React全解6】useReducer的使用详解和代替Redux
目录前言useReducer使用useReducer写一个表单提交的案例使用useReducer代替Redux一、前言前面已经介绍了useState 的详细用法,我们可以在函数组件和类组件中使用 useState 来创建变量和对象。使得页面能够及时的更新 UI 等等。接下来介绍一个 useState 的复杂版本–useReducer二、useReduceruseReducer 是 useState 的升级版本,用来践行 Flux/Redux 的思想它主要有两个参数,一个读接口 s原创 2020-12-21 11:05:31 · 3551 阅读 · 0 评论 -
【React全解5】useRef和createContext/useContext详解
目录前言React.useRefReact.createContext/useContext总结一、前言在原先的文章中,我们知道了 React 的 state 里的变量的值,只要变量的值发生变化更新了一次,那么就会产生新的变量来等于新的值。那么在 React 中,我们如何能像 Vue 一样,使用和改变一个变量贯穿始终呢?有,这两个就是useRef和useContext二、React.useRefconst n=React.useRef(初始值)如何表示 n 的值:n.curr原创 2020-12-18 08:32:03 · 1302 阅读 · 1 评论 -
【React全解4】useEffect--在函数组件中使用生命周期函数
目录函数组件面临的问题useEffect模拟函数组件的生命周期函数其他生命周期函数一、函数组件面临的问题函数组件好是好,但是它有缺点。对比类组件,它没有state和生命周期函数。这样一来,许多细化的功能那不就不能使用函数组件了吗?事实上并不是这样的,我们也可以使用 React 官方提供的 API 来模拟代替以上两个问题,接下来待我娓娓道来。1、没有 stateReact V 16.8.0 推出的 Hooks API,其中 React.useState 可以解决问题。详见:【R原创 2020-12-15 15:00:31 · 14708 阅读 · 1 评论 -
css画皮卡丘
目录前言效果预览素材来源踩坑记录+技巧总结(MVC)源码奉上一、前言学习前端有一段时间了,最近复习了一下 CSS,还有 MVC 模式。发现还是有很多不足的地方。想着,就简单的使用 CSS 画个东西吧。再简单的使用 MVC 实现一个播放器 player不知道有没有机会做你的皮卡丘,举高高,要抱抱~这才是猛男该看的东西(doge)二、效果预览Gitee 预览温馨提示:点击皮卡丘的鼻子可以动的PC 端手机端三、素材来源CodePen搜索 pikachu原创 2020-12-14 16:28:00 · 510 阅读 · 1 评论 -
【React全解2】React生命周期函数含义及使用
目录生命周期函数列表重要生命周期函数细解分阶段看钩子的执行顺序(图解)一、生命周期生命周期就是指一个对象的生老病死。在React中就特指一个组件的“生老病死”。二、函数列表constructor() – 初始化 state 等static getDerivedStateFromProps()shouldComponentUpdate()&React.PureComponent – 是否进行更新render() – 创建虚拟 DOMgetSnapshotBefo原创 2020-12-14 15:31:04 · 239 阅读 · 1 评论 -
【React全解1】React组件、props、state&setState
目录组件简介类组件函数组件props(外部数据)和state(内部数据)&setState复杂state一、组件简介组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。组件就是用于组合的物件。在编程中,组件的作用就是使代码具有模块化的意义,能让代码有更好的可读性和维护性。在React中,定义组件有两种方式,函数组件和类组件,不成文的规定:组件首字母大写,元素首字母小写二、类组件原创 2020-12-14 15:27:21 · 476 阅读 · 0 评论 -
【React全解3】React.useState原理详解,一次性搞懂useState
目录useState简介useState的简单使用手写实现useState总结参考一、useState 简介返回一个有状态值和一个函数来更新它。在初始渲染期间,返回的状态(状态)与作为第一个参数(initialState)传递的值相同。setState 函数用于更新状态。它接受一个新的状态值,并排队等待重新渲染该组件。在后续重新渲染期间,useState 返回的第一个值将始终是应用更新后的最新状态。注意: React 保证 setState 函数身份是稳定的,并且在重新渲染时原创 2020-12-14 15:19:42 · 14854 阅读 · 4 评论 -
函数防抖和函数节流
目录函数防抖函数节流一、函数防抖在前端开发中,我们经常需要绑定一些持续触发的事件,如resize、mousemove等。但是我们并不是想在事件持续触发时去频繁的触发函数,而是有一个特定的时机来触发函数。函数防抖就是来解决这样的问题,生活中的例子:电梯,在电梯门打开之后,每一次有人进来,电梯都会进行重新的计时。而电梯关门的时候就是我们真正触发了一整个事件的流程的结束的特定的时机。函数防抖:触发事件的后 n 秒才执行函数,若在这 n 秒之内又触发了事件,则会重新计算执行时间。手原创 2020-12-12 21:53:51 · 90 阅读 · 0 评论 -
【CSS三种居中方案全解】CSS水平垂直居中常用方法集结
目录前言CSS水平垂直居中参考资料系列文章CSS 水平居中CSS 垂直居中一、前言难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有道理,以下内容全是个人搜集整理,参考资料放在最后。居中的方案只是为了实现居中,不代表每个方案都是最好的解决办法,因为有些方案还是很离谱的,一般用不上。希望能帮助到你们。话不多 BB,直接上才艺(代码演示)tips:内容挺多的,顺着标题找吧二、CSS 水平原创 2020-12-09 13:38:25 · 333 阅读 · 0 评论 -
【CSS三种居中方案全解】CSS垂直居中常用方法集结
目录前言CSS垂直居中参考资料系列文章CSS 水平居中CSS 水平垂直居中一、前言难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有道理,以下内容全是个人搜集整理,参考资料放在最后。居中的方案只是为了实现居中,不代表每个方案都是最好的解决办法,因为有些方案还是很离谱的,一般用不上。希望能帮助到你们。话不多 BB,直接上才艺(代码演示)tips:内容挺多的,顺着标题找吧二、CSS 垂直原创 2020-12-09 13:38:08 · 279 阅读 · 2 评论 -
【CSS三种居中方案全解】CSS水平居中常用方法集结
目录前言CSS水平居中参考资料CSS 居中系列文章CSS 垂直居中CSS 水平垂直居中一、前言难得搜索整理一番 CSS 垂直居中,水平居中,水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺,又能提升知识增长见识。CSS 本身就没有道理,以下内容全是个人搜集整理,参考资料放在最后。居中的方案只是为了实现居中,不代表每个方案都是最好的解决办法,因为有些方案还是很离谱的,一般用不上。希望能帮助到你们。话不多 BB,直接上才艺(代码演示)tips:内容挺多的,顺着标题找吧二、原创 2020-12-09 13:37:51 · 1006 阅读 · 0 评论 -
【CSS盒模型】CSS两种盒模型
目录CSS盒模型盒模型的组成两种盒模型总结参考资料一、CSS 盒模型当对一个文档进行布局(lay out)的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。CSS 决定这些盒子的大小、位置以及属性(例如颜色、背景、边框尺寸…)。其实 HTML 都可以看做是盒子模型,只需要使用 CSS 控制就行了二、盒模型的组成一个盒子由 4 个部分组成:margin+border+paddi原创 2020-12-07 22:27:16 · 231 阅读 · 0 评论 -
【BFC--块格式化上下文】看完这篇文章,你真的还没理解BFC吗?
目录BFC是什么?创建BFC的条件BFC功能/特性与清除浮动的关系参考资料一、BFC 是什么?块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。人话:CSS 不正交,这个 BFC 可以创建一个独立的区域进行布局。如一个父盒子创建了 BFC,那么里面的子元素无论如何也逃不出父盒子的限制,它只能在父盒子里面折腾。二、创建 BFC 的条件根元素或原创 2020-12-07 15:25:26 · 95 阅读 · 0 评论 -
【Promise与异步】理解并使用Promise
目录异步回调异步与回调的关系如何判断异步Promise一、异步不能直接拿到结果,如setTimeout,要等到定好的事件之后才能拿到结果。二、回调写好一个函数却不立即使用,而是给别人调用的函数。回调举例在以下的例子中,f1就是回调function f1(value) { console.log("我是f1:" + value);}function f2(fn) { fn("我是f2,调用了f1");}f2(f1);三、异步与回调的关系关联原创 2020-12-03 09:03:07 · 154 阅读 · 0 评论 -
【React全解0】React起步+JSX语法
目录React简介引入React的方式JSX语法控制语句React初体验--实现+1功能一、React简介React 是一个用于构建用户界面的 JavaScript 库。个人而言,对比Vue。React注重函数式和类的编程,对JS基础要求较高,它只是为我们提供一些有用的API。Vue则不同,自己封装了各种各样的自己的东西。对新手十分友好,而且能快速上手,十分易懂。Vue:能做的都帮你做了,只要学会Vue即可。React:能不做的都不帮你做,它在促使我们思考函数的本质。写Re原创 2020-11-10 10:34:08 · 182 阅读 · 0 评论 -
【Vue版记账项目总结】Vue、Vuex、VueRouter、JS/TS、svg、css/scss实战总结
目录项目介绍项目前的准备及项目构思模块化封装通用组件@语法导入相关文件CSS的变种形式Vue中CSS的deep选择器Vue中CSS类名的表驱动编程使用VueRouter的active-class动态添加类名使用svg-sprite-loader引入icon与封装icon组件JavaSript组件TypeScript组件custom.d.ts怎么用Vue单文件组件的三种写法Layout组件&插槽<slot>使用VueRouter在TS组件里使用mixin原创 2020-11-06 18:47:13 · 1071 阅读 · 0 评论 -
【Vue全解8】Vue表单输入绑定v-model
目录基本用法修饰符v-modelVue表单和v-model官方文档一、基本用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。1、 input代码示例(textarea也是一样的,只是标签不同而已)<原创 2020-10-26 14:47:17 · 387 阅读 · 0 评论 -
【Vue全解7】options之组合(mixin、extends、provide/inject)
目录mixin混入extends继承provide提供/inject注入一、mixin混入mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。1、作用混入就是复制减少data原创 2020-10-26 12:32:36 · 414 阅读 · 0 评论 -
【Vue全解6】options之资源(directive、filter、components)+修饰符
目录指令Directive自定义指令filtercomponents修饰符.sync修饰符一、指令Directive什么是指令?在Vue中,以v-开头的就是指令语法v-指令名:参数=值,如:v-on:click='add'如果值里无特殊符号,可以不加引号有些指令没有参数和值:如:v-pre有些指令没有值,如:v-on:click.prevent作用主要用于DOM操作:Vue实例/组件用于数据绑定、事件监听、DOM更新。Vue主要目的就是原生D原创 2020-10-25 17:13:42 · 713 阅读 · 0 评论 -
【Vue全解5】options之DOM(el、template、render)
目录eltemplaterender一、el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用 vm.$mount() 手动开启编译。代码演示示例import Vue from "vue/dist/vue.js";new Vue({ el:'#app',})或原创 2020-10-25 14:28:55 · 553 阅读 · 2 评论 -
【Vue全解4】option之生命周期钩子(created、mounted、updated、destroyed)
目录createdmountedupdateddestroyed一、created在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。import Vue from "vue/dist/vue.js";new Vue({ data:{ n:0 }, template:` <div>原创 2020-10-25 11:21:05 · 1349 阅读 · 0 评论 -
【Vue全解0】Vue实例
目录内存图option里面有什么颜色的表示重要程度一、内存图二、option里面有什么三、颜色的表示重要程度红色属性易学、必学黄色属性高级一点的属性,理解需要费点劲绿色属性自己看文档就会蓝色属性不常用,可学可不学紫色属性特殊属性,需要特别了解灰色属性很不常用,用到时看文档。...原创 2020-10-24 21:55:29 · 269 阅读 · 0 评论 -
【Vue全解3】Vue的data代理和数组响应式
目录数据响应式小实验getter/setterObject.defineProperty代理和监听小结:vue对data做了什么this.$set和Vue.set数组的变异方法小结:数组的变异方法议题:Vue对option的data做了什么?一、数据响应式响应式就是做某种刺激作出反应,而数据响应式就是对数据的改变作出响应。在Vue中,数据的响应就是意味着数据变化,Vue就会进行一次render()渲染。以此来更新UI界面。-- 个人理解Vue的数组响应式我如果修改原创 2020-10-24 15:50:16 · 1486 阅读 · 0 评论 -
【Vue全解2】Vue模板语法摘要
目录Vue模板语法template模板模板中的语法Vue模板的特点一、Vue模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱原创 2020-10-22 16:16:51 · 163 阅读 · 0 评论 -
【Vue全解1】构造选择options之data
【Vue全解】构造选项之options数据/data目录构造Vue实例options的数据/data一、构造Vue实例代码示例import vue from 'vue'; //假设导入了Vue完整版包const vm=new Vue(options); //创建一个vm为Vue的实例常见的写法new Vue({ data(){ //data有两种写法:对象 | 函数 return { n:100 } }, template:` <div cl原创 2020-10-21 11:07:15 · 867 阅读 · 0 评论 -
【Vue】完整版 VS 非完整版
【Vue】深入了解Vue完整版与非完整版目录术语完整版Vue非完整版Vue深入理解两个版本的区别引用出错的结果一、术语编译器:用来将模板字符串编译成为JavaScript渲染函数的代码运行时:用来创建Vue实例、渲染并处理虚拟DOM等的代码。基本就是除去编译器的其他一切。二、完整版完整版体积大(假设它占比100K),功能强,有编译器。vue.js包含注释信息,全部的代码![存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(10)(![在这里插入图片原创 2020-10-21 11:06:25 · 143 阅读 · 0 评论 -
【jQuery】浅析jQuery设计原理
jQuery封装原理技巧,你真的了解吗?目录jQuery有多牛XjQuery设计模式术语+命名风格链式风格浅析jQuery设计封装原理总结+github仓库代码一、jQuery有多牛X它是目前最长寿的库,2006年发布。它是世界上使用最广泛的库,全球80%的网站在用二、jQuery设计模式jQuery用到了那些设计模式?不用new的构造函数,这个模式没有专门的名字$(支持多个参数),这个模式叫做重载用闭包隐藏细节,这个模式没有专门的名字$.text()即可读原创 2020-10-19 12:43:26 · 255 阅读 · 0 评论 -
表驱动编程
表驱动编程目录什么是表驱动编程什么情况下使用表驱动编程代码演示总结一、什么是表驱动编程表驱动法,又称之为表驱动、表驱动方法。 “表”是几乎所有数据结构课本都要讨论的非常有用的数据结构。表驱动方法出于特定的目的来使用表,程序员们经常谈到“表驱动”方法,但是课本中却从未提到过什么是"表驱动"方法。表驱动方法是一种使你可以在表中查找信息,而不必用很多的逻辑语句(if或Case)来把它们找出来的方法。事实上,任何信息都可以通过表来挑选。在简单的情况下,逻辑语句往往更简单而且更直接。但随着逻辑链的原创 2020-10-18 14:28:54 · 2735 阅读 · 0 评论 -
Eventbus对象之间通信
eventBus实现对象之间通信目录什么是eventbus?一个简单的例子代码演示实例(使用jquery演示)一、什么是eventbus?我个人理解:eventbus 可以实现对象之间的通信,当数据或某些特性发生改变时,能自动监听事件作出一些改变。还有更多的内容可能我还没有拓宽。怎么实现通信呢?这里通过一个例子可以理解到其中的精髓。二、一个简单的例子add(){ data+=1; render(data);},minus(){ data-=1; render(data);原创 2020-10-17 16:43:16 · 679 阅读 · 0 评论 -
localStorage
localStorage定义只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。应注意,无论数据存储在 localStorage 还是 sessionStorage ,它们都特定原创 2020-10-16 22:44:25 · 435 阅读 · 0 评论 -
HTTP状态码及状态码对应的字符串大全
HTTP状态码目录状态码的作用各字段状态码解读信息响应成功响应重定向客户端响应服务端响应一、状态码的作用HTTP 响应状态代码指示特定HTTP请求是否成功完成。响应响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599)。状态代码由 section 10 of RFC 2616定义二、各字段状态码解读1xx信息性状态码,表示服务器已接收了客户的请求,客户端可继续发送请原创 2020-10-16 15:07:59 · 733 阅读 · 0 评论 -
【DOM事件】DOM事件及事件委托
目录点击事件?事件的捕获和冒泡addEventListener代码图解target VS currentTarget事件委托自定义事件三、点击事件以下引出一个讨论的问题 <div class='爷爷'> <div class='爸爸'> <div class='儿子'> 文字 </div> </div> </div> <script> /* 均添加点击事件 */原创 2020-10-15 19:37:48 · 225 阅读 · 2 评论 -
【硬核写DOM库】--简单封装DOM
封装DOM – 硬核写DOM库目录前言什么是封装术语常用功能自己手写DOM封装封装DOM的总结附上自己封装DOM库的github仓库一、前言【正文】记住一个事实:原生DOM]很难用!,如果你觉得DOM很傻,不要怀疑自己,相信自己的直觉!API的函数名和属性真的是长的不得了,本来我自己想简单写个原生DOM的博客,没想到就花了我好几个小时的时间去码字,真的是吐了,而且容易被这些函数名给绕晕!好了,废话就到这里了,接下来让我们进入正题吧!二、什么是封装举例一个电脑就是CPU、原创 2020-10-14 10:13:08 · 299 阅读 · 0 评论 -
JSON
JSON一、定义JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这原创 2020-10-13 12:03:34 · 80 阅读 · 0 评论 -
【原生DOM】DOM编程
DOM编程目录前置知识网页就是一棵DOM树JS如何操作这棵树DOM元素节点的增删改查DOM操作是跨线程的Property VS Attribute一、前置知识理解简单的JS语法JS的七种数据类型:number、string、bool、symbol、undefined、null、ObjectJS五个falsy值:''、undefined、null、0、NaN简单的CSS布局二、网页是一棵DOM树代码+图解 <!DOCTYPE html><htm原创 2020-10-13 10:38:45 · 214 阅读 · 0 评论 -
CSS布局--超详解版
CSS布局目录布局分类布局思路布局需要用到哪些属性float布局flex布局grid布局(二维平均布局一、布局分类固定宽度布局:一般宽度设置为960、1000、1024px不固定宽度布局:依靠文档流的原理来布局响应式布局:PC上一种布局样式,手机上又是另外一种布局样式二、布局思路从大到小(老手推荐)先定下大局完善每个部分的小布局从小到大(新人推荐)先完成小布局组合成大布局三、布局需要使用那些属性一图流四、float布局原创 2020-10-12 10:24:20 · 522 阅读 · 2 评论 -
JS对象基本用法
JS 对象基本用法目录对象增加对象的属性删除对象的属性修改对象的属性 + 隐藏属性查看对象的属性奇怪的属性名'name' in obj 和 obj.hasOwnProperty('name')区别一、对象定义1、无序的数据集合。2、键值对的集合。写法1、--- let obj = {'name':'jack','age':18};2、--- let obj = new Object({'name':'jack','age':18})细节键名是原创 2020-10-10 12:50:21 · 67 阅读 · 0 评论 -
JS基本语法
JS 基本语法目录表达式和语句标识符控制语句循环语句break、continuelabel一、表达式和语句表达式1+2 的表达式的值为 3add(1,2)表达式的值为函数的返回值console.log 表达式的值为函数本身console.log(3)的表达式的值为多少?坑1:console.log()函数的返回值为undefined,所以,console.log(3)表达式的值为undefined。只不过它打印的内容为3。原创 2020-10-09 20:05:17 · 214 阅读 · 0 评论 -
HTTP请求与响应--详解+代码
HTTP 请求与响应前置条件安装 node.js 8+理解 URL+IP+端口一、请求与响应模型[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oWcML38E-1601982829765)(./images/模型.png)]二、如何发请求?浏览器地址栏输入网址curl 命令三、如何做出响应?node.js 有一个 http 模块使用代码编程实现注意事项这些代码就是服务器代码,一般放在服务器上query 是查询参数的对象形式{a:原创 2020-10-06 19:15:07 · 234 阅读 · 0 评论 -
浅析URL
浅析 URL一、先从IP讲起1、什么是 IP?IP:Internet Protocal – 主要约定了两件事情:如何定位一台设备如何封装数据报文,以此来跟其他设备进行信息交换2、IP 分为内网和外网只要你在互联网中,你就拥有至少一个独特的IP3、路由器的功能路由器也被称作网关,现在的路由器都有两个 IP 分别就是内网和外网 IP。内网中的设备可以互相访问,但是不能直接访问外网。同样的,外网中的设备可以互相访问,但是不能直接访问你的内网。而实现两者互通的就是这个网关原创 2020-10-06 19:13:27 · 159 阅读 · 0 评论