从今天开始，拿起 TypeScript 做一个轮子的制造者

前言 前端这些年发展非常迅速，社区里涌现了一堆优秀的轮子，比如Vue、React、Angular、jQuery、axios 等，它们解决着不同领域下的问题。使用这些轮子能极大地帮助我们提升生产力，有些人甚至基于这些轮子二次开发了一些轮子，比如 element-ui、ant-design 等组件库。我们在享受这些轮子给我们带来的便利的时候，有时候也需要面临一些问题：某些轮子不能满足我们自己的特殊业务需求，找不到合适的轮子等。因此我们不仅要会使用轮子，也需要有造轮子的能力。 2019 年，前端技术发展越来越迅

来聊聊源码学习

现如今我们的开发工作并不会从零开始，往往会基于很多开源库，就前端而言，构建工具我们会使用 webpack，MVVM 框架我们会使用 Vue、React 或者 Angular，这些开源工具帮助我们大大提升了生产效率。 通常我们学习一个开源项目的步骤都是先去阅读它的官方文档，下载安装后运行它的一些 demo 实例，然后在工作中去应用和踩坑。当我们对一个开源项目熟练使用并掌握后，再想去深入了解它就需要去阅读它的源码了。 很多同学都尝试学习过源码，目前业内也会有各种开源库的源码解析文章，那么今

聊聊滴滴开源 Vue 组件库— cube-ui 的技术内幕

cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库，主要核心目标是做到体验极致、灵活性强、易扩展以及提供良好的周边生态—后编译。 自 17 年 11 月开源至今已有 5 个月，在这个过程中 cube-ui 受到了不少的关注，同时从社区中也收到了很多很好的反馈和建议。我们也一直在迭代更新，从最初的 1.0 版本到最近发布的 1.7 的版本，除了对原有组件做一些增强优化，我们也提供了很多新的组件。此外，周边后编译技术生态也做了很多优化，满足于更多场景需求，官网也做

vue-music 音乐 App 之 cube-ui 重构

背景 去年 6 月初，我在慕课网上线了一门 Vue.js 2.0 的高级实战课程音乐 WebApp 课程，教同学们如何去开发基础组件和业务组件。在一般大公司的实际项目中，并不会为每一个项目都去开发基础组件，他们往往会把基础组件收敛成一个组件库，供各个项目复用。滴滴也是如此，我们在去年初使用 Vue.js 去重构了我们的打车 WebApp，也抽象出了一套移动端组件库，在经过一年多的业务考验后，我们决定做开源，一方面是想把好的东西分享出去，并通过社区的反馈去完善我们的组件库；另一方面也是

Vue.js 升级踩坑小记

本文并不是什么高深的技术文章，只是记录我最近遇到一个因为 Vue 升级导致我的一个项目踩坑以及我解决问题的过程。文章虽长但不水，写下来的目的是想和大家分享一下我遇到问题时候一个思考的方法和态度。 背景：去年我在慕课网推出了一门 Vue.js 的入门实战课程——Vue.js 高仿饿了么外卖 App ，这门课程收到了非常不错的反响，于是今年又在慕课网上继续推出了 Vue.js 的高级进阶实战课程——Vue.js 音乐 App，同样反馈不错。每天晚上下班回家，我会去问答区看一下学生们的问题，

滴滴 Web 移动端组件库 cube-ui 开源

滴滴 WebApp 团队在去年底用 Vue.js 2.0 对业务进行重构，并开发了一套移动端组件库 cube-ui 支撑业务的开发。经过了一年多的业务考验，cube-ui 也日趋成熟，而且我们相信除了在滴滴内部，cube-ui 也一定也有它的用武之地。好的东西必须要和大家分享，所以我们非常开心的告诉大家， cube-ui 在今天正式开源，源码地址： https://github.com/didi/cube-ui。 cube-ui 从滴滴业务中提炼而来，由滴滴 WebApp 前端架构组开发和维护。cube-ui 的目标是让移动端的开发更加容易，让开发

当 better-scroll 遇见 Vue

在我们日常的移动端项目开发中，处理滚动列表是再常见不过的需求了，以滴滴为例，可以是这样竖向滚动的列表，如图所示： 也可以是横向滚动的导航栏，如图所示： 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功能的时候，会用到我写的第三方库，better-scroll。 什么是 better-scroll better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做

滴滴 webapp 5.0 Vue 2.0 重构经验分享

