- 博客(30)
- 收藏
- 关注
RSS订阅
原创 AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
总体介绍最近由于工作室项目需要做一个数据可视化平台，这个平台最终是交由国外人使用的。所以需要使用到google map来实现。因为之前用过AMap + echarts实现数据可视化，所以觉得做这个项目是洒洒水得啦。但是当真正做起来才发现坑有点小大。坑主要在于迁徙图的实现。因为这个项目是合作项目，在谈需求的时候，双方商业互夸后，然后谈到迁徙图。问道这个这个项目的迁徙图和普通的迁徙图的有什么区别。老...
2019-06-25 01:06:01
7369
2
原创 学习Vue的SSR，这可能是最好的教程
为了追求更好的用户体验，很多公司的业务页面都会采用SSR进行渲染，将渲染的结果返回给浏览器，浏览器能够不经过实例化Vue，直接解析HTML代码展示，这样可以减少首屏时间，提高用户体验。0.Server Side Render使用0.1上手SSR Vue提供一个npm包叫做vue-server-renderer，它是在vue源码中的server目录中单独打包出来作为服务端渲染的依赖包，包的名称已经讲清楚了它的作用：作为一个服务端渲染器，将Vue实例中所有需要展示的内容进行渲染。 举一个很简单的服务
2020-06-27 16:28:43
2658
原创 解析Vue Router源码
Router的从初始化到触发更新时候的流程如果没有相应的Router源码阅读经历（如React Router的阅读经历），那么可能不需要通过了解整个流程就可以知道大致的实现方式，但是对于没有类似的经历的，那么很难做到窥一斑而知全豹。如果一开始就直接按点来进行讲解的话，那么很多时候都会很懵，因为不知道作用。所以在进行讲解之前，先看一下Vue Router的工作流程。初始化在项目初始化的时候，会先进行VueRouter的安装，只需要记住安装的时候会在Vue中混入了一个生命周期钩子函数，将根组件的_rout
2020-06-03 14:37:39
425
原创 帮你更好理解Vue3.0响应式系统（Reactivity）源码！
针对于现在存在的很多源码解析文章，以及个人之前的文章中，会存在以下问题：示例代码太多这可能是源码解析写作的通病吧。其实大多数人从vue和react这样框架的生命周期API就可以大致猜出内部流程是什么，示例代码太多反而会产生枯燥感，而且部分示例代码又长又臭，甚至不得不加上大段的注释，严重降低了阅读体验。解析流水账既然代码是给计算机看的流水账，那解析就不能再是给人看的流水账。对于源码解析来说...
2020-04-29 15:10:41
2026
原创 从源码看Vue中模板的自定义事件、DOM事件的绑定过程
Vue中事件的基础1.Vue中如何绑定事件 Vue框架相比于React框架，提供了模板的功能，而模板与HTML代码极为相似，这使得我们可以花费很少的时间从原生到Vue框架的过渡，这是Vue的优点之一。不过模板到处理的时候只是一个字符串，而不是真正的HTML代码。所以如果我们以原生的方式来对节点进行监听的话，很可能会出错。这是因为有可能模板还没有渲染到页面上。不过，Vue推荐使用在模板上进行事...
2020-04-14 09:13:19
778
原创 Vue组件是如何进行处理v-on/@定义的事件的
我们在使用Vue框架的时候，最亲切的感觉是莫过于它将组件开发中的HTML、CSS、JS代码分割开来，保持着原生开发的习惯。并且template语法提供比原生更加强大的功能，对于事件监听来说，他提供@click.left、@click.preventDefault等等修饰方法，有没有想过框架的内部是如何实现的呢？下面就来讲解，尽量少讲代码，多讲流程和方法，因为这一部分代码就很多中情况考虑的多，多讲代...
2020-02-25 16:24:39
604
原创 提高浏览器性能-preload、prefetch、prerender
1.preloadpreload是浏览器的一种预加载资源模式，它的作用是将资源率先加载，然后等到需要的时候再去使用，是一种资源的加载和解析解耦的方法。它有如下特点：具有优先级，但是并不会阻塞onload事件：preload在网页中具有强制加载的功能，所以它的加载具有优先级，不过它仅仅是加载资源而已，并不会执行，还需要script资源进行加载。它设计的目的是为当前页面的资源进行预加载，跳转页...
2020-02-23 01:15:55
1005
原创 Vue3.0代理如何对数组的原生方法进行观察
前言在本文章学习之前，你需要掌握的内容有：ProxyReflect1.ES6数组的原生方法有哪些？ES6数组的操作的原生方法有如下：Vue3.0相比于Vue2.0支持的观察的数组的原生方法更多，并且不需要通过写特定的方法来进行支持，对数组原生方法的观测可以合并到对数组下标、对象属性的响应代码里面。这是什么原理呢？这篇文章就来给你们揭秘！2.数组的代理对象一些有趣的现象首先，我...
2020-02-20 22:27:29
2781
原创 带你阅读Vue3.0响应式系统源码5-总结
1.整个响应式系统的架构1）整体的文件结构baseHandlers.ts // 基础型对象代理handlerscollectionHandlers.ts // 容器型对象代理handlerscomputed.ts // 计算选项处理，由于computed选项最后会处理成为一个响应式数据effect.ts // 影响因...
2020-02-20 22:25:27
280
原创 带你阅读Vue3.0响应式系统源码4-依赖绑定以及触发依赖的执行策略
主题：依赖绑定以及触发依赖的执行策略ps：多代码预警，本节因为涉及到的流程重要代码比较多，所以贴出了核心代码。1.代理对象和影响因子effect如何绑定？（track） 上一篇文章讲的是响应型数据的诞生。而前面说过，响应数据的诞生和它绑定观察者是两回事。那么响应型对象和影响因子effect是如何进行绑定依赖的呢？依赖的添加是在track方法中，下面来进行讲解：什么时候进行调用track...
2020-02-20 22:24:26
368
原创 带你阅读Vue3.0响应式系统源码3-响应型数据诞生
主题：响应型数据诞生（不考虑ReadOnly响应数据）1.哪些类型的数据会被设置成响应型数据？ Vue2.0中能够被设置成响应型数据的无非就两种：纯对象（说白了就是new Object()或者{}或者Object.create(null)等定义的键值对对象）、数组。而Vue3.0中能够被设置成响应型数据的多了容器型对象：// makeMap方法是将字符串用String.prototype....
2020-02-20 22:23:26
389
原创 带你阅读Vue3.0响应式系统源码2-对象及数据结构分析
主题：对象及数据结构分析1.全局实例对象1）存放所有对象依赖筐的实例对象（在effect.ts文件顶部） 存放所有对象依赖筐的实例对象只有一个，叫做targetMap，它是分成三层的树状数据结构，第一二层是Map数据类型，第三层是Set数据类型。它大体上是按照如下的结构进行组织的：在讲解上面数据结构之前，先说明清楚两点：在Vue的数据响应系统中，数据对象变成响应型数据和被观察的数是...
2020-02-20 22:22:37
476
原创 带你阅读Vue3.0响应式系统系列源码1
主题：绪论引言 首先笔者问自己，为什么要阅读一下你这个教程，网络上有很多教程，然而这个教程有什么亮点？ 网络上是有不少Vue3.0、Vue2.0源码阅读的教程，我也有去看了一下，有的写得也很不错，但是他们有一个共同的点，就是逐行代码进行解释讲解。这样好不好？好，但是还是差了点东西：逐行代码进行讲解的话，阅读的人能够很清楚知道每一行代码的作用、每一个方法的作用。但是东西讲的越细致，就很难有...
2020-02-20 22:21:30
641
原创 Vue3.0响应数据对象的构建过程
1.数据与影响因子Effect互相绑定的存储结构（targetMap）构建代码/** * @description 追踪就是依赖的添加过程，相当于2.0的observer过程 * @param target 代理对象 * @param type 观察的类型，在开发环境中使用 * @param key 想要被观察的属性，也就是effect函数中访问的对象的属性 */functio...
2020-02-20 21:38:39
711
原创 浏览器跨域问题、解决跨域问题的方法
浏览器的同源策略浏览器的请求的同源策略是为了安全而设定的规则，防止了很多的外源攻击。什么才是跨域？跨协议跨域名：包括主域名和子域名。跨端口号需要同源才能访问的操作document.cookie、localStorage、indexDBajax不需要同源访问的操作<img src><linked href><script>如何...
2020-02-20 21:36:15
641
1
原创 浅谈js执行的AO/VO
浅谈AO/VO详解首先说明一下AO和VO的含义AO：Activive Object，即函数的活动对象。VO：Variable Object，即变量对象。它们的作用是帮助js引擎在引用变量的时候能够去顺利找到变量。并且它们之间的联系可以实现作用域链。VO在执行函数的时候，会经历执行上下文的创建和代码的执行。如下图。我们会先进行上下文的创建，创建VO、通过[Scope]属性指向外层...
2020-02-18 20:50:35
5528
原创 浏览器输入一处网址的时候，会发生什么事情
浏览器输入一处网址的时候，会发生什么事情1.请求部分首先判断请求的地址是不是一个域名，如果是域名，则进入步骤2地址是一个域名，需要向DNS服务器进行查询域名所对应的主机号，因为只有主机号才能找到互联网中的主机，首先确定采取的是运输层的UDP协议，即应用层发一个报文下去UDP发送请求DNS查询的时候，会优先向本地域名服务器进行查询（可能不止一个），如果查询不到的话，会采用递归查询的方式向...
2020-02-12 12:43:21
349
原创 浏览器请求缓存机制以及流程
浏览器缓存机制浏览器请求数据过程 浏览器在多次访问同一个网页的时候，有时候并不会每次访问都去请求值，而是会对一些固定的数据进行缓存，如图片、js文件、css文件等。这些很大程度上都是不会改变的，所以需要有缓存机制。1.浏览器请求数据的流程首先查看本地是否有缓存，如果有缓存，则进行读取缓存，否则跳到3读取缓存的时候进行判断是否过期，如果没有过期的话，直接进行读取，流程结束。如果过期的话...
2020-02-12 12:42:39
671
原创 ES6代理模式实现高性能对象深复制
ES6代理模式实现对象深复制总体介绍：对于对象深复制，要实现高性能的话，需要减少必要的时间和空间花费，那么代理模式是如何在时间和空间上进行减少开支的呢？共享读：复制的对象的数据在没有修改之前，读取复制后的对象的值就会把读请求重定向到被复制的对象上面去，只有当数据被修改后，才会从缓存中进行读取。懒代理：在初始化的时候，不会进行全部代理，而是在访问的时候进行代理，这样就使得cpu的压力分配到...
2020-02-07 16:25:27
335
原创 MVC、MVP、MVVM特点及三者的区别
MVC、MVP、MVVM特点及三者的区别简介MV*标题中所介绍的三种模式都是隶属于MV*模式。后两者（MVP、MVVM）是MVC模式的衍生物。M指的是Model，V指的是View，这两者在三个模式中的定义是一致的，所以我先介绍Model和View吧。ModelModel的中文翻译是模型，那么，模型在模式中指的是什么？指的是一些数据的存储对象。比如一个人的信息就是一个模型，这个模型里面可以...
2020-02-06 23:44:27
573
原创 理清Vue响应式系统中的Watcher
理清Vue响应式系统中的Watcher一、什么是响应系统中的Watcher，它的作用是什么？响应系统中的Watcher即这个系统的观察者，它是响应系统中观察者模式的载体，当响应系统中的数据发生改变的时候，它能够知道并且执行相应的函数以达到某种业务逻辑的目的。打个比方，如果你是一个商家，要寄一批货分别给不同的客户，那么watcher就是一个个快递员，发出的动作就是数据发生改变。你只需要负责寄出去...
2020-01-19 00:18:58
1633
原创 从源码上来看，Vue对象的每个生命周期钩子前都干了什么？
从源码上来看，Vue对象的每个生命周期钩子前都干了什么？一、从官方文档查看的Vue的生命周期钩子上面的图片是从Vue的官网里面找到的，如果单从这张图去查看生命周期干了什么，我们只能知道：在beforeMount前会对给出的模板进行编译（仅仅是在用Vue.js打包的时候会进行编译，在用脚手架的时候，在打包过程中会把模板编译成为渲染函数，这样可以避免每次创建一个Vue对象的时候进行编译模板）...
2020-01-18 20:04:58
976
原创 Vue源码之数据响应系统
Vue源码之数据响应系统响应系统的基本思路接下来就是数据响应的基本思路，我们先看一下下面的例子：在Vue对象中，我们可以使用$watch来观察一个字段，当这个字段的值发生变化的时候执行制定的观察者。如下：const ins = new Vue({ data: { a: 1 }})ins.$watch('a', () => { console.log('修改了...
2020-01-18 20:02:59
244
原创 ES6代理模式实现Vue数据响应系统
ES6代理模式实现Vue数据响应系统1.工具准备需要的环境如下：Node环境（babel）TypeScript需要的知识储备：《ES6标准入门》2.思路2.1总体结构 该实践的总体结构是以一个Watcher实现类为载体，模拟Vue的方式，将需要进行响应的数据（data）、渲染函数（render）、挂载的dom节点输入进来。然后对传参送进来的data的属性进行改变的时候，...
2020-01-18 19:59:51
390
原创 在TypeScript下，Vue项目如何写出更可维护性代码？
在TypeScript下，Vue项目如何写出更可维护性代码？一、目录文章目录在TypeScript下，Vue项目如何写出更可维护性代码？一、目录二、总体分析1.为什么要用TypeScript来构建我们的项目？2.为什么TypeScript它就更可维护了？3.在TypeScript下，Vue项目和在JavaScript下的Vue项目有什么不同？三、具体实现1.api层（接口调用层）2.store...
2019-12-13 16:10:17
1235
原创 Vue数据响应系统的代理模式实现
文章目录Vue数据响应系统的代理模式实现1.工具准备2.思路2.1总体结构2.2细节实现3.代码Vue数据响应系统的代理模式实现1.工具准备需要的环境如下：Node环境（babel）TypeScript需要的知识储备：《ES6标准入门》2.思路2.1总体结构 该实践的总体结构是以一个Watcher实现类为载体，模拟Vue的方式，将需要进行响应的数据（data）、渲染函...
2019-09-26 19:33:16
335
原创 系统多线程介绍
一. 线程的基本概念什么是线程线程可以看做是某个进程中的一个控制流，一个进程至少会包括一个线程。并且线程是进程的复制品，但是线程是和进程进行共享内存的，这也就是线程比进程轻量的原因。线程的状态线程的状态有以下几种：就绪状态：这时候系统可以让线程干任何事情。运行状态：线程正在干活休眠状态：系统没有分配给线程任何活，这时候线程就不活僵尸状态：线程被终止，但是没有进程进行回收，这时候线...
2019-08-12 08:43:04
257
原创 Node + TypeScript 使用装饰器构造路由表
文章目录如何用Node和TypeScript配置RouterRouter简介通用的解决办法一对一映射自然路由映射TypeScript的解决办法使用自然路由映射使用1对1映射方式通过配置方式通过装饰器进行构建路由表装饰器使用例子装饰器引入如何构建router装饰器总结全部代码如何用Node和TypeScript配置RouterRouter简介 Router，即路由。路由的作用是存储与转发。如...
2019-08-03 12:29:37
1111
原创 Vue源码之数据响应系统介绍
总体介绍这篇博客仅仅只对与vue这个文章目录总体介绍1. Vue数据响应的初始化何为数据响应初始化，以及数据响应初始化入口数据相应初始化的策略2. 以一个小demo来说说Vue数据响应的做法3. Vue数据响应的关键点的解释4. Vue数据响应的运作流程1. Vue数据响应的初始化何为数据响应初始化，以及数据响应初始化入口数据相应初始化的策略2. 以一个小demo来说说Vue数据响应...
2019-07-17 13:41:21
315
原创 谈谈NodeJS异步
同步与异步一谈起Node，了解过的人会想起是利用异步IO实现高性能后台，那么什么是异步IO呢？异步IO与同步IO的区别是什么呢？举个例子：在生活中，大家每天都会用到微信来进行聊天。那么某个时间有两个人来跟你聊天，同步与异步会有不同的表现（单线程的情况下）。同步：同步的做法是先选择一个比较先与你聊天的，把整个天都给聊完了，最后确定对方与你没有什么好聊的。ok接下去跟另外一个人进行聊天。异步...
2019-03-31 00:57:59
3617
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人