2020年07月_没有什么时间是比现在合适的

转载计算机网络基础

计算机网络基础什么是计算机网络协议一系列统一的标准，这些标准称之为互联网协议，互联网的本质就是一系列的协议，总称为‘互联网协议’（Internet Protocol Suite)。互联网协议的功能：定义计算机如何接入internet，以及接入internet的计算机通信的标准。osi七层协议互联网协议按照功能不同分为osi七层或tcp/ip五层或tcp/ip四层我们将应用层，表示层，会话层并作应用层，从tcp／ip五层协议的角度来阐述每层的由来与功能，搞清楚了每层的主要协议，就理解了整

2020-07-31 16:47:53 115

原创 gulp 项目构建， process.argv 转换成对象的两种方法

方法一// fetch command line argumentsconst arg = ((argList) => { let arg = {}, a, opt, thisOpt, curOpt; for (a = 0; a < argList.length; a++) { thisOpt = argList[a].trim(); opt = thisOpt.replace(/^\-+/, ""); if (opt =.

2020-07-21 09:53:48 333

原创 VSCode 中 flow 泛型后面的代码高亮显示丢失问题解决

Vue.js 的 global-api 中的 index.js 有如下一段代码，这里使用了 flow 的特性，泛型，出现的问题就是后面的代码失去了高亮显示，这是因为 VSCode 默认不识别 flow 的原因。解决方法下载一个插件 Babel JavaScript安装完成之后就可以高亮显示了，但是会出现另一个问题，就是泛型之后的代码 Ctrl + 鼠标左键不能正常跳转了。...

2020-07-21 06:38:08 439

原创 VSCode 中 js 文件类型注释报错的问题解决

