前端之神-CSDN博客

原创什么是 Vite

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。那么 Vite 究竟有什么魅力？这里引用一下 vite 官网首页的描述：下一代前端开发与构建工具为什么是下一代呢？现有的前端构建工具不够我们用吗？Vite 是不是在重复造轮子？下面我就用简单的逻辑解释一下 Vite 的优越性。为什么是下一代为了解释“下一

2021-04-19 09:43:39 17468 1

原创 ES7 装饰器模式的配置

装饰器模式简介在使用 React 框架编程中，我们用高阶组件的时候，使用时往往需要用高阶组件函数包裹当前组件来导出的形式，过于麻烦。装饰器模式则优化了这一点，让我们在编程的过程中节省一点精力。当我们使用了装饰器模式，React 中的高阶组件就可以这样来使用：装饰器模式的配置安装依赖cnpm i @babel/plugin-proposal-decorators react-scripts @babel/plugin-syntax-jsx @babel/helper-create-regexp

2021-03-29 11:24:11 560

原创 node.js 常用模块

http 模块作用Nodejs提供了http模块，用来构建服务器引入方法const http = require("http");功能APIhttp.Server 类用于创建HTTP服务器，使用时需要先实例化；http.ClientRequest 类该对象在 http.request() 内部被创建并返回。它表示着一个正在处理的请求；http.IncomingMessage 类IncomingMessage对象由 http.Server 或 http.

2021-03-15 09:01:45 1294

原创 TypeScript 基础（二）

