aiguangyuan_JavaScript网页特效,Flutter,Interview-CSDN博客

原创 Vue 2.0源码分析-createElement

我们大致了解了 createElement 创建 VNode 的过程，每个 VNode 有 children，children 每个元素也是一个 VNode，这样就形成了一个 VNode Tree，它很好的描述了我们的 DOM Tree。回到 mountComponent 函数的过程，我们已经知道 vm._render 是如何创建了一个 VNode，接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来，这个过程是通过 vm._update 完成的，接下来分析一下这个过程。

2023-11-26 17:35:48 1047

原创 Vue 2.0源码分析-Virtual DOM

可以看到 Vue.js 中的 Virtual DOM 的定义还是略微复杂一些的，因为它这里包含了很多 Vue.js 的特性。这里千万不要被这些茫茫多的属性吓到，实际上 Vue.js 中 Virtual DOM 是借鉴了一个开源库 snabbdom 的实现，然后加入了一些 Vue.js 特色的东西。建议大家如果想深入了解 Vue.js 的 Virtual DOM 前不妨先阅读这个库的源码，因为它更加简单和纯粹。

2023-11-24 23:30:32 659

原创 Vue 2.0源码分析-渲染函数render

这段代码最关键的是 render 方法的调用，我们在平时的开发工作中手写 render 方法的场景比较少，而写的比较多的是 template 模板，在之前的 mounted 方法的实现中，会把 template 编译成 render 方法，但这个编译过程是非常复杂的，之后会专门有一个章节来分析 Vue 的编译过程。

2023-11-24 23:13:02 740

原创 Vue 2.0源码分析-实例挂载的实现

这段代码首先缓存了原型上的 $mount 方法，再重新定义该方法，我们先来分析这段代码。首先，它对 el 做了限制，Vue 不能挂载在 body、html 这样的根节点上。接下来的是很关键的逻辑 , 如果没有定义 render 方法，则会把 el 或者 template 字符串转换成 render 方法。

2023-11-23 23:47:20 967

原创 Vue 2.0源码分析-new Vue 发生了什么?

从入口代码开始分析，我们先来分析 new Vue 背后发生了哪些事情。我们都知道，new 关键字在 Javascript 语言中代表实例化是一个对象，而 Vue 实际上是一个类，类在 Javascript 中是用 Function 来实现的，来看一下源码，在src/core/instance/index.js 中

2023-11-23 23:12:51 706

原创 Vue 2.0源码分析-数据驱动

Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。

2023-11-23 22:41:33 576

原创 Vue 2.0源码分析-从入口开始

Vue 的初始化过程基本介绍完毕。这一节的目的是让同学们对 Vue 是什么有一个直观的认识，它本质上就是一个用 Function 实现的 Class，然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性，那么 Vue 能做什么，它是怎么做的，会在后面的章节一层层帮大家揭开 Vue 的神秘面纱。

2023-11-23 00:51:19 1310

原创 Vue 2.0源码分析-代码构建

Vue.js 源码是基于Rollup构建的，它的构建相关配置都在 scripts 目录下。通常一个基于 NPM 托管的项目都会有一个 package.json 文件，它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象。我们通常会配置 script 字段作为 NPM 的执行脚本，Vue.js 源码构建的脚本如下：这里总共有 3 条命令，作用都是构建 Vue.js，后面 2 条是在第一条命令的基础上，添加一些环境参数。

2023-11-21 00:12:11 638

原创 Vue 2.0源码分析-目录设计

从 Vue.js 的目录设计可以看到，作者把功能模块拆分的非常清楚，相关的逻辑放在一个独立的目录下维护，并且把复用的代码也抽成一个独立目录。这样的目录设计让代码的阅读性和可维护性都变强，是非常值得学习和推敲的。

2023-11-20 23:25:24 241

原创 Vue 2.0源码分析-引入类型检查Flow

Flow是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码。为什么用 Flow？JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的 bug。

2023-11-20 00:11:54 265

原创按键精灵实现打开QQ自动化脚本

以下是基于按键精灵实现的一个打开QQ的功能，其基本的思路是：1.滑屏找到图标；2.点击图标；3.进入登录界面，检测登录按钮；4.点击登录；实现代码如下。

2023-11-18 16:39:22 100

原创按键精灵中的日志、分辨率、找色逻辑、线程

按键精灵中的日志、分辨率、找色逻辑、线程，1.开启输出日志；2.设置分辨率在写脚本的时候，会针使用一个固定的屏幕分辨率来编写，但是当这个脚本在其它分辨率的手机上使用时就会无法正常运行，为此就需要提前声明脚本分辨率，这样脚本在运行时就会根据当前手机屏幕分辨率与脚本编写时声明的手机分辨率进行比例缩放，相关的坐标位置也会跟着比例做位移。3.多点找色逻辑；4.多线程调用；利用多线程实现一个检测游戏脚本运行是否卡住的程序......

2023-11-17 00:07:02 215

原创按键精灵中的字符串常用的场景

