- 博客(390)
- 收藏
- 关注
RSS订阅原创 vue 核心原理之指令和生命周期核心原理及实现
一、指令和生命周期核心原理及实现defineReactive，代码如下所示：import observe from './observe.js';import Dep from './Dep.js';export default function defineReactive(data, key, val) { const dep = new Dep(); if (arguments.length == 2) { val = data[key]; }
2021-11-21 15:39:13
449
原创 vue 核心原理之 AST 抽象语法树核心原理实现
一、AST抽象语法树核心原理实现parseAttrsString，把attrsString变为数组返回，如下所示：当前是否在引号内，断点，结果数组。遍历attrsString，而不是你想的用split()这种暴力方法，遇见了空格，并且不在引号中。循环结束之后，最后还剩一个属性k="v"，根据等号拆分。parseAttrsString，代码如下所示：export default function (attrsString) { if (attrsString == undefi
2021-11-21 15:31:24
605
原创 vue 核心原理之 AST 抽象语法树理解及算法
一、AST 抽象语法树理解模版语法，通过抽象语法树AST进行过渡让编译工作变得简单，变成正常的HTML语法。抽象语法树本质上就是一个JS对象。抽象语法树和虚拟节点的关系，模版语法到抽象语法树AST，渲染函数（h函数），虚拟节点，界面。指针就是下标，不是C语言中的指针，C语言中的指针可以操作内存。JS中的指针就是一个下标位置。栈，如下所示：栈（stack）又名堆栈，它是一种运算受限的线性表，仅在表尾能进行插入和删除操作。这一端被称为栈顶，相对地，把另一端称为栈底。向一个栈插入新元素又称作进
2021-11-21 15:22:59
1716
原创 vue 核心原理之数据响应式核心原理及实现
一、数据响应式核心原理MVVM 模式，数据变化，视图会自动变化。model、view、view-model。Vue数据变化是非侵入式，React数据变化和小程序数据变化是侵入式。Object.defineProperty()， 是数据劫持/数据代理，利用JavaScript引擎赋予的功能，检测对象属性变化。方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。同时，可以设置一些额外隐藏的属性。getter/setter，用闭包存储get和set的值。get，当访问该属性时
2021-11-21 15:15:58
1058
原创 vue 核心原理之虚拟 DOM 和 Diff 算法的核心原理及实现
一、虚拟DOM和Diff 算法的核心原理diff算法可以进行精细化比对，实现最小量更新。虚拟DOM：用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。diff是发生在虚拟DOM上的。新虚拟DOM和老虚拟DOM进行diff（精细化比较），算出应该如何最小量更新，最后反映到真正的DOM上。snabbdom是著名的虚拟DOM库，是diff算法的鼻祖，Vue源码借鉴了snabbdom。它的git地址是 https://github.com/snabbdom
2021-11-21 15:06:39
1214
原创 vue 核心原理之 mustache 底层核心原理及实现
一、mustache 核心原理mustache 库的机理，模版字符串编译为 tokens，数据结合 tokens 解析为 dom 字符串。tokens 是一个JS的嵌套数组，就是模板字符串的JS表示。它是“抽象语法树”、“虚拟节点”等等的开山鼻祖。循环情况下的tokens，当模板字符串中有循环存在时，它将被编译为嵌套更深的tokens。双重循环情况下的tokens，当循环是双重的，那么tokens会更深一层。mustache库底层重点要做两个事情，如下所示：将模板字符串编译为tokens形
2021-11-21 14:56:12
476
1
原创 vue 核心原理之模版引擎和 mustache 理解使用
一、模版引擎模版引擎是将数据变为视图的方法，而数据变为视图的方法有四种，如下所示：纯DOM法，非常笨拙，没有实战价值数组join法，曾几何时非常流行，是曾经的前端必会知识ES6的反引号法，ES6中新增的${a}语法糖，很好用模板引擎，解决数据变为视图的最优雅的方法数据变为视图的代码实现，如下所示：纯DOM法，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charse
2021-11-18 00:04:51
402
原创 手写事件总线函数和 axios 函数
一、事件总线事件总线，如下所示：eventBus，包含所有功能的事件总线对象eventBus.on，绑定事件监听eventBus.emit，分发事件eventBus.off，解绑指定事件名的事件监听，如果没有指定解绑所有事件总线的实现，代码如下所示： export const eventBus = { // 保存类型与回调的容器 callbacks: {}}// 绑定事件eventBus.on = function (type, callback) { //
2021-08-22 11:23:33
257
原创 手写实现字符串函数之倒序、判断是否是回文、截取字符串以及事件委托
一、字符串倒序字符串倒序，生成一个倒序的字符串。字符串倒序的实现，代码如下所示：export function reverseString (str) { // 将字符串转为数组 // let arr = str.split(''); let arr = [...str]; // 翻转数组 arr.reverse(); // 将数组拼接成字符串 let s = arr.join(''); return s;}手写函数字符串倒序的应用，代码如下所示：//
2021-08-22 11:21:34
289
原创 手写实现对象方法之创建新对象、比对对象类型、对象合并、浅拷贝和深拷贝
一、创建新对象创建新对象，通过新的 object 对象。创建新对象的实现，代码如下所示：export function newInstance (Fn, ...args) { // 创建一个新对象 const obj = {}; // 修改函数内部 this 指向新对象并执行 const result = Fn.call(obj, ...args); // 修改新对象的原型对象 obj._proto_ = Fn.prototype; // 返回新对象 return
2021-08-22 11:19:24
223
原创 手写实现数组方法之分块、差集、删除数组某些元素和获取数组某些元素
一、数组分块数组分块，将数组拆分成多个 size 长度的区块，每个区块组成小数组，整体成一个二维数组。数组分块的实现，代码如下所示：export function chunk (arr, size=1) { // 判断 if (arr.length === 0) { return []; } // 声明两个变量 let result = []; let tmp = []; // 遍历 arr.forEach(item => { // 判断 t
2021-08-22 11:16:44
4696
原创 手写实现数组方法之去重、concat、slice 和 扁平化
一、数组去重数组的去重，有三种方法，如下所示：利用 forEach() 和 indexOf()，本质上是双重遍历，效率差些利用 forEach() + 对象容器，只需一重遍历，效率高些利用 ES6 语法：from + Set 或者 ... + set，编码简洁数组去重的实现，代码如下所示：function unique1 (arr) { // 声明一个空数组 const result = []; // 遍历原始数组 arr.forEach(item => {
2021-08-22 11:13:59
1085
2
原创 手写实现数组方法之 map、reduce、filter、find、findInex、every 和 some
一、map 方法map 方法，返回一个由回调函数的返回值组成的新数组。map 的实现，代码如下所示：export function map(arr, callback) { // 声明一个空的数组 let result = []; // 遍历数组 for(let i=0;i<arr.length;i++) { // 执行回调 result.push(callback(arr[i], i)); } // 返回结果 return result;}
2021-08-22 11:11:08
709
原创 手写实现函数方法之 call、apply、bind、节流与防抖
一、call 方法call，语法为 call(fn, obj, ...args)，功能为执行 fn，使 this 为 obj，并将后面的 n 个参数传给 fn，等同于函数对象的 call 方法。call 的实现，代码如下所示：export function call (Fn, obj, ...args) { // 判断 if (obj === undefined || obj === null) { obj = globalThis; // 全局对象 } // 为 obj
2021-08-22 11:07:42
336
原创 Promise 的 async 与 await
一、async 与 awaitasync 函数，如下所示：函数的返回值为 promise 对象promise 对象的结果由 async 函数执行的返回值决定await 表达式，如下所示：await 右侧的表达式一般为 promise 对象, 但也可以是其它的值如果表达式是 promise 对象, await 返回的是 promise 成功的值如果表达式是其它值, 直接将此值作为 await 的返回值注意点，如下所示：await 必须写在 async 函数中, 但 as
2021-08-08 16:40:13
510
原创 Promise 的手写及自定义封装
一、promise 的手写及自定义封装promise 的自定义封装，then 和 catch 方法，代码如下所示：// 声明构造函数function Promise (executor) { // 添加属性 this.PromiseState = 'pending'; this.PromiseResult = null; // 声明属性 // this.callback = {}; this.callbacks = []; // 保存实例对象的 this 值 con
2021-08-08 16:38:09
209
原创 Promise 的关键问题理解及使用
一、promise 的关键问题如何改变 promise 的状态，如下所示：resolve(value): 如果当前是 pending 就会变为 resolvedreject(reason): 如果当前是 pending 就会变为 rejected抛出异常: 如果当前是 pending 就会变为 rejected一个 promise 指定多个成功/失败回调函数, 都会调用吗，如下所示：当 promise 改变为对应状态时都会调用改变 promise 状态和指定回调函数谁先谁后，
2021-08-08 16:35:41
227
原创 Promise 的 API 理解与使用
一、promise 的 API 说明Promise 构造函数: Promise (excutor) {}，如下所示：executor 函数: 执行器 (resolve, reject) => {}resolve 函数: 内部定义成功时我们调用的函数 value => {}reject 函数: 内部定义失败时我们调用的函数 reason => {}说明: executor会在 Promise 内部立即同步调用,异步操作在执行器中执行Promise.prototype.t
2021-08-08 16:34:14
1391
原创 Promise 的理解与使用
一、promise 的理解promise 是什么，如下所示：Promise 是一门新的技术(ES6 规范)Promise 是 JS 中进行异步编程的新解决方案从语法上来说: Promise 是一个构造函数从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值promise 的状态改变，如下所示：pending 变为 resolvedpending 变为 rejected只有这 2 种, 且一个 promise 对象只能改变一次无论变为成功还
2021-08-08 16:32:53
277
原创 axios 源码分析的总结
一、axios 源码分析的总结axios 与 Axios 的关系，如下所示：从语法上来说: axios 不是 Axios 的实例从功能上来说: axios是 Axios 的实例axios 是 Axios.prototype.request 函数 bind() 返回的函数axios 作为对象有 Axios 原型对象上的所有方法, 有 Axios 对象上所有属性instance与 axios 的相同点，如下所示：都是一个能发任意请求的函数: request(config)都有发特定
2021-07-25 15:17:37
163
原创 axios 请求取消及其实现过程
一、axios 请求取消axios 请求取消，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
2021-07-25 14:13:01
600
原创 axios 拦截器及其实现过程
一、axios 拦截器axios 拦截器，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2021-07-25 14:11:36
1036
原创 axios 请求发送及其实现过程
一、axios 请求发送axios 请求发送，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
2021-07-25 14:10:44
1068
原创 axios 的创建实例对象、拦截器和请求取消
一、axios 创建实例对象axios 创建实例对象，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
2021-07-25 14:08:33
378
原创 axios 的基本使用、其它使用和默认配置
一、axios 的基本使用axios 的基本使用，代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
2021-07-25 14:07:03
418
原创 axios 的理解与使用
一、axios 的理解axios 是什么，如下所示：前端最流行的 ajax 请求库react/vue 官方都推荐使用 axios 发 ajax 请求文档: https://github.com/axios/axiosaxios 特点是什么，如下所示：基于 xhr + promise 的异步 ajax 请求库浏览器端/ node 端都可以使用支持请求／响应拦截器支持请求取消请求/响应数据转换批量发送多个请求axios 常用语法，如下所示：axios(config
2021-07-25 13:31:18
279
原创 react 从入门到实践之 react 的虚拟 DOM 和 Diff 算法
一、react 的虚拟 DOM 和 Diff 算法虚拟 DOM和diff算法是 React中非常核心的两个概念, 我们需要对此有一个很全面的认知。这对于我们用脚手架开发项目, 尤其是企业中前后端分离的项目(类似: 后台管理系统)等有很大的帮助。对于虚拟 DOM的内部执行流程，如下所示：用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中;当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异;把
2021-05-05 15:29:42
298
原创 react 从入门到实践之 react 的生命周期函数和原理
一、react 的生命周期函数组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程。如果能够做到知其然且知其所以然, 那么在后期多组件、中大型项目开发过程中，就能够很好的把控项目的性能细节。react 生命周期阶段划分，如下所示：初始化阶段，在组件初始化阶段会执行，主要有 constructor、componentWillMount、render 和 componentDidMount更新阶段，props 或 state 的改变可能会引起组件的更新，组件重新渲染的过程中
2021-05-05 15:25:50
372
1
原创 react 从入门到实践之基础总结二
一、React中的组件/模块、 组件化/模块化对于组件，如下所示：一个应用/版块/页面中用于实现某个局部的功能(包括 html, js, css 等)把这些局部功能组装到一起就形成了完整的一个大的功能主要目的在于: 复用代码, 提高项目运行效率对于组件化，如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用。对于模块，多个组件形成模块, 或者是一个提供特定功能的 js 文件, 主要特点在于耦合性低, 可移植性高, 执行效率好。对于模块化，如果一个
2021-05-05 15:20:43
168
2
原创 react 从入门到实践之基础总结一
一、为什么要学习React前言，选择任何一门语言学习都是有时间和金钱的成本的，那么 React 值得学习。学习的必要性，如下所示：使用组件化开发方式，符合现代 Web 开发的趋势; 企业前后端项目分离，唯有 React 是首选；技术成熟，社区完善，配件齐全，适用于大型 Web 项目（生态系统健全）；由 Facebook 专门的团队维护，技术支持可靠；ReactNative - Learn once, write anywhere: Build mobile apps with React
2021-05-05 15:07:50
240
3
原创 对于 React 结合 Antd 的 Table 组件实现表格的渲染、新增、修改和删除
一、React 结合 Antd 实现表格的渲染、新增、修改和删除引入所需相关的组件和文件，代码如下所示：import React, { Component } from 'react'import { Card, Button, Table, Modal, message } from 'antd'import LinkButton from '../../components/linkButton/index'import { formateDate } from '../../utils/
2021-03-21 22:55:42
7756
1
原创 对于 React 结合 Antd 实现富文本编辑功能
一、React 结合 Antd 实现富文本编辑引入所需相关的组件和文件，代码如下所示：import React, { Component } from 'react'import PropTypes from 'prop-types'import {EditorState, convertToRaw, ContentState} from 'draft-js'import {Editor} from 'react-draft-wysiwyg'import draftToHtml from '
2021-03-21 22:47:00
3590
原创 对于 React 结合 Antd 的 Upload 组件实现图片上传
一、 React 结合 Antd 实现图片上传引入所需相关的组件和文件，代码如下所示：import React, { Component } from 'react'import PropTypes from 'prop-types'import { Upload, Icon, Modal, message } from 'antd'import { reqDeleteImg } from '../../api'import { BASE_IMG_URL } from '../../util
2021-03-21 22:42:49
5141
1
原创 对于 React 结合 Antd 实现左侧菜单的权限列表
一、React 结合 Antd 实现权限列表引入所需相关的组件和文件，如下所示：import React, { Component } from 'react'import { Link, withRouter } from 'react-router-dom'import { Menu, Icon } from 'antd'import logo from '../../assets/images/logo.png'import menuList from '../../config/me
2021-03-21 11:08:32
1337
原创 对于 React 结合 Antd 的 Form 组件实现登录功能
一、React 结合 Antd 实现登录功能引入所需的 Antd 组件，代码如下所示：import { Form, Icon, Input, Button, message } from 'antd'在 Login.jsx 中，创建一个 Login 组件。当对外暴露组件时，需要使用 Form 组件进行包装，包装 Form 组件生成一个新的组件 Form(Login)，同时新组件会向 Form 组件传递一个强大的对象属性 form，这样就可以取到 Form 表单的值，这也是高阶组件和高阶函数的体
2021-03-21 11:02:37
2529
1
原创 对于 React 中 高阶函数和高阶组件的理解
一、高阶函数和高阶组件高阶函数，是一类特别的函数，接受函数类型的参数，返回值是函数。对于常见的高阶函数，如下所示：定时器: setTimeout()/setInterval()Promise: Promise(() => {}) then(value => {}, reason => {})数组遍历相关的方法： forEach()/filter()/map()/reduce()/find()/findIndex()函数对象的 bind()Form.create(
2021-03-21 10:04:51
588
原创 对于 React 中 context 的理解
一、Context 的认识在 React 中，父子组件通信的机制，父子组件的通信是通过 props 进行数据的传递，如下所示：父组件向子组件传递数据(状态)时，是在调用子组件的时候通过参数传递给子组件，子组件通过 this.props 进行接收子组件如果更改父组件的一些属性，则是通过父组件定义的方法来传递给子组件，子组件调用更改如果父组件想要更改子组件的一些状态时，通过 ref 进行标记，可以获取子组件的所有信息，从而调用子组件的方法和值当层级很多时，使用 props 进行逐层的传递，是不行
2021-03-20 23:16:48
376
原创 对于 React 中 key 的理解
一、React 中的 key在 React 中，虚拟 DOM 的 key 的作用，如下所示：简单的说，key 是虚拟 DOM 对象的标识, 在更新显示时 key 起着极其重要的作用详细的说，当列表数组中的数据发生变化生成新的虚拟 DOM 后, React 进行新旧虚拟 DOM 的 diff 比较对于虚拟 DOM 的 diff 比较，如下所示：key 没有变，item 数据没变, 直接使用原来的真实 DOM；item 数据变了, 对原来的真实 DOM 进行数据更新key 变了，销毁原
2021-03-20 23:15:24
545
原创 对于 React 中 Component 和 PureComponent 的理解
一、Component 和 PureComponent在 React 中，Component 存在的问题，如下所示：父组件重新 render(), 当前组件也会重新执行 render(), 即使没有任何变化当前组件 setState(), 重新执行 render(), 即使 state 没有任何变化对于 React 中解决 Component 存在的问题，如下所示：原因，组件的 componentShouldUpdate() 默认返回 true, 即使数据没有变化 render()
2021-03-20 23:13:23
335
原创 对于 React 中 setState() 的理解
一、setState() 的使用setState() 更新状态的两种写法，如下所示：setState(updater, [callback])，updater 为返回 stateChange 对象的函数: (state, props) => stateChange，接收的 state 和 props 被保证为最新的setState(stateChange, [callback])，stateChange 为对象，callback 是可选的回调函数，在状态更新且界面更新后才执行对于 s
2021-03-20 23:10:15
239
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人