项目背景 滴滴的 webapp 是运行在微信、支付宝、手 Q 以及其它第三方渠道的打车软件。借着产品层面的功能和视觉升级，我们用 Vue 2.0 对它进行了一次技术重构。 技术栈 MVVM框架： Vue 2.0 源码：es6 代码风格检查：eslint 构建工具：webpack 前端路由：vue-router 状态管理：vuex 服务端通讯：vue-resource 几个问题 滴滴 webapp 是一个大的 SPA 应用么？ 滴滴 webapp 包含众多业务线，每个业务线都有独立的一套的发单流程逻辑。那么问题来了，这些业务逻辑都是在一

Vuex 2.0 源码分析（下）

大家好，我叫黄轶，来自滴滴公共前端团队，最近在幕课网上线了一门 Vue.js 的实战课程——《Vue.js高仿饿了么外卖App 2016最火前端框架》，同时，我们团队最近写了一本书 ——《Vue.js 权威指南》，内容丰富，由浅入深。不过有一些同学反馈说缺少 Vuex 的介绍的章节。既然 Vue.js 2.0 已经正式发布了，我们也要紧跟步伐，和大家聊一聊 Vuex 2.0。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。 辅助函数 Vuex 除了提供我

Vuex 2.0 源码分析（中）

大家好，我叫黄轶，来自滴滴公共前端团队，最近在幕课网上线了一门 Vue.js 的实战课程——《Vue.js高仿饿了么外卖App 2016最火前端框架》，同时，我们团队最近写了一本书 ——《Vue.js 权威指南》，内容丰富，由浅入深。不过有一些同学反馈说缺少 Vuex 的介绍的章节。既然 Vue.js 2.0 已经正式发布了，我们也要紧跟步伐，和大家聊一聊 Vuex 2.0。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。 wrapGetters 了解完 regis

Vuex 2.0 源码分析（上）

大家好，我叫黄轶，来自滴滴公共前端团队，最近在幕课网上线了一门 Vue.js 的实战课程——《Vue.js高仿饿了么外卖App 2016最火前端框架》，同时，我们团队最近写了一本书 ——《Vue.js 权威指南》，内容丰富，由浅入深。不过有一些同学反馈说缺少 Vuex 的介绍的章节。既然 Vue.js 2.0 已经正式发布了，我们也要紧跟步伐，和大家聊一聊 Vuex 2.0。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。 当我们用 Vue.js 开发一个

Vue 源码解析：深入响应式原理（下）

Watcher 我们先来看一下 Watcher 类的实现，它的源码定义如下： <!-源码目录：src/watcher.js--> export default function Watcher (vm, expOrFn, cb, options) { // mix in options if (options) { extend(this, options) } var isFn = typeof expOrFn === 'function' this.vm = vm vm._watchers.push(this) this.expression = expOrFn this.cb = cb this.id = ++uid // uid for batching this.active = true this.dirty = this.lazy //

Vue 源码解析：深入响应式原理（中）

Directive Vue 指令类型很多，限于篇幅，我们不会把所有指令的解析过程都介绍一遍，这里结合前面的例子只介绍 v-text 指令的解析过程，其他指令的解析过程也大同小异。 前面我们提到了 Vue 实例创建的生命周期，在给 data 添加 Observer 之后，有一个过程是调用 vm.compile 方法对模板进行编译。compile 方法的源码定义如下： <!-源码目录：src/instance/internal/lifecycle.js--> Vue.prototype._compile = function (el) { var options = this.$options // transclu

Vue 源码解析：深入响应式原理（上）

本文来自《Vue.js 权威指南》源码篇中我写的一个章节，现在分享出来给大家，顺便安利一波我的github，欢迎 star 和 follow~ Vue.js 最显著的功能就是响应式系统，它是一个典型的 MVVM 框架，模型（Model）只是普通的 JavaScript 对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观，不过理解它的原理也很重要，可以避免一些常见问题。下面让我们深挖 Vue.js 响应式系统的细节，来看一看 Vue.js 是如何把模型和视图建立起关联关系的。 如何追踪变化 我

滴滴WebApp实践经验分享

滴滴WebApp实践经验分享 黄轶，前端技术专家，现就职于滴滴出行公共FE团队，前端技术专家，《Vue.js权威指南》主要作者。计算机专业硕士，2012年毕业于北京科技大学，曾任职百度。擅长前端自动化、工程化，前端架构等方向。业余时间喜欢写点H5小游戏，偶尔造造轮子。喜欢关注业界一些新技术，乐于分享，热爱开源。对代码有洁癖，追求高质量的代码。 本文为滴滴公共FE团队在WebApp方向的一些实践经验总结，主要内容包括：WebApp首页技术架构、前端工程化在WebApp的实践、通用地图JS库的设计和实