在使用按键精灵编写脚本时，与字符串有关的场景有以下几种：1.用时间字符串记录脚本使用截止使用时间；2.多账号登录时读取账号名称；3.针对字符串特殊操作使用命令库；在命令库文件里添加了新方法后，如果电脑上连接的是手机，直接点击同步命令库即可，如果是模拟器的话，需要将电脑上修改的命令库文件复制到模拟器里面。4.使用Lua插件实现更复杂的功能......

2023-11-12 19:05:45 610

原创按键精灵中的数据类型转换

按键精灵中的数据类型有：整型、浮点数、布尔类型、字符串、数组这几种类型，主要的转换方式有以下这几种方式：1.转布尔类型；2.转字符串类型；3.转短整型整数；4.转长整型整数；5.转双精度浮点数；6.转单精度浮数；

2023-11-11 00:16:47 379

原创按键精灵中的函数使用

1. 命令名称：Function 函数；2. 命令功能：定义一个函数；3. 语法格式：Function 函数名([自定义参数1, 自定义参数2, ...]) 执行语句 [函数名=返回值]End Function ；4. 参数说明：函数名：任意有效标识符；执行语句：任意有效代码语句；自定义参数：可选参数，允许多个，任意有效标识符；5.返回值：可选，自定义返回值；6. 脚本例子

2023-11-06 23:02:16 643

原创按键精灵中的UI界面操作

按键精灵中UI界面常用的控件：1.文字框；2.输入框；3.按钮；4.多选框；5.下拉选项；6.标签页；7.水平布局；按键精灵的UI控件代码全是中文的，而且只能设置一些简单的样式，这一点比Auto.js差很多。如何获取控件中的值？脚本界面示例

2023-11-06 22:12:55 228

原创按键精灵中常用的图色操作命令

图色操作是按键精灵中最核心的功能，因为如果单纯的靠坐标与延时去编写脚本，这样的脚本会因为不同手机的性能和网络表现出不同的差异。1.获取指定点的颜色；2.多点比色命令；3.多点找色命令

2023-11-04 22:18:18 194

原创按键精灵中常用的命令

按键精灵中常用的命令 1.声明变量： Dim；2.注释语句 (1). 单行注释：'这是一行注释，使用一个单引号进行注释；(2). 单行注释：//这是一行注释，使用一对反斜杠进行注释；(3). 多行注释：/*这是多行注释，中间的内容可以进行换行*/，开头为反斜杠和星号，结尾为星号和反斜杠，两者结合来进行注释；3.关系运算符： True ，False

2023-11-04 14:37:28 212

原创按键精灵开发环境搭建

按键精灵是一个可用于编写自动化执行程序的软件，不仅可以用于PC端，也可以用于手机端，平台稳定，生态良好，开发快捷，是自动化软件开发必不可少的利器。

2023-11-04 00:13:46 199

原创 Python中数据结构列表详解

列表是最常用的 Python 数据类型，它用一个方括号内的逗号分隔值出现，列表的数据项不需要具有相同的类型。列表中的每个值都有对应的位置值，称之为索引，第一个索引是 0，第二个索引是 1，依此类推。列表都可以进行的操作包括索引，切片，加，乘，检查成员。此外，Python 已经内置确定序列的长度以及确定最大和最小的元素的方法。

2023-08-18 09:35:09 342

转载第四篇：组件更新：完整的 DOM diff 流程是怎样的？（上）

上一节课我们梳理了组件渲染的过程，本质上就是把各种类型的 vnode 渲染成真实 DOM。我们也知道了组件是由模板、组件描述对象和数据构成的，数据的变化会影响组件的变化。组件的渲染过程中创建了一个带副作用的渲染函数，当数据变化的时候就会执行这个渲染函数来触发组件的更新。那么接下来，我们就具体分析一下组件的更新过程。

2023-08-11 11:41:31 147

转载第三篇：组件渲染：vnode 到真实 DOM 是如何转变的？

在 Vue.js 中，组件是一个非常重要的概念，整个应用的页面都是通过组件渲染来实现的，但是你知道当我们编写这些组件的时候，它的内部是如何工作的吗？从我们编写组件开始，到最终真实的 DOM 又是怎样的一个转变过程呢？这节课，我们将会学习 Vue.js 3.0 中的组件是如何渲染的，通过学习，你的这些问题将会迎刃而解。

2023-08-09 15:47:32 104

转载第二篇：导读-组件的实现：直击 Vue 核心的实现

相信作为一个 Vue.js 的开发者，最熟悉的应该就是组件了，我们开发 Vue.js 的项目，大部分时间都是在写组件，组件系统是 Vue.js 的一个重要概念，它是一种对 DOM 结构的抽象，我们可以使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。

2023-08-09 11:03:37 70

转载第一篇：一文看懂 Vue.js 3.0 的优化

我们的课程是要解读 Vue.js 框架的源码，所以在进入课程之前我们先来了解一下 Vue.js 框架演进的过程，也就是 Vue.js 3.0 主要做了哪些优化。Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念，它为后续做服务端渲染以及跨端框架 Weex 提供了基础。Vue.js 2.x 发展了很久，现在周边的生态设施都已经非常完善了，而且对于 Vue.js 用户而言，它几乎满足了我们日常开发的所有需求。

