- 博客(35)
- 收藏
- 关注
RSS订阅
原创 最详细的Vue3+ThreeJS开发打包支持WebGL的移动端App教程
最详细的Vue3+ThreeJS开发项目打包支持WebGL渲染的移动端App教程最近公司的项目里要求开发一款具有三维应用的App项目,本来对于以前从未开发过支持三维APP前端程序员来说无疑是个挑战但既然有了这样的需求那就欣然地接受下来并扛在肩上,于是就开始大肆地收集了过往老前辈们此种开发的记录加之以个人不断踩坑,终于上天不负有心人按时完成了产品经理的这一系列需求,赶时周末作此记录来供后来者参考少踩点坑,若有描述不当之处敬请谅解与指出,谢谢打包方法一:Vue3项目采用Cordova集成crosswalk插
2020-11-15 01:03:36
6821
3
原创 VueTreeselect组件的async开启导致的请求一次比一次慢最终导致页面卡死问题之终极解决方案
代码】VueTreeselect组件的async开启导致的请求一次比一次慢最终导致页面卡死问题之终极解决方案。
2022-07-25 17:38:56
800
2
原创 OpenLayers学习教程(实现多边形绘制和自动划分并结合WFS协议增删改查GeoServer要素)
项目结构:Vue3+Ts+OpenLayers+WFS协议+GeoServer服务学习声明:假定你已经学会了Vue和Ts并了解一定的OpenLayers和GeoServer框架内容的使用首先下载项目源码:点击进入项目的github下载项目到本地后进入到项目位置打开cmd窗口执行npm i命令下载本项目相关依赖包启动你本地的GeoServer服务最后在项目位置上打开cmd窗口执行npm run server命令启动本项目...
2021-09-15 10:54:25
438
原创 浏览器与网络相关知识点回顾(前端进阶篇)
1.浏览器相关知识点1.1 说说浏览器和 Node 事件循环的区别？浏览器：浏览器环境下的 异步任务 分为 宏任务(macroTask) 和 微任务(microTask)常见的 task（宏任务） 比如：setTimeout、setInterval、script（整体代码）、 I/O 操作、UI 渲染等。常见的 micro-task 比如: new Promise().then(回调)、MutationObserver(html5新特性) 等。当满足执行条件时，宏任务(macroTas
2021-04-16 15:34:04
395
原创 CSS实现常用的图形
1.正方形#targetId{ width: 100px; height: 100px; background: orange; /*同上实现 height: 0; width: 0; border-width: 50px; border-style: solid; border-color: orange; */}2.长方形#targetId{ width: 200px; height: 100px; background: orange;
2021-03-29 14:52:17
185
原创 JavaScript知识点全面概括与总结(中)
61.cookie的理解cookie 是服务器提供的一种用于维护会话状态信息的数据，通过服务器发送到浏览器，浏览器保存在本地，当下一次有同源的请求时，将保存的 cookie 值添加到请求头部，发送给服务端。这可以用来实现记录用户登录状态等功能。cookie 一般可以存储 4k 大小的数据，并且只能够被同源的网页所共享访问。服务器端可以使用 Set-Cookie 的响应头部来配置 cookie 信息。一条cookie 包括了5个属性值 expires、domain、path、secure、HttpOnl
2021-03-23 15:47:35
199
原创 JavaScript知识点全面概括与总结(上)
①javascript的基本数据类型javascript 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 和 ES10 中新增的 BigInt 类型。Symbol 代表创建后独一无二且不可变的数据类型，它的出现个人认为主要是为了解决可能出现的全局变量冲突的问题。BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Numb
2021-03-23 12:03:02
154
原创 vue-cli方式完整搭建和配置uniapp+ts+sass项目总结
1.环境准备已安装node运行环境(未安装的自行百度安装)安装node后使用npm管理包命令执行下载cnpm和yarn(不懂请自行百度)2.搭建项目全局安装vue-cli，window窗口命令如下：npm install -g @vue-cli使用vue-cli创建uniapp项目，window窗口命令如下：vue create -p dcloudio/uni-preset-vue 你的项目名称(注意需要全小写)...
2021-03-18 11:55:52
2264
转载 Node学习之内置对象篇
分类一个文件一个模块；一个模块一个对象全局对象: 何时何处都能访问 。 全局对象就是在系统中核心对象: 放在node.exe中向系统索要,引入即可使用自定义对象: 按路径引入即可 自己创建的模块；导出、导入process（全局对象）每个系统的环境变量几乎都不一样，可以利用环境变量中的具体某个特定的值来区分不同的机器process.env是一个对象，我们可以通过其.属性名来获取具体的环境变量值设置一个特定的环境变量,以达到简单区分不同的机器,从而针对生产/开发环境运行不同的效果p
2021-03-03 09:23:28
210
转载 Vue源码解析(生命周期篇五)
初始化阶段(initInjections)1.前言本篇文章介绍生命周期初始化阶段所调用的第四个初始化函数——initInjections。从函数名字上来看，该函数是用来初始化实例中的inject选项的。说到inject选项，那必然离不开provide选项，这两个选项都是成对出现的，它们的作用是：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。并且provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以
2021-02-06 15:54:23
171
转载 Vue源码解析(生命周期篇四)
初始化阶段(initEvents)1.前言本篇文章介绍生命周期初始化阶段所调用的第二个初始化函数——initEvents。从函数名字上来看，这个初始化函数是初始化实例的事件系统。我们知道在Vue中，当我们在父组件中使用子组件时可以给子组件上注册一些事件，这些事件即包括使用v-on或@注册的自定义事件，也包括注册的浏览器原生事件（需要加 .native 修饰符），如下：<child @select="selectHandler" @click.native="clickHandler">&
2021-02-05 15:49:21
136
转载 Vue源码解析(生命周期篇三)
初始化阶段(initLifecycle)1.前言上篇文章中，我们介绍了生命周期初始化阶段的整体工作流程，以及在该阶段都做了哪些事情。我们知道了，在该阶段会调用一些初始化函数，对Vue实例的属性、数据等进行初始化工作。那这些初始化函数都初始化了哪些东西以及都怎么初始化的呢？接下来我们就把这些初始化函数一一展开介绍，本篇文章介绍第一个初始化函数initLifecycle。2.initLifecycle函数分析initLifecycle函数的定义位于源码的src/core/instance/lif
2021-02-05 10:57:28
163
转载 Vue源码解析(生命周期篇二)
初始化阶段(new Vue)1.前言上篇文章中介绍了Vue实例的生命周期大致分为4个阶段，那么首先我们先从第一个阶段——初始化阶段开始入手分析。从生命周期流程图中我们可以看到，初始化阶段所做的工作也可大致分为两部分：第一部分是new Vue()，也就是创建一个Vue实例；第二部分是为创建好的Vue实例初始化一些事件、属性、响应式数据等。接下来我们就从源码角度来深入分析一下初始化阶段所做的工作及其内部原理。2.new Vue()都干了什么初始化阶段所做的第一件事就是new Vue()创建一个Vu
2021-02-04 17:15:18
220
转载 Vue源码解析(生命周期篇一)
综述1.前言就像人一样，从出生到死亡。在这一过程里会发生许许多多的事，例如设置数据监听，编译模板，组件挂载等。在Vue中，把Vue实例从被创建出来到最终被销毁的这一过程称为Vue实例的生命周期，同时，在Vue实例生命周期的不同阶段Vue还提供了不同的钩子函数，以方便用户在不同的生命周期阶段做一些额外的事情。那么，接下来的几篇文章我们就从源码角度深入剖析一下一个Vue实例在从生到死的生命周期里到底都经历了些什么，每个阶段都做了哪些事情。2.生命周期流程图下图是Vue官网给出的Vue实例的生命周期
2021-02-04 15:37:33
317
转载 Vue源码解析(模板编译篇七)
总结1.前言到现在，模板编译的三大阶段就已经全部介绍完毕了，接下来本篇文章，就以宏观角度回顾并梳理一下模板编译整个流程是怎样的。首先，我们需要搞清楚模板编译的最终目的是什么，它的最终目的就是：把用户所写的模板转化成供Vue实例在挂载时可调用的render函数。或者你可以这样简单的理解为：模板编译就是一台机器，给它输入模板字符串，它就输出对应的render函数。我们把模板编译的最终目的只要牢记在心以后，那么模板编译中间的所有的变化都是在为达到这个目的而努力。接下来我们就以宏观角度来梳理一下模
2021-02-04 14:59:59
145
转载 Vue源码解析(模板编译篇六)
代码生成阶段1.前言前几篇文章，我们把用户所写的模板字符串先经过解析阶段解析生成对应的抽象语法树AST，接着再经过优化阶段将AST中的静态节点及静态根节点都打上标记，现在终于到了模板编译三大阶段的最后一个阶段了——代码生成阶段。所谓代码生成阶段，到底是要生成什么代码？答：要生成render函数字符串。我们知道Vue实例在挂载的时候会调用其自身的render函数来生成实例上的template选项所对应的VNode，简单的来说就是Vue只要调用了render函数，就可以把模板转换成对应的虚拟DO
2021-02-04 13:46:26
151
转载 Vue源码解析(模板编译篇五)
优化阶段1.前言前几篇文章中，我们介绍了模板编译流程三大阶段中的第一阶段模板解析阶段，在这一阶段主要做的工作是用解析器将用户所写的模板字符串解析成AST抽象语法树，理论上来讲，有了AST就可直接进入第三阶段生成render函数了。其实不然，Vue还是很看重性能的，只要有一点可以优化的地方就要将其进行优化。在之前介绍虚拟DOM的时候我们说过，有一种节点一旦首次渲染上了之后不管状态再怎么变化它都不会变了，这种节点叫做静态节点，如下：<ul> <li>我是文本信息</l
2021-02-03 17:50:41
207
转载 Vue源码解析(模板编译篇四)
模板解析阶段(文本解析器)1.前言上篇文章中我们说了，当HTML解析器解析到文本内容时会调用4个钩子函数中的chars函数来创建文本型的AST节点，并且也说了在chars函数中会根据文本内容是否包含变量再细分为创建含有变量的AST节点和不包含变量的AST节点，如下：// 当解析到标签的文本时，触发charschars (text) { if(res = parseText(text)){ let element = { type: 2,
2021-02-02 17:52:39
144
转载 Vue源码解析(模板编译篇三)
模板解析阶段(HTML解析器)1.前言在模板解析阶段主线函数parse中，根据要解析的内容不同会调用不同的解析器，而在三个不同的解析器中最主要的当属HTML解析器，为什么这么说呢？因为HTML解析器主要负责解析出模板字符串中有哪些内容，然后根据不同的内容才能调用其他的解析器以及做相应的处理。本篇文章就来介绍一下HTML解析器是如何解析出模板字符串中包含的不同的内容的。2.HTML解析器内部运行流程源码中，HTML解析器就是parseHTML函数，在模板解析主线函数parse中调用了该
2021-02-02 16:30:42
170
2
转载 Vue源码解析(模板编译篇二)
模板解析阶段(整体运行流程)1.整体运行流程在模板解析阶段主要做的工作是把用户在标签内写的模板使用正则等方式解析成抽象语法树（AST）。而这一阶段在源码中对应解析器（parser）模块。解析器，顾名思义，就是把用户所写的模板根据一定的解析规则解析出有效的信息，最后用这些信息形成AST。我们知道在模板内，除了有常规的HTML标签外，用户还会有一些文本信息以及在文本信息中包含过滤器。而这些不同的内容在解析起来肯定需要不同的解析规则，所以解析器不可能只有一个，它应该除了有解析常规HTML的HTML解析器，
2021-02-02 13:42:27
96
转载 Vue源码解析(模板编译篇一)
模板编译综述1.前言前几篇文章中我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程，而虚拟DOM存在的必要条件是得先有VNode，那么VNode又是从哪儿来的呢？这就是接下来几篇文章要说的模板编译。你可以这么理解：把用户写的模板进行编译，就会产生VNode。2.什么是模板编译在日常开发中，我们把写在<template></template>标签中的类似于原生HTML的内容称之为模板。为什么说是“类似于原生HTML的内容”而不是“就是HTM
2021-02-02 11:45:41
192
转载 Vue源码解析(虚拟DOM篇四)
优化更新子节点1.前言上一篇文章中，我们介绍了当新的VNode与旧的oldVNode都是元素节点并且都包含子节点时，Vue对子节点是先外层循环newChildren数组，再内层循环oldChildren数组，每循环外层newChildren数组里的一个子节点，就去内层oldChildren数组里找看有没有与之相同的子节点，最后根据不同的情况作出不同的操作。结尾我们也说了，这种方法虽然能够解决问题，但是还存在可优化的地方。比如当包含的子节点数量很多时，这样循环算法的时间复杂度就会变的很大，不利于性能提升
2021-02-02 10:35:09
97
转载 Vue源码解析(虚拟DOM篇三)
更新子节点1.前言上一篇文章中，我们了解了Vue中的patch过程，即DOM-Diff算法。并且知道了在patch过程中基本会干三件事，分别是：创建节点，删除节点和更新节点。创建节点和删除节点都比较简单，而更新节点因为要处理各种可能出现的情况所以逻辑略微复杂一些，但是没关系，我们通过分析过程，对照源码，画逻辑流程图来帮助我们理解了其中的过程。最后我们还遗留了一个问题，那就是在更新节点过程中，新旧VNode可能都包含有子节点，对于子节点的对比更新会有额外的一些逻辑，那么在本篇文章中我们就来学习在Vue中
2021-02-02 10:34:54
107
转载 Vue源码解析(虚拟DOM篇二)
Vue中的DOM-Diff1.前言上一篇文章介绍VNode的时候我们说了，VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点，然后就可以对比新旧两份VNode，找出差异所在，然后更新有差异的DOM节点，最终达到以最少操作真实DOM更新视图的目的。而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程。DOM-Diff算法是整个虚拟DOM的核心所在，那么接下来，我们就以源码出发，深入研究一下Vue中的DOM-Diff过程是怎样的。2.patch过程在Vue中
2021-02-02 10:34:46
104
转载 Vue源码解析(虚拟DOM篇一)
虚拟DOM1.虚拟DOM简介什么是虚拟DOM?所谓虚拟DOM，就是用一个JS对象来描述一个DOM节点，像如下示例：<div class="a" id="b">我是内容</div>{ tag:'div', // 元素标签 attrs:{ // 属性 class:'a', id:'b' }, text:'我是内容', // 文本内容 children:[] // 子元素}把组成一个
2021-02-02 10:34:24
101
转载 Vue源码解析(变化侦测篇二)
Array的变化检测1.前言为什么Object数据和Array型数据会有两种不同的变化侦测方式？因为对于Object数据我们使用的是JS提供的对象原型上的方法Object.defineProperty，而这个方法是对象原型上的，所以Array无法使用这个方法，所以我们需要对Array型数据设计一套另外的变化侦测机制，虽然对Array型数据设计了新的变化侦测机制，但是其根本思路还是不变的。那就是：还是在获取数据时收集依赖，数据变化时通知依赖更新。2.在哪里收集依赖如果先把用到Array型
2021-02-02 10:33:40
126
转载 Vue源码解析(变化侦测篇一)
1.数据驱动视图什么是数据驱动视图?首先可以将数据理解为状态，而视图就是用户可直观看到页面，因为页面不可能是一成不变的即它应该是动态变化的，而它的变化也不应该是无迹可寻的，它或者是由用户操作引起的，亦或者是由后端数据变化引起的，不管它是因为什么引起的，都可以统称为它的状态变了，它由前一个状态变到了后一个状态，页面也就应该随之而变化。可归结为表达公式： UI = render(state)上述中的状态state是输入，页面UI输出，状态输入一旦变化了，页面输出也随之而变化。即把这种特性称之为数据驱
2021-02-02 10:33:14
161
原创 数据结构与算法----TypeScript版本(查找篇)
七种常见的查找算法0.概述查找是在大量的信息中寻找一个特定的信息元素，在计算机应用中，查找是常用的基本运算，例如编译程序中符号表的查找。本文简单概括性的介绍了常见的七种查找算法，说是七种，其实二分查找、插值查找以及斐波那契查找都可以归为一类——插值查找。插值查找和斐波那契查找是在二分查找的基础上的优化查找算法。除了前面所述的查找还有哈希查找和树表查找。查找的定义：根据给定的某个值，在查找表中确定一个其关键字等于给定值的数据元素（或记录）。查找算法分类：静态查找和动态查找；注：静态或者动态都
2021-02-02 10:04:23
454
1
原创 TypeScript实现的24种设计模式
设计模式的六大原则0.总原则: 开闭原则（Open Close Principle）开闭原则就是说对扩展开放，对修改关闭。在程序需要进行拓展的时候，不能去修改原有的代码，而是要扩展原有代码，实现一个热插拔的效果。所以一句话概括就是：为了使程序的扩展性好，易于维护和升级。1.单一职责原则 （Single Responsibility Principle）不要存在多于一个导致类变更的原因，也就是说每个类应该实现单一的职责，如若不然，就应该把类拆分。2.里氏替换原则（Liskov Substit
2021-01-28 18:27:52
1428
原创 数据结构与算法----TypeScript版本(排序篇)
十种经典排序算法0 算法概述0.1 算法分类:排序算法可以分为两大类:1.比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。2.非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。0.2 算法复杂度:0.3 相关描述概念:1.稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。2.不稳定：如果a原本在b的前面，而a=b，排序之
2021-01-21 14:48:57
1208
原创 JQuery设计模式之源码分析(三)
3.1jQuery中$.Callbacks的函数对象的实现$.Callbacks作用: $.Callbacks用于管理函数队列。$.Callbacks的使用: 我们通过调用$.Callbacks(params)获取到一个Callbacks实例内部API分别有:add => 向内部队列添加函数fire依次执行队列里的函数构造参数分别有:“stopOnFalse” => 内部队列里的函数是依次执行的,当某个函数的返回值是false时停止继续执行剩下的函数“memo
2021-01-17 18:35:23
159
原创 JQuery设计模式之源码分析(二)
2.1问题探究分析1.如何把创建的DOM节点包装成jQuery对象?2.jQuery实例对象length属性的作用?3.merge方法的应用场景有哪些?4.$(document).ready() 与$(function(){})的关系?2.2.1jQuery的选择器实现----创建DOM节点结合第一节的代码实现$("<tagName>")的形式创建一个dom标签节点的功能。在原先代码的基础上先定义一个parseHTML方法和merge方法(parseHTML方
2021-01-17 18:12:04
150
原创 JQuery设计模式之源码分析(一)
1.1共享原型设计1.2熟知JS的命名规则变量的命名规则:标识符只能由字母，数字，下划线，和$组成;数字不可以作为标识符的首字母;对象属性的命名规则:通过[]操作符为对象添加属性时,属性名称可以是任何字符串(包括只包含空格的字符串和空字符串);通过.操作符为对象添加属性时,属性名称必须是合法的标识符名称;如果属性名包含非法的标识字符,则只能采用obj[“propertyName”]的形式;如果属性名是合法的标识符,读取时即可以采用obj.propertyName，也可以采用obj[
2021-01-17 12:46:56
193
原创 elementui table fixed错位Vue的两种解决方法
elementui table fixed错位的两种解决方法方法一:监听table数据每次数据得到或改变时重新渲染 /* 监听table数据对象 */watch: { tableData(val) { this.doLayout(); }}methods: { /* 重新渲染table组件 */ doLayout(){ let that = this this.$nextTick(() => { that.$refs.table.doLayou
2021-01-11 11:04:27
5306
2
原创 TypeScript单文件使用ES6语法编译
TypeScript文件使用ES6语法编译tsc --target es6 --module commonjs 你的文件名.ts
2020-11-24 15:29:04
1573
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人