没有什么时间是比现在合适的-CSDN博客

原创 3-2-01-Vue.js 源码阅读-准备工作

Vue.js 源码阅读-准备工作distdist 是打包之后的结果， vue 打包之后会生成很多不同的版本，在 README 中会有详细的介绍。examples示例，通过示例快速的体验 vue 的使用方式。src源码目录compilercompiler 的作用是将模板转换成 render 函数，render 会帮我们创建虚拟 DOM 。corecore 是 vue 的核心，与平台无关components定义了 vue 中自带的 keep-alive 组件global-api定义了

2020-08-10 09:34:57 164

原创 JavaScript this 问题总结

this 问题总结js中的 this 问题一直自己知识体系中一个模糊的区域，所以写这篇文章来记录和厘清一下 this 指向的问题。this 的5种绑定方式默认绑定隐式绑定显式绑定new 绑定箭头函数中的 this默认绑定默认绑定的 this 在非严格模式下指向 window ，在严格模式下指向 undefined。var a = 10function foo () { console.log(this.a)}foo() // 10使用 var 创建变量的时候（不在函数里

2020-08-07 16:36:16 176

原创 phpnow安装教程

PHPnow 是什么？Win32 下绿色免费的 Apache + PHP + MySQL 环境套件包。简易安装、快速搭建支持虚拟主机的PHP环境。附带 PnCp.cmd 控制面板，帮助你快速配置你的套件，非常方便。下载地址，http://servkit.org/download。下载完成之后，将压缩包解压到一个没有中文路径的目录下然后，将 Package.7z压缩文件解压到当前目录，如图，在地址栏键入 cmd 回车在弹出的小窗口中输入 init 回车中间会选择 y/n 选择 y 回车，安装

2020-08-06 14:03:32 359

原创 window.open()打开新的标签页，不遮盖任务栏最大化显示

window.open(strUrl, strWindowName, [strWindowFeatures]);strUrl === 要在新打开的窗口中加载的URL。strWindowName === 新窗口的名称。strWindowFeatures === 一个可选参数，列出新窗口的特征(大小，位置，滚动条等)作为一个DOMString。遇到需求，打开新的窗口实现最大化，不遮挡计算机任务栏的那种。依据MDN的解释，strWindowFeature是一个可选参数。是一个字符串值，这个值列出.

2020-08-05 10:12:11 777

转载计算机网络基础

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

2020-07-31 16:47:53 127

原创 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 348

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

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

2020-07-21 06:38:08 463

原创 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 4196 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 7932

原创 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 173

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

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

2020-07-13 14:01:52 121

原创 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 217

原创 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 209

原创 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 304

原创 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 230

原创 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 156

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

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

2020-07-07 15:42:42 1122

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

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

2020-07-07 15:42:01 250

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

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

2020-07-07 15:41:11 339

转载 yarn的安装和使用

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

2020-07-06 16:39:29 379

原创 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 203

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

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

2020-07-04 13:19:19 106

原创 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 143

原创 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 141

原创 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 189

原创 2-2-6-Git Hooks 介绍

Git Hooks 介绍虽然项目的构建都会集成 lint ，但是在开发过程中难免会出现提交代码之前忘记 lint 的可能。这就可能影响到提交的代码质量。显然光靠口头的约束是不足以完全避免这种问题的。解决方法就是通过 Git Hooks 在代码提交之前强制 lintGit Hooks 介绍Git Hooks 也称之为 git 钩子，每个钩子都对应一个任务（如：commit、push等）通过 shell 脚本可以编写钩子任务触发时要执行的操作。快速上手在 .git 文件中有一个 hooks 文

2020-06-30 00:11:24 377

原创 2-2-5-Prettier 的使用

Prettier 的使用Prettier 是一款通用前端代码格式化工具，几乎可以完成所有类型代码文件的格式化工作，可以通过它完成代码的格式化，包括markdown文档格式化。Prettier 可以格式化的文件类型包括：html css js json scss md jsx vue。快速上手安装yarn add prettier -dev执行 cli 命令yarn prettier filename.ext执行完这个命令之后，prettier 默认的会把格式化之后的代码输出到控制

2020-06-29 20:43:33 164

原创 2-2-4-规范化标准

规范化标准规范化是我们践行前端工程化的重要的一部分为什么要有规范化的标准哪里需要规范化标准实施规范化的方法为什么要有规范化标准软件开发需要多人协同不同的开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果物代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现 Lint常见的规范化实现方式ESLint 工具使用定制 ESLint校验规

2020-06-28 13:13:31 147

原创 2-2-3-Rollup

RollupRollup也是一款ESM的打包器，也可以将一些散落的模块打包成整块的代码，从而使得这些划分的模块可以更好的运行再浏览器环境或者nodejs环境。相比于webpack，rollup要小巧的多，webpack可以配合插件实现前端工程化的绝大多部分工作，但是 rollup 只是一个 ESM 打包器，并没有任何其他额外的功能。他的出现也只是为了提供一个充分利用 ESM 各项特性的高效打包器。快速上手yarn add rollup --devyarn rollup ./src/index.js

2020-06-28 13:12:59 273

git思维导图.pdf

空空如也