2023-08-07 14:50:37 128

转载第二十三篇：跟 React 学设计模式：掌握编程“套路”，打造高质量应用

这一讲我们将针对 React 中的设计模式进行探讨。与性能优化的视角相似，当我们谈论 React 设计模式时，实际上是在谈论“React 组件的设计模式”。在 React 设计模式中，最重要、也是最为大家所津津乐道的几个模式分别是：1. 高阶组件；2. Render Props；3. 剥离有状态组件与无状态组件

2023-08-06 14:19:58 68

转载第二十二篇：思路拓展：如何打造高性能的 React 应用？

React 应用也是前端应用，如果之前你知道一些前端项目普适的性能优化手段，比如资源加载过程中的优化、减少重绘与回流、服务端渲染、启用 CDN 等，那么这些手段对于 React 来说也是同样奏效的。不过对于 React 项目来说，它有一个区别于传统前端项目的重要特点，就是以 React 组件的形式来组织逻辑：组件允许我们将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

2023-08-05 14:57:34 225

转载第二十一篇：从 React-Router 切入，系统学习前端路由解决方案

React-Router 是 React 场景下的路由解决方案，本讲我们将学习 React-Router 的实现机制，并基于此提取和探讨通用的前端路由解决方案。本着尽快进入主题的原则，这里我用一个尽可能简单的 Demo 作为引子，帮助你快速地把握 React-Router 的核心功能。

2023-08-05 11:03:03 108

转载第二十篇：从 Redux 中间件实现原理切入，理解“面向切面编程”

在这一讲，我们首先以 redux-thunk 中间件为例，从“异步工作流”场景切入，认识了 Redux 中间件的工作模式。随后，结合 applyMiddleware 源码，对 Redux 中间件的整个执行机制进行了细致深入的分析，并在文末引入了对“面向切面”这一编程思想的介绍。行文至此，整个由 Redux 所牵出的核心知识体系也已经一览无余地呈现在你面前，相信你对 Redux 的理解又上了一个台阶。

2023-07-27 11:16:30 84

转载第十九篇：揭秘 Redux 设计思想与工作原理（下）

在上一讲，我们尝试对 Redux 源码进行拆解，认识了 Redux 源码的基本构成与主要模块，并深入了解了 createStore 这个核心模块的工作逻辑。这一讲，我们将更进一步，针对 dispatch 和 subscribe 这两个具体的方法进行分析，分别认识 Redux 工作流中最为核心的dispatch 动作，以及 Redux 自身独特的 “发布-订阅”模式。

2023-07-25 09:36:20 97 1

原创 2023年前端面试题汇总-数据结构（二叉树）

对于树这个结构，最常见的就是二叉树。我们除了需要了解二叉树的基本操作之外，还需要了解一些特殊的二叉树，比如二叉搜索树、平衡二叉树等，另外还要熟悉二叉树的遍历方式，比如前序遍历、中序遍历、后序遍历、层序遍历。另外还要知道二叉树的常用遍历的方式：深度优先遍历和广度优先遍历。

2023-07-09 23:22:14 594

原创 2023年前端面试汇总-React

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

2023-06-29 19:52:20 671

原创 2023年前端面试汇总-JavaScript

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型：Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

2023-06-19 18:37:29 903

原创 2023年前端面试汇总-计算机网络

超文本传输安全协议是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，利用SSL/TLS来加密数据包。HTTPS的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。HTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能，可以避免此类问题发生。安全层的主要职责就是对发起的HTTP请求的数据进行加密操作和对接收到的HTTP的内容进行解密操作。

2023-06-17 17:44:52 1825

原创 2023年前端面试汇总-CSS

实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，CSS3 中可以使用 transition 和 animation 来实现，HTML5 中的canvas也可以实现。除此之外，HTML5 提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。

2023-06-10 20:21:59 1347

原创 2023年前端面试汇总-HTML

src和href的区别，src和href都是用来引用外部的资源，它们的区别如下。src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在页面底部。href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。

2023-06-07 20:12:40 708

原创 2023年前端面试题汇总-数据结构（链表）

在计算机里，不保存在连续存储空间中，而每一个元素里都保存了到下一个元素的地址的数据结构，我们称之为链表（Linked List）。链表上的每一个元素又可以称它为节点（Node），而链表中第一个元素，称它为头节点（Head Node），最后一个元素称它为尾节点（Tail Node）。链表的结构定义中，包含了两个信息，一个是数据信息，用来存储数据的，也叫做数据域；另外一个是地址信息，用来存储下一个节点地址的，也叫做指针域。

2023-06-05 17:37:51 950 3

原创 2023年前端面试题汇总-性能优化

CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。典型的CDN系统由下面三个部分组成：1. 分发服务系统：最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时cache还负责与源站点进行内容同步，把列......

2023-06-03 15:07:01 1015

空空如也

空空如也