TypeScript 类、继承与接口类类的介绍原生JavaScript使用函数和基于原型的继承来创建可重用的组件，真正的面向对象编程中的类到ES6才出现，而TypeScript直接允许程序员们使用基于类的面向对象编程，并且编译后的JavaScript可以在所有主流浏览器和平台上运行。类的基本语法下面举一个使用类的例子：class Greeter { greeting: string; constructor(message: string) { this.

2021-03-08 09:00:15 319

原创 TypeScript 基础（一）

TypeScript 入门TypeScript简介TS的来历TypeScript（简称TS）由微软于2013年发布，是ECMA的三巨头语言的老小（JS、AS、TS）。TS的特点TypeScript是一种强类型语言，相对于弱类型语言，开发更容易，（但更难学）。TS的使用方法安装：打开终端，输入npm i typescript -g编程：创建一个.ts为后缀的文件开始编程编译运行：在终输入tsc filename.ts即可编译TypeScript文件，生成一个同名的js文件。

2021-03-01 09:40:56 268 1

原创 React 之 Redux 异步处理——redux-thunk

什么是 redux-thunkredux-thunk 是一个中间件，专门用来解决 action 中的异步处理。redux提供了一个方法 applyMiddleware 用来使用中间件。redux-thunk 的安装方法：cnpm i redux-thunk -Sredux-thunk的规则：通常情况下，action必须是一个对象，或者返回一个对象；在使用redux-thunk之后，允许action返回一个函数，函数有个参数dispatch在需要进行异步处理的时候返回函数

2021-02-01 12:43:01 1877

原创 ElementUI 的校验函数 validator 的传参与复用

动机当我们使用 ElementUI 来做前端校验时，大多数项目都不会被其自带的简单校验规则所满足。所以我们经常需要自定义校验函数 validator 来满足我们的项目需求。而这时又会出现一个比较棘手的问题：这个自定义的 validator 由于无法传参，复用性极差。比如我们上一篇文章做了一个自定义的中英文混合长度校验函数：const validLength = function (rule, value, callback) { function getStrLength(str) {

2021-01-19 09:05:09 9892 9

原创 Element UI 中文英文混合字符长度校验

场景当我们需要使用 element-ui 来校验长度的时候，可以在前端用其内置的 max、min 属性来限制。但是我们知道——由于数据库的编码格式的不同，一个汉字在数据库中需要占 2-3 个字节。假如有一个 name 字段，数据库中设置的长度为64。在 element-ui 中如果用 max:64 的方法对字段进行限制，那么输入64个汉字时，数据库中实际的长度就是 192 ，这显然不是我们想要的。所以，我们需要自定义一个函数，可以满足中英文字符的混合校验，精准地对字段的长度进行限制。实现const

2021-01-15 10:23:30 3124 3

原创什么是 immutable

immutable 基础入门什么是immutableimmutable（不可改变的）immutable是一种持久化数据。一旦被创建就不会被修改。修改immutable对象的时候返回新的immutable。但是原数据不会改变。原理：持久化数据结构为什么要使用immutable在Rudux中因为深拷贝对性能的消耗太大了（用到了递归，逐层拷贝每个节点）。但当你使用immutable数据的时候：只会拷贝你改变的节点，从而达到了节省性能。总结：immutable的不可变性让纯函数更强大，每次都

2020-12-28 10:57:49 26155

原创 ES5 新数组方法的封装

forEachArray.prototype.myForEach = function(callback){ if(typeof callback !== 'function'){ throw new Error(callback + 'is not function'); } let T = arguments[1] ? arguments[1] : window; for(let i = 0 ; i < this.length ; i ++){

2020-12-21 10:32:58 229

原创 react 中的组件传值

父传子：属性传值原理：父级调用子级的时候，在子组件身上绑定一个属性，值为需要传递的数据。子组件中通过 this.props 来获取。父组件的传递：import React, { Component } from 'react'export default class Father extends Component { constructor() { super(); this.state = { msg:"父组件的msg"

2020-12-14 10:37:03 565 2

原创 react hooks 的简单使用

先了解一下类组件和函数组件react 的特点就是：一切皆为组件。其中，组件种类有很多，不同种类的组件有不同的功能。我们熟知的组件种类：函数组件、类组件、受控组件、非受控组件、ui组件、容器组件、高阶组件等。我们先介绍一下类组件和函数组件，让我们清楚为什么会有 hooks类组件其中，我们最熟悉的类组件，也就是有状态组件，是这个样子的：import React, { Component } from 'react'export default class MyComponent extend

2020-12-07 10:37:06 318

原创 JS Promise的封装

初步完成异步处理class myPromise { static PENDING = 'PENDING'; static FULFILLED = 'FULFILLED'; static REJECTED = 'REJECTED'; constructor(handler) { if (typeof handler !== 'function') { throw new TypeError('Promise resolver undef

2020-11-30 10:53:05 327

原创 Vue3 为什么这样改？

Vue3.0 的发布成为了热门，热闹的网友们也开始对它评头论足。对其有一些了解的同学应该知道 Vue3 相比 Vue2 的变化是非常大的。Vue3 的底层全部重写，做了很多优化，也做了很多变革。虽然我们清楚 Vue3 未来的主流是 Composition-Api，但同时， Vue3 也几乎完全兼容 Vue2 的 template 语法，而且近期在做 IE11 的兼容。可见尤雨溪团队已经在能力范围内兼顾了最多的开发者了。但我们仍然能听到类似的声音：跟 react 越来越像了与 vue 的理念背道而驰

2020-11-13 18:06:09 318 1

原创 JavaScript 对象中的 set 和 get

什么是set和getset和get是js对象中的访问器属性，介于属性和方法之间，一般成对出现，只存在于ES6。举一个简单的例子：var obj = { _num = 0, set num(value){ //set 方法有且仅有一个参数，不适用retrun返回内容 this._num = value; }, get num(){ // get 方法不能有参数，且必须用return返回内容 return this._num; }

2020-11-05 17:38:11 4547 1

原创 element-ui 表单校验的 prop 属性

我们通常认为，prop 属性是我们需要进行表单校验的时候使用的。但是当我们进行一些比较复杂的校验的时候，对 prop 的理解太浅就会使我们感到头疼：prop 属性究竟做了些什么？官网的解释有些拗口，用人话来说就是：prop 属性让你的校验规则和数据匹配。<el-form :model="ruleForm" :rules="rules"> <el-form-item label="活动名称" prop="name"> <el-input v-model="rul

2020-10-30 17:02:32 13012 2

原创 async/await 的理解和用法

async/await是什么async/await 是ES7提出的基于Promise的解决异步的最终方案。asyncasync是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。// async基础语法async function fun0(){ console.log(1); return 1;}fun0().then(val=>{ conso

2020-10-23 16:38:31 162616 39

原创 Vue3 的函数式编程

Vue3.0 正式版已经于9月底发布，其中，Vue3 新增的composition-api 是我们讨论的大热门，甚至不少 react 开发者都对其赞不绝口。那么，究竟什么是函数式编程？composition-api 又厉害在哪里捏？注：看本文章之前，你需要了解一下 Vue3 的 composition-api动机逻辑的组合与复用。组件 API 设计所面对的核心问题之一就是如何组织逻辑，以及如何在多个组件之间抽取和复用逻辑。在此之前，Vue2.x 的 Mixins 以及 react 的高阶组件等

2020-10-16 16:17:11 7258 7

原创 Hash 路由的简单封装

hash 路由的封装路由的使用既然要封装，必须先知道要封装什么东西，所以要根据使用的方法来封装功能const router = new Router({ // 路由的选择，本篇只封装hash路由 mode: 'hash', // 路由表的配置 routes: [ { path: '/', template: home }, { path: '/

2020-09-19 16:37:21 312

原创 JavaScript 中的节流与防抖

什么是节流和防抖节流和防抖的本质都是用闭包的形式，通过对事件对应的回调函数进行包裹，用自由变量缓存时间信息，最后用 setTimeout 来控制事件的触发频率。节流 throttle节流是指在一定的时间内，不管触发多少次回调函数，都只执行一次。防抖 debounce防抖是指在一定时间内，如果再次调用回调函数，则开始新的计时，不管调用了多少次，只触发最后一次。具体实现throttlevar throttle = function(func, delay) { // 内存

2020-09-11 18:53:40 185

原创前端数据请求方案：$ajax、fetch和axios

简介传统的请求方案是基于原生js的 XMLHttpReauest（XHR）对象的，众所周知，ajax 可以实现无刷新请求数据，它的出现使前端的技术上升了一个台阶。但是随着技术的革新，XHR 对象的弊端也渐渐的暴露出来，直到现在，我们进行前后端数据请求的主流方式大体有三种：$.ajax、axios 和 fetch。jQuery 中的 $.ajaxjQuery 是曾经风靡一时的 js 库，作为一个相对完善的方法库，里边自然有对前后端数据请求的封装方法—— $.ajax 。$.ajax 的用法如下，这里

2020-09-05 16:35:39 371

原创浏览器如何绘制页面

浏览器如何绘制页面虽然不同的浏览器有着不同的内核，但是浏览器的渲染流程都是相似的：构建DOM树 => 创建StyleRules => 构建Render树 => 布局Layout => 绘制Painting构建DOM树：分析HTML，构建成DOM树。（每个DOM节点都有attach方法，用来接收样式信息，返回一个render对象，这些render对象最终会构建成一个Render树）构建StyleRules：分析CSS文件以及DOM元素上的行内样式，生成

2020-08-23 22:22:48 1159

原创 Vue3 的新特性(三) —— 虚拟DOM的底层原理

Vdom （虚拟dom）凭借着出色的性能成为了目前的主流的前端框架都会选择的渲染方案。再加上优秀的 diff 算法对它的一步步的优化，使框架的价值得到了极致的体现，几乎成为了我们前端开发必不可少的方案。我们已经知道，Vue2.x 中的 Vdom 已经相当出色了，性能非常优秀。不过令人兴奋的是，尽管它够快，但在 Vue3 中还是对 Vdom 进行了重写，使 Vue3 突破了 Vdom 的性能瓶颈，更快！Vue3 如何重写 Vdom在开始介绍之前，先给大家推荐一个网站：[https://vue-next-

2020-08-12 19:01:29 3267

原创 Vue3 的新特性(二) —— Composition-Api

本篇文章将介绍Vue3中的新增杀器 —— Composition API : 一组低侵入式的、函数式的 API，它使我们能够更灵活地「组合」组件的逻辑。Composition API 的灵感来自于 React Hooks ，是比 mixin 更强大的存在。它可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时函数式的编程使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。如上图，在较大组件的编写中， Composition-A

2020-08-05 16:58:22 11575 5

原创 Vue3 的新特性

Vue3.0的进度7月18号，尤弟宣布首个 Vue 3 RC 发布：RC 即预发布版。这意味着 Vue3 内核的 API 和实现已到达稳定状态，在最终版本发布前，不会提出新功能或者做重大更改。看来距离 Vue3.0 正式版与我们见面已经不远了！那么本篇文章，就带大家来了解一下 Vue3 ，体验一下它的新特性。Vue3.0新特性性能双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快，且消除了之前存在的警告；重写了 Vdom ，突破

2020-07-31 17:48:26 4262 7

原创 React diff 算法的底层原理

什么是diff算法react 作为一款最主流的前端框架之一，在设计的时候除了简化操作之外，最注重的地方就是节省性能了。diff算法就是为节省性能而设计的，diff算法和虚拟DOM的完美结合是react最有魅力的地方。其中，diff 是 different 的简写，这样一来，diff 算法是什么也就顾名思义了——找不同。diff算法的基本流程：第一次render在执行的时候会将第一次的虚拟dom做一次缓存，第二次渲染的时候会将新的虚拟dom和老的虚拟dom进行对比。这个对比的过程其实就是diff算法。

2020-07-06 10:15:42 5374

qq_42941302的博客