code-analysis
code-analysis copied to clipboard
cobish
源码解读
## 前言 Promise 是 ES6 新增的一个内置对象， 它是用来避免回调地狱的一种解决方案。 从以前一直嵌套传回调函数，到使用 Promise 来链式异步回调。Promise 究竟是怎么实现，从而达到回调函数“扁平化”？ 接下来就来一步步实现一个简单的 Promise。开始发车了... ## 执行步骤 先来看一个使用 Promise 的简单例子： ``` js var p = new Promise(function a (resolve) { console.log(1); setTimeout(function...
## 前言 在学习 vue-router 的代码之前，先来简单了解一下前端路由。 前端路由主要有两种实现方法： 1. Hash 路由 2. History 路由 先来看看这两种方法的实现原理。 接着我们将用它们来简单实现一个自己的前端路由。 ## 前端路由 ### Hash 路由 url 的 ``hash`` 是以 ``#`` 开头，原本是用来作为锚点，从而定位到页面的特定区域。当 ``hash`` 改变时，页面不会因此刷新，浏览器也不会向服务器发送请求。 ``` js http://www.xxx.com/#/home...
## 前言 本打算开始深入源码，跟原来阅读源码的方式一样。 但是总觉得这样有哪里不对劲，是的，一味的看着源码也只能猜测代码的思路，并不能证明这思路就是正确的。 于是我打算换一种方式阅读源码，于是想到了**打断点调试**。 然而在尝试调试 vue 的源码期间，我遇到了不少问题，所以干脆就总结成这篇文章，给大家分享分享。 ## 安装环境 先是 clone 整个项目，我选择的是 [[email protected]](https://github.com/vuejs/vue/tree/v2.0.1)。 进入目录，执行命令 ``npm install`` 安装 node_modules。 打开文件 ``build/config.js``，找到 ``genConfig`` 函数，添加上 sourceMap。  然后执行命令 ``npm run dev`` 后即可调试。...
## 初衷 也许你日常中经常使用到 ``new Vue()`` 来实例化一个 Vue 对象，但你却不知道它到底做了什么操作。你想知道，于是你打开 Vue 的源码，但被庞大的代码吓跑了。你不是一个人，我也一样。 来来去去我也打开过很多次 Vue 的源码，到现在依旧会有点抵抗。但我觉得还是需要先把我理解的先记录下来，日后再逐步完善。 Vue 的源码文章在网上有很多，我也阅读了不少。而我接下来记录的文章也是茫茫大海中的一滴水。不求比其他文章更加优秀，只希望能够给和我一样的你一丝丝帮助。 接下来看看 ``new Vue()`` 的一个大体流程吧。 ## 大体流程 再多的文字解释也没有一张清晰的流程图更加容易理解。是时候祭出 @zhouweicsu 的这一张清晰又易理解的流程图。 在还没有打开 Vue 的源码之前，我们只需要有个大概的印象即可。可以将 Vue 分成两个过程，分别是 ``DOM...
## 前言 首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定，简单的非父子组件通信用 bus（一个空的 Vue 实例）。那么使用 vuex 就是为了解决复杂的非父子组件通信。 仅仅会使用 vuex 没什么，看过文档敲敲代码大家都会。难道你就不想知道 vuex 是如何实现的？！ 抛开 vuex 的源码，我们先来想想如何实现一个简单的 "vuex"。有多简单呢，我不要 getter、mutation、action 等，我只要 state 就行了。 ## 非父子组件通信 在实现之前，我们得来温故一下 ``bus`` 的实现，借用官网的例子： ```...
## 开头 最后来了解了解 vue-router 的两个组件 ```` 和 ````。 这两个组件的使用方式如下： ``` html Hello App! Go to Foo Go to Bar ``` 在打开源码之前，先来简单思考一下，组件可以怎样去实现。 ```` 可以是一个 ```` 标签，to 是它的 props，然后绑定一个点击事件。 还记得 [编程式的导航](https://router.vuejs.org/zh/guide/essentials/navigation.html) 吗？在之前的源码中，我们也看到...
## 回顾 Router 调用构造函数时，保存了一个 ``match`` 属性。 ``` js constructor (options: RouterOptions = {}) { this.match = createMatcher(options.routes || []) // ... } ``` 然后在执行 transitionTo 时，就用到了这个属性（函数）。 ``` js transitionTo (location:...
## 前言 在看 HashHistory 和 HTML5History 的实现时，涉及到父类 ``History`` 与其 ``transitionTo`` 方法。 在路由发生跳转的时候，需要调用 ``transitionTo`` 方法，其中里面便实现了**导航守卫**。 ## History HashHistory 和 HTML5History 都是继承于 History。在调用它们构造函数的时候通过 super 也调用了 History 的构造函数，同时也用到了父类的一些方法，比如 listen 和 transitionTo。 主要来看构造函数 ``constructor``...
## 前言 前端的路由模式包括了 Hash 模式和 History 模式。 vue-router 在初始化的时候，会根据 ``mode`` 来判断使用不同的路由模式，从而 new 出了不同的对象实例。例如 history 模式就用 ``HTML5History``，hash 模式就用 ``HashHistory``。 ``` js init (app: any /* Vue component instance */) { this.app...
## 使用 日常我们使用 vue-router 时： 在 template 中我们用 ```` 来做路由跳转，用 ```` 来做路由跳转后的展示。 ``` html Go to Foo Go to Bar ``` 在 js 中，先用 ``Vue.use`` 来安装 vue-router，然后 new 一个 ``VueRouter``...