- 博客(94)
- 收藏
- 关注
RSS订阅
原创 react+redux实战——redux到底是个啥子？
写在前面文章是个人初学redux的分享，从redux基础知识点到使用redux搭建简单的表单提交项目。项目代码地址：https://github.com/jishuaizhen/react-redux-simple-project.git项目学习视频:https://ke.qq.com/course/368915一、redux到底是个啥子？1.redux和vuex具有类似的作用，为了方便...
2019-04-26 21:07:23
718
7
原创 react-route配合豆瓣api实现电影分类小项目
写在前面本项目使用豆瓣的api和react的路由跳转功能实现页面的基本切换：1.可能因为豆瓣图片防盗链的关系，图片不显示；2.项目使用antd组件库进行项目页面的布局；3.在解决跨域方面使用fetch-jsonp工具这篇博客我记录下自己的每一步操作，主要为了巩固知识点，不准确的地方请留言指出，不足之处请谅解。项目代码地址：https://github.com/jishuaizhen/reac...
2019-04-25 19:32:51
1049
2
原创 【TypeScript】掌握 TypeScript 这些官方工具类型
在 TypeScript 中提供了许多自带的工具类型，因为这些类型都是全局可用的，所以无须导入即可直接使用。了解了基础的工具类型后，我们不仅知道 TypeScript 如何利用前几讲介绍的基础类型知识实现这些工具类型，还知道如何更好地利用这些基础类型，以免重复造轮子，并能通过这些工具类型实现更复杂的类型。学习操作接口类型、联合类型、函数、字符串的工具类。掌握类型操作的技巧，自由地组合更多的工具类型。
2022-08-20 10:37:06
689
2
原创 【TypeScript】增强类型系统的必备方式
在 TypeScript 中预留了一个增强类型的口子，使得我们可以方便地扩展原来的类型系统，以兼容 JavaScript 的代码。增强类型系统，顾名思义就是对 TypeScript 类型系统的增强。在 npm 中，有很多历史悠久的库都是使用 JavaScript 编写的，而 TypeScript 作为 JavaScript 的超集，设计目标之一就是能在 TypeScript 中安全、方便地使用 JavaScript 库。
2022-08-19 12:05:17
542
原创 【TypeScript】类型兼容：如何判断一个类型是否可以赋值给其他类型？
TypeScript 中类型的兼容性都是基于结构化子类型的一般原则进行判定的。类型兼容性决定了赋值操作是否可以通过类型检测。
2022-08-18 17:10:17
562
原创 【TypeScript】类型守卫：如何有效地保障类型的安全性？
JavaScript 作为一种动态语言，意味着其中的参数、值可以是多态（多种类型）。因此，我们需要区别对待每一种状态，以此确保对参数、值的操作合法。举一个常见的场景为例，如下我们定义了一个可以接收字符串或者字符串数组的参数 toUpperCase，并将参数转成大写格式输出的函数 convertToUpperCase。{}}}...
2022-08-17 16:02:37
315
原创 【TypeScript】泛型：如何正确使用泛型约束类型变量？
关于什么是泛型这个问题不是太好回答，比如在面试中，如果有候选人反过来问我这个问题，可能我也给不出一个特别标准的答案。不过，我们可以借用 Java 中泛型的释义来回答这个问题：泛型指的是类型参数化，即将原来某种具体的类型进行参数化。和定义函数参数一样，我们可以给泛型定义若干个类型参数，并在调用时给泛型传入明确的类型参数。设计泛型的目的在于有效约束类型成员之间的关系，比如函数参数和返回值、类或者接口成员和方法之间的关系。这一讲关于泛型的知识点看起来不是太多，不过难点在于如何理解泛型。...
2022-08-15 11:58:45
291
原创 【TypeScript】枚举类型：详解常见枚举类型的 7 种用法
在 JavaScript 原生语言中并没有与枚举匹配的概念，而 TypeScript 中实现了枚举类型（Enums），这就意味着枚举也是 TypeScript 特有的语法（相对于 JavaScript）。在 TypeScript 中，我们可以使用枚举定义包含被命名的常量的集合，比如 TypeScript 支持数字、字符两种常量值的枚举类型。我们也可以使用 enum 关键字定义枚举类型，格式是 enum + 枚举名字 + 一对花括弧，花括弧里则是被命名了的常量成员。...
2022-08-12 10:58:29
2238
原创 【TypeScript】高级类型：如何快速读懂联合类型和交叉类型的含义？
我们介绍了基础类型、字面量类型、函数类型及接口类型等内容，它们都是单一、原子的类型元素。实际编程场景的示例所示，我们还需要通过组合/结合单一、原子类型构造更复杂的类型，以此描述更复杂的数据和结构——联合和交叉类型（Unions and Intersection Types）。联合和交叉类型赋予了 TypeScript 类型最基本的“编程”（运算）能力，学习和掌握联合和交叉类型后，可以培养我们抽离、复用公共类型的意识和能力。...
2022-08-11 15:46:35
263
原创 【TypeScript】接口类型与类型别名：这两者的用法与区别分别是什么？
TypeScript 不仅能帮助前端改变思维方式，还能强化面向接口编程的思维和能力，而这正是得益于 Interface 接口类型。通过接口类型，我们可以清晰地定义模块内、跨模块、跨项目代码的通信规则。TypeScript 对对象的类型检测遵循一种被称之为“鸭子类型”（duck typing）或者“结构化类型（structural subtyping）”的准则，即只要两个对象的结构一致，属性和方法的类型一致，则它们的类型就是一致的。...
2022-08-10 10:35:26
445
原创 【TypeScript】类类型：如何高效使用类型化的面向对象编程利器？
在JavaScript（ES5）中仅支持通过函数和原型链继承模拟类的实现（用于抽象业务模型、组织数据结构并创建可重用组件），自 ES6 引入 class 关键字后，它才开始支持使用与Java类似的语法定义声明类。TypeScript 作为 JavaScript 的超集，自然也支持 class 的全部特性，并且还可以对类的属性、方法等进行静态类型检测。在 TypeScript 中，因为我们需要实践 OOP 编程思想，所以离不开类的支撑。在实际工作中，类与函数一样，都是极其有用的抽象、封装利器。...
2022-08-09 11:03:26
323
原创 【TypeScript】函数类型：返回值类型和参数类型到底如何定义？
在 JavaScript 中，函数是构建应用的一块基石，我们可以使用函数抽离可复用的逻辑、抽象模型、封装过程。在 TypeScript 中，虽然有类、命名空间、模块，但是函数同样是最基本、最重要的元素之一。我们还可以显式指定函数参数和返回值的类型，示例如下。}函数是 JavaScript 和 TypeScript 中极其重要的基础部分，无论是面向过程，还是面向对象编程，都离不开函数的抽象、封装。...
2022-08-08 10:38:33
975
原创 【TypeScript】什么是字面量类型、类型推断、类型拓宽和类型缩小？
}{}在示例中，使用 let 定义变量时，我们写明类型注解也就罢了，毕竟值可能会被改变。可是，使用 const 常量时还需要写明类型注解，那可真的很麻烦。实际上，TypeScript 早就考虑到了这么简单而明显的问题。在很多情况下，TypeScript 会根据上下文环境自动推断出变量的类型，无须我们再写明类型注解。{// 等价// 等价// 等价}{// 不等价// 不等价// 不等价}...
2022-08-05 12:10:04
193
原创 【TypeScript】TypeScript 与 JavaScript 有何不同？
TypeScript 其实就是类型化的 JavaScript，它不仅支持 JavaScript 的所有特性，还在 JavaScript 的基础上添加了静态类型注解扩展。从某种意义上来说，TypeScript 其实就是 JavaScript 的超集。在 TypeScript 中，我们不仅可以轻易复用 JavaScript 的代码、最新特性，还能使用可选的静态类型进行检查报错，使得编写的代码更健壮、更易于维护。......
2022-08-04 10:38:19
382
原创 【TypeScript】为什么要选择 TypeScript？
TypeScript 与 JavaScript 本质并无区别，你可以将 TypeScipt 理解为是一个添加了类型注解的 JavaScript，比如 const num = 1，它同时符合 TypeScript 和 JavaScript 的语法。此外，TypeScript 是一门中间语言，最终它还需要转译为纯 JavaScript，再交给各种终端解释、执行。...
2022-08-03 09:52:26
203
原创 【Vue.js 3.0源码】Vue Router：如何实现一个前端路由？
相信对有一定基础的前端开发工程师来说，路由并不陌生，它最初源于服务端，在服务端中路由描述的是URL与处理函数之间的映射关系。而在Web前端单页应用SPA中，路由描述的是URL与视图之间的映射关系，这种映射是单向的，即URL变化会引起视图的更新。相比于后端路由，前端路由的好处是无须刷新页面，减轻了服务器的压力，提升了用户体验。目前主流支持单页应用的前端框架，基本都有配套的或第三方的路由系统。......
2022-08-02 09:53:14
948
原创 【Vue.js 3.0源码】Transition 组件：过渡动画的实现原理是怎样的？
作为一名前端开发工程师，平时开发页面少不了要写一些过渡动画，通常可以用CSS脚本来实现，当然一些时候也会使用JavaScript操作DOM来实现动画。那么，如果我们使用Vue.js技术栈，有没有好的实现动画的方式呢？Vue.js提供了内置的Transition组件，它可以让我们轻松实现动画过渡效果。Transition组件是如何渲染的，如何执行过渡动画和相应的钩子函数的，以及当两个视图切换时，模式的工作原理是怎样的。...
2022-08-01 10:55:46
952
原创 【Vue.js 3.0源码】KeepAlive 组件：如何让组件在内存中缓存和调度？
当flag为true的时候，就会触发组件A的渲染，然后我们点击按钮把flag修改为false，又会触发组件A的卸载，及组件B的渲染。?0})1}),onClick_ctx.flag)}我们使用了KeepAlive组件对这两个组件做了一层封装，KeepAlive是一个抽象组件，它并不会渲染成一个真实的DOM，只会渲染内部包裹的子节点，并且让内部的子组件在切换的时候，不会走一整套递归卸载和挂载DOM的流程，从而优化了性能。nametrue,true,?}...
2022-07-29 11:28:39
548
原创 【Vue.js 3.0源码】Teleport 组件：如何脱离当前组件渲染子组件？
Vue.js的核心思想之一是组件化，组件就是DOM的映射，我们通过嵌套的组件构成了一个组件应用程序的树。但是，有些时候组件模板的一部分在逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到应用程序之外的其他位置。一个常见的场景是创建一个包含全屏模式的对话框组件。在大多数情况下，我们希望对话框的逻辑存在于组件中，但是对话框的定位CSS是一个很大的问题，它非常容易受到外层父组件的CSS影响。data(){...
2022-07-28 10:04:02
392
原创 【Vue.js 3.0源码】v-model双向绑定的实现过程
很多人会把Vue.js的响应式原理误解为双向绑定，其实响应式原理是一种单向行为，它是数据到DOM的映射。而真正的双向绑定，除了数据变化，会引起DOM的变化之外，还应该在操作DOM改变后，反过来影响数据的变化。v-model也不是可以作用到任意标签，它只能在一些特定的表单标签如input、select、textarea和自定义组件中使用。"onUpdate])}''value'change'return}}})})}if(!lazy){}},return。...
2022-07-27 10:27:22
578
原创 【Vue.js 3.0源码】指令完整的生命周期
Vue.js的核心思想之一是数据驱动，数据是DOM的映射。在大部分情况下，不用操作DOM的，但是这并不意味着你不能操作DOM。有些时候，我们希望手动去操作某个元素节点的DOM，比如当这个元素节点挂载到页面的时候通过操作底层的DOM来做一些事情。为了支持这个需求，Vue.js提供了指令的功能，它允许我们自定义指令，作用在普通的DOM元素上。//注册全局v-focus指令//挂载的钩子函数}})//当然，我们也可以在组件内部局部注册directives{focus。...
2022-07-26 09:59:32
333
1
原创 【Vue.js 3.0源码】插槽实现内容分发
有些时候我们希望子组件模板中的部分内容可以定制化，这个时候使用Props就显得不够灵活和易用了。因此，Vue.js受到WebComponent草案的启发，通过插槽的方式实现内容分发，它允许我们在父组件中编写DOM并在子组件渲染时把DOM添加到子组件的插槽中，使用起来非常方便。了解插槽的实现原理，知道父组件和子组件在实现插槽feature的时候各自做了哪些事情。...
2022-07-25 10:49:55
298
原创 【Vue.js 3.0源码】Props 的初始化和更新流程
页面可以由一个个组件构建而成，组件是一种抽象的概念，它是对页面的部分布局和逻辑的封装。为了让组件支持各种丰富的功能，Vue.js设计了Props特性，它允许组件的使用者在外部传递Props，然后组件内部就可以根据这些Props去实现各种各样的功能。了解Props是如何被初始化的，如何被校验的，区分Props配置和Props传值这两个概念。...
2022-07-22 12:09:41
741
原创 【Vue.js 3.0源码】AST 转换之节点内部转换
template的解析过程，最终拿到了一个AST节点对象。这个对象是对模板的完整描述，但是它还不能直接拿来生成代码，因为它的语义化还不够，没有包含和编译优化的相关属性，所以还需要进一步转换。示例中，我们有普通的DOM节点，有组件节点，有v-bind指令，有v-if指令，有文本节点，也有表达式节点。//获取节点和指令转换的方法//AST转换[...(options.nodeTransforms||[])//用户自定义transforms],...
2022-07-21 12:10:48
515
原创 【Vue.js 3.0源码】模板解析构造 AST 抽象语法树完整流程
Vue.js3.0的编译场景分服务端SSR编译和web编译，本文我们只分析web的编译。null}))}compile函数支持两个参数，第一个参数template是待编译的模板字符串，第二个参数options是编译的一些配置信息。compile内部通过执行baseCompile方法完成编译工作，可以看到baseCompile在参数options的基础上又扩展了一些配置。//解析template生成ASTtemplate//AST转换[],)...
2022-07-20 11:42:38
316
原创 【Vue.js 3.0源码】依赖注入子孙组件共享数据
Vue.js为我们提供了很多组件通讯的方式，常见的是父子组件通过prop传递数据。但是有时，我们希望能跨父子组件通讯，比如，无论组件之间嵌套多少层级，我都希望在后代组件中能访问它们祖先组件的数据。providereturn{foothis.foo}}}inject['foo']}这样，我们就可以在子孙组件中通过this.foo访问祖先组件提供的数据，以达到组件通讯的目的。}}return{theme}}}...
2022-07-19 13:32:37
182
原创 【Vue.js 3.0源码】各个生命周期的执行时机和应用场景
Vue.js组件的生命周期包括创建、更新、销毁等过程。在这些过程中也会运行叫生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。在Vue.js2.x中，我们通常会在组件对象中定义一些生命周期钩子函数，到了Vue.js3.0，依然兼容Vue.js2.x生命周期的语法，但是CompositionAPI提供了一些生命周期函数的API，让我们可以主动注册不同的生命周期。//Vue.js2.x定义生命周期钩子函数//做一些初始化工作},//可以拿到DOM节点。...
2022-07-18 15:58:38
969
原创 【Vue.js 3.0源码】响应式之侦听器的实现原理和使用场景（下）
回调函数是以一种调度的方式执行的，特别是当flush不是sync时，它会把回调函数执行的任务推到一个异步队列中执行。接下来，我们就来分析异步执行队列的设计。侦听器内部实现原理，了解侦听器支持的几种配置参数的作用，以及异步任务队列的设计原理。常见应用场景如何用watchAPI观测数据的变化去执行一些逻辑，如何利用watchEffectAPI去注册一些副作用函数，如何去注册无效回调函数，以及如何停止一个正在运行的watcher。...
2022-07-15 09:41:30
296
原创 【Vue.js 3.0源码】响应式之侦听器的实现原理和使用场景（上）
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。在平时的开发工作中，我们经常使用侦听器观察某个数据的变化然后去执行一段逻辑。在 Vue.js 2.x 中，可以通过 watch 选项去初始化一个侦听器，称作 watcher：当然你也可以通过 $watch API 去创建一个侦听器：与 watch 选项不同，通过 $watch API 创建的侦听器 watcher 会返回一个 unwatch 函数，可以随
2022-07-14 11:33:43
255
原创 【Vue.js 3.0源码】响应式之计算属性computed
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。计算属性是 Vue.js 开发中一个非常实用的 API ，它允许用户定义一个计算方法，然后根据一些依赖的响应式数据计算出新值并返回。当依赖发生变化时，计算属性可以自动重新计算获取新值，所以使用起来非常方便。我们举个简单的例子：从代码中可以看到，我们先使用 ref API 创建了一个响应式对象 count，然后使用 computed API 创建了另一个响应
2022-07-13 11:53:45
698
原创 【Vue.js 3.0源码】响应式之内部实现原理（下）
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。【Vue.js 3.0源码】响应式之内部实现原理（上） 中说到 Vue.js 3.0 中引入 reactive API，它可以把对象数据变成响应式，收集依赖的 get 函数，接下来我们来分析 reactive API 中需要关注的另一个内容——派发通知的过程。派发通知发生在数据更新的阶段 ，由于我们用 Proxy API 劫持了数据对象，所以当这个响应式对象
2022-07-12 10:48:50
214
原创 【Vue.js 3.0源码】响应式之内部实现原理（上）
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。除了组件化，Vue.js 另一个核心设计思想就是响应式。它的本质是当数据变化后会自动执行某个函数，映射到组件的实现就是，当数据变化后，会自动触发组件的重新渲染。响应式是 Vue.js 组件化更新渲染的一个核心机制。在 Vue.js 2.x 中，Watcher 就是依赖，有专门针对组件渲染的 render watcher。注意这里有两个流程，首先是依赖收集流程
2022-07-11 10:24:01
161
原创 【Vue.js 3.0源码】Composition API之组件渲染初始化过程（下）
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。我们具体来看一下 callWithErrorHandling 函数的实现：可以看到，它其实就是对 fn 做的一层包装，内部还是执行了 fn，并在有参数的时候传入参数，所以 setup 的第一个参数是 instance.props，第二个参数是 setupContext。函数执行过程中如果有 JavaScript 执行错误就会捕获错误，并执行 handle
2022-07-09 09:34:21
263
原创 【Vue.js 3.0源码】Composition API之组件渲染初始化过程（上）
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。一、前言：Vue.js 3.0 设计了一个很强大的 API —— Composition API，它主要用来优化代码逻辑的组织和复用。从语法上看，它提供了一个 setup 启动函数作为逻辑组织的入口，暴露了响应式 API 为用户所用，也提供了生命周期函数以及依赖注入的接口，这让我们不依托于 Options API 也可以完成一个组件的开发，并且更有利于代码逻
2022-07-08 11:35:47
315
原创 【Vue.js 3.0源码】直击Vue核心的实现之组件更新完整的DOM diff流程（下）
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。Vue.js 3.0源码专栏【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化【Vue.js 3.0源码】直击Vue核心的实现之组件渲染vnode到真实DOM一、前言新子节点数组相对于旧子节点数组的变化，无非是通过更新、删除、添加和移动节点来完成，而核心 diff 算法，就是在已知旧子节点的 DOM 结构、vnode 和新子节点的 vnode 情
2022-07-07 11:42:26
300
原创 【Vue.js 3.0源码】直击Vue核心的实现之组件更新完整的DOM diff流程（上）
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。Vue.js 3.0源码专栏【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化【Vue.js 3.0源码】直击Vue核心的实现之组件渲染vnode到真实DOM一、前言组件是由模板、组件描述对象和数据构成的，数据的变化会影响组件的变化。组件的渲染过程中创建了一个带副作用的渲染函数，当数据变化的时候就会执行这个渲染函数来触发组件的更新。那么接下来，我
2022-07-06 11:31:14
538
原创 【Vue.js 3.0源码】直击Vue核心的实现之组件渲染vnode到真实DOM
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。Vue.js 3.0源码专栏【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化相信作为一个 Vue.js 的开发者，最熟悉的应该就是组件了，我们开发 Vue.js 的项目，大部分时间都是在写组件，组件系统是 Vue.js 的一个重要概念，它是一种对 DOM 结构的抽象，我们可以使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的
2022-07-05 11:17:25
680
原创 【Vue.js 3.0源码】一文看懂Vue.js 3.0的优化
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。一、源码优化首先是源码优化，也就是小右对于 Vue.js 框架本身开发的优化，它的目的是让代码更易于开发和维护。源码的优化主要体现在使用 monorepo 和 TypeScript 管理和开发源码，这样做的目标是提升自身代码可维护性。接下来我们就来看一下这两个方面的具体变化。首先，源码的优化体现在代码管理方式上。Vue.js 2.x 的源码托管在 src 目
2022-07-04 15:48:04
440
原创 【JS函数】JS函数之高阶函数、组合函数、函数柯里化
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。JS函数专栏1【JS函数】JS函数之普通、构造、闭包函数2【JS函数】JS函数之定时器函数3【JS函数】JS函数之防抖、节流函数4【JS函数】JS函数之排序函数，对象数组根据某属性排序一、高阶函数1.定义接收一个或多个函数作为参数，比如函数；返回一个函数，比如函数。2.应用举个例子：比如我们要筛数组中大于3的所有元素二、组合函数1.定义组合函数类似于管
2022-07-01 16:46:20
412
转载 【JS函数】JS函数之排序函数，对象数组根据某属性排序
自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。JS函数专栏1【JS函数】JS函数之普通、构造、闭包函数2【JS函数】JS函数之定时器函数3【JS函数】JS函数之防抖、节流函数js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如：因为字母A、B的ASCII值分别为65、66，而a、b的值
2022-06-30 11:45:09
393
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人