在阅读 Vue.js 源码的时候遇见的一个问题，本来可以忽略的玩意，但是报错的波浪线，如鲠在喉实在受不了，解决之。报错说明Type annotations can only be used in TypeScript files.ts(8010)类型注释只能用于TypeScript文件。ts(8010)出现的位置就是 vue 打包入口文件中的类型注释，如图。解决方式打开 VSCode 的 settings.json 文件，添加如下代码：{ // ... "javascript.valid

2020-07-20 20:24:59 4050 1

转载 minimist轻量级的命令行参数解析引擎

nodejs的命令行参数解析工具有很多，比如：argparse、optimist、yars、commander。optimist和yargs内部使用的解析引擎正是minimist，如果你喜欢轻量级的技术，那么minimist足够简单好用，代码量也很少（只有几百行），非常适合研读。minimist的特性比较全面：short optionslong optionsBoolean 和 Number类型的自动转化option alias先看一下minimist整体的解析过程，代码大致是：for (

2020-07-20 18:10:35 7861

原创 Vue.js 源码阅读中遇到的知识点记录

阅读 Vue.js 中遇到的小知识点，虽然很多知识点都可能会牵连出很多问题，但是为了不影响源码的阅读进程，就用到什么学习什么并以此记录（随缘更新）。Rollup 中的命令行参数 environmentrollup -c --environment INCLUDE_DEPS,BUILD:production-c 的作用是指定 rollup 的配置文件，如果这个参数没有传值，会默认使用 rollup.config.js 文件作为配置文件。--environemnt 通过 process.ENV

2020-07-20 13:09:46 155

原创 3-1-14-Snabbdom Modules源码

Snabbdom Modules 源码patch() -> patchVnode() -> updateChildren()patch() 函数中所作的任务就是，对比两个虚拟节点，找到差异进行 DOM 操作。patch() 中的所有 DOM 操作：创建 DOM 元素，移除 DOM 元素，更新 DOM 内的子节点以及文本内容。Snabbdom 为了保证核心库的精简，把处理元素的属性/事件/样式等工作，放置到模块中。模块可以按照需要引入模块的使用可以查看官方文档

2020-07-13 14:01:52 108

原创 3-1-13-Snabbdom 源码解析

Snabbdom 源码解析如何学习源码先宏观了解带着目标看源码看源码的过程不求甚解调试参考资料快捷键F12 切换到定义的位置ALT + 左箭头返回到跳转到之前的代码位置Snabbdom 的核心使用 h() 函数创建 JavaScript 对象(VNode)描述真实 DOMinit() 设置模块，创建 patch()patch() 比较新旧两个 VNode把变化的内容更新到真实 DOM 树上Snabbdom 源码源码地址https://github.com

2020-07-13 14:01:08 200

原创 3-1-12-Snabbdom 之模块

模块snabbdom 的核心库并不能处理元素的属性/样式/事件等，如果处理需要使用模块。常用模块官方提供的 6 个模块attributes设置 DOM 元素的属性，使用 setattribute()处理布尔类型的属性props和 attributes 模块相似，设置 DOM 元素的属性 element[attr] = calue不处理布尔类型的属性class切换类样式注意：给元素设置样式是通过 sel 选择器dataset设置 data-* 的自定义

2020-07-13 14:00:33 192

原创 3-1-11-Snabbdom 的基本使用

Snabbdom 的基本使用创建项目打包工具为了方便使用 parcel创建项目，并安装 parcelmd snabbdom-democd snabbdom-demoyarn init -yyarn add parcel-bundler配置 package.json 的 scripts"scripts": { "dev": "parcel index.html --open", "build": "parcel build index.html"}创建目录结构├

2020-07-13 14:00:03 287

原创 3-1-10-Virtual DOM

Virtual DOM了解什么是虚拟 DOM ，以及虚拟 DOM 的作用Snabbdom 的基本使用Snabbdom 的源码解析什么是虚拟 DOM ？Virtual DOM （虚拟 DOM）是由普通的 JS 对象来描述 DOM 对象，因为不是真实的 DOM 对象，所以叫 Virtual DOM由于真实 DOM 的成员非常的多，所以创建一个 DOM 对象的成本是非常高的。如果用一个普通的 JS 对象来描述真实 DOM 就会节省大量的开销。为什么使用虚拟 DOM手动操作 DOM 比较

2020-07-13 13:59:37 214

原创 3-1-9-Vue 响应式原理模拟

Vue 响应式原理模拟整体分析Vue 构造函数需要把 data 中的成员转化成 getter/setter 并注入到vue实例中，这样就可以直接通过 this.propertyname 获取和更改。data 中的成员被记录到了 data中，并且被转换成了getter/setter。data 中，并且被转换成了 getter/setter 。data中，并且被转换成了getter/setter。data中的 setter 是真正监听数据变化的地方。$options 构造函数的参数会被记录到 $o

2020-07-09 20:08:11 142

原创 3-1-8-观察者模式

观察者模式Vue 的响应式机制中使用了观察者模式。观察者模式和发布订阅模式的区别是没有消息中心只有发布者和订阅者，并且发布者要知道订阅者的存在。观察者（订阅者） – Watcherupdate(): 当事件发生时具体要做的事情目标（发布者） – Depsubs 数组：存储所有的观察者addSub()：添加观察者notify()：当事件发生时调用所有观察者的 update() 方法没有事件中心// 发布者-目标class Dep { constructor

2020-07-07 15:42:42 1108

原创 3-1-7-发布订阅模式

发布订阅模式发布订阅模式和观察者模式是两种设计模式，在 Vue 中有各自的应用场景。两种模式的本质是相同的，但是还是有区别的，经常被混为一谈。发布/订阅模式订阅者发布者信号中心我们假定，存在一个"信号中心"，某个任务执行完毕，就向信号中心"发布"(publish)一个信号，其他任务可以向信号中心"订阅"(subscribe)这个信号，从开知道什么时候自己可以执行。这就叫做**“发布/订阅模式”(publish-subscribe pattern)**\从自定义事件中看订阅/发布模式l

2020-07-07 15:42:01 231

原创 3-1-6-Vue 数据驱动

Vue 数据驱动在学习 Vue 的时候经常会看到三个词，数据响应式、双向绑定、数据驱动。数据响应式数据就是指的数据模型，仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率。双向绑定数据改变，视图改变；视图改变，数据改变。可以使用 v-model 在表单元素上创建双向数据绑定。数据驱动数据驱动时 Vue 最独特的特性之一。开发过程中只需要关注数据本身，不需要关心数据是如何渲染到视图。数据响应式的

2020-07-07 15:41:11 313

转载 yarn的安装和使用

yarn的简介：Yarn是facebook发布的一款取代npm的包管理工具。yarn的特点：速度超快。Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率，因此安装速度更快。超级安全。在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。yarn的安装:下载node.js，使用npm安装npm install -

2020-07-06 16:39:29 360

原创 3-1-5-VueRouter模拟-分析

Vue Router 模拟-分析核心代码回顾import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'// router/index.js// 注册插件Vue.use(VueRouter)// 创建路由对象const router = new VueRouter({ routes: [ {name: 'Home', path: '/', component

2020-07-04 13:20:03 181

原创 3-1-4-Vue Router实现原理

Vue Router 实现原理前置知识插件混入Vue.observable()插槽render 函数运行时和完整版的 VueVue Router 是前端路由，当路径切换的时候在浏览器端判断当前路径，并加载当前路径对应的组件。Hash 模式是把井号后面的内容作为路由地址，可以直接通过 location.url来切换浏览器中的 url 地址，如果值改变了#后面的内容，浏览器不会向服务器请求这个地址，但是会把这个地址记录到浏览器的访问历史中，当 hash 改变后，需要监听 hash 的变化并

2020-07-04 13:19:19 94

原创 3-1-3-Hash 和 History 模式

Hash 和 History 模式Hash 和 History 模式的区别首先需要强调的是不管哪种模式都是客户端路由的实现方式，也就是当路径放生变化之后不会向服务器发送请求，是用 js 监视路径的变化的变化，然后根据不同的地址渲染不同的内容如果需要服务端内容的话，需要使用Ajax发送请求。表现形式的区别Hash 模式https://music.136.com/#/user?id=10029 这种模式的地址中带有 # 号， # 号后面就是路由地址可以使用？携带路由参数，官方文档中说这种模式很

2020-07-04 13:18:42 120

原创 3-1-2-Vue Router 的基础使用

Vue Router 的基础使用让我们来看一下 router/index.js 文件吧import Vue from 'vue'import VueRouter from 'vue-router'import Index from '../views/Index.vue'// 1. 注册路由组件// Vue.use 是用来注册组件,它里面需要接收一个参数,如果这个参数是函数的话, Vue.use 内部直接调用这个函数来注册组件,// 如果传入的是一个对象,Vue.use 会调用这个对象的 in

2020-07-04 13:17:42 126

原创 3-1-1-Vue.js 基础回顾

Vue.js 基础回顾Part 概述快速回顾 Vue.js 基础语法Vue Router 原理分析与实现虚拟 DOM 库 Snabbdom 源码分析响应式原理分析与实现Vue.js 源码分析Vue.js 基础结构<div id="app"> <p>姓名：{{ host.name }}</p> <p>性别：{{ host.gender }}</p></div><script src="https://

2020-07-02 21:17:48 172

丁晓东go