用 Vue 改造 Bootstrap，渐进提升项目框架

GitChat 作者：Meathill
原文：用 Vue 改造 Bootstrap，渐进提升项目框架
关注微信公众号：「GitChat 技术杂谈」 一本正经的讲技术

【不要错过文末彩蛋】

前言

Vue 横空出世，以迅雷不及掩耳之势横扫前端界，俨然有当年 jQuery 之势。我认为 Vue 成功的关键在于三点：

1. 学习曲线平缓，有点经验的前端基本上一天就能看完文档，然后就可以上手操作。

2. 上升空间很大，组件化/路由/Vuex/Ajax，生态完整，架构强壮，用它构建中大型项目也很容易。

3. API 设计优雅，并且和标准很友好。

但是在我看来，很多 Vue UI 组件库反倒走在一条错误的道路上：过分追大求全。比如说，第一个组件多半是 Grid，CSS 能搞定的事情为什么要做成组件端本来就是 HTML/CSS/JS 的集合，我们理应把合适的技术用在合适的地方。

当然，如果你是想把一切都塞进 JS 的“JS 至上党”，这样做也行。不过，不是每个人都要从头开始做一个新产品，很多同学正在维护一个老产品，如何把新技术应用到老产品里，让它老树开新花，也是本文的主旨。

所以接下来，我会介绍这些内容：

1. 前端框架很多，为什么要使用 Vue/p>

2. 一个基于 jQuery + Bootstrap 的后台项目。

3. 对其进行有限的改造，让它能渐进地获得提升。

4. CSS 的归 CSS，JS 的归 JS。

适合的读者

1. 初中级前端，希望学习 Vue 和组件式开发。

2. 后端，用过 Bootstrap，想升级改造框架。

名词及约定

• ES6 = ES2015

• MVVM Model-View-ViewModel，一种现代化的 UI 架构体系，非常适合 HTML + CSS 这样的标记型语言，经实践证明可以大大提升开发效率。本文中大部分和 Vue 互相指代。

• 响应式 在 CSS 领域，我们可以简单理解成手机端和桌面端有不同的呈现；在 MVVM 框架（本文上，它指界面根据数据自动刷新显示。

Vue 实现响应式的基础是 ES5 中的 方法，它把普通的属性读写改成 getter/setter，以便注入其它操作。大部分现代化浏览器都已经支持这个方法，但一些古老的浏览器如 IE8 不支持（现在还在使用 IE8 的人你也很难指望他们会升级），如果你要使用 Vue，请确保你的项目不会跑在这些平台上。

本文使用 Bootstrap 4.0.0-alpha.6，Vue 2.4.0+。

作者介绍

大家好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 没关系，从高中起伴随我到现在。

我热爱编程，喜欢学习，喜欢分享，从业十余年，投入的比较多，学习积累到的也比较多，对前端方方面面都有所了解，希望能与大家分享。

我兴趣爱好比较广泛，尤其喜欢旅游，欢迎大家相互交流。

你可以在这里找到我：

• 博客

• 微博

• GitHub

版权许可

本书采用“保持署名—非商用”创意共享4.0许可证。

只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。

反馈

如果您对于文中的内容有任何疑问，请在评论或 Issue 中告诉我。亦可发邮件给我：meathill[at]gmail.com。谢谢。

前端框架发展简史

对前端框架不感兴趣的同学可以跳过这一章，并不会影响后面的理解。

这章主要解决这些问题：

1. 为什么要切换到 Vue 上/p>

2. jQuery 真的过时了么/p>

3. 除了 Vue 以外，我还有其它选择么/p>

我之前还做过一次视频分享 jQuery, Backbone, Vue，也是通过分析 JS 开发的历史，对比三个时期最具代表性的框架。感兴趣的同学可以看一下。

史前文明

有位名人说过：“一个人的命运啊，当然要靠自我奋斗，但是也要考虑到历史的行程。”这句话放在 Web 技术上，其实也非常正确。

发明 HTML 的目的是为了方便阅读文献，所以它身上有很多印刷业的影子。后来大家嫌排版没有其它工具做得漂亮，于是又发明了 CSS。结果凭借着极高的传播效率，市面上又缺少竞品，急速普及，被大家拿来干各种事情。

在那个拨号上网的洪荒年代，浏览器还非常初级，与服务器进行数据交互的唯一方式就是提交表单。用户填写完成之后，交给服务器处理，如果内容合规当然好，如果不合规就麻烦了，必须打回来重填。所以很容易想象：当用户填完100+选项，按下提交按钮，等待几十秒甚至几分钟之后，反馈回来的信息却是：“您的用户名不能包含大写字母”，他会有多么崩溃多么想杀人。为了提升用户体验，网景公司的布兰登·艾克用了大约10天时间，开发出 JavaScript 的原型，从此，这门注定改变世界的语言就诞生了。

石器时代：jQuery

这个时候浏览器还处于非常严重的分裂状态。IE 自恃有 Windows 护身，真是想怎么搞怎么搞。另一边的网景后来的 Firefox 空有一腔报国热血，但是怎么都干不过 IE。后来干脆全捐给开源社区，曲线救国，用免费开源的群众战争和微软打。

这种环境受苦的还是网页开发者。同一个页面，经常要写两套代码，然后寻找各式各样的 Hack 方法，费时费力。于是 jQuery 出现后大家觉得真是“春风十里，不如你”。

jQuery 的口号是：“Write less, do more“，为 Web 开发做出了卓越的贡献：

1. 提供统一的操作接口。你不需要担心代码跑在什么浏览器上，自有 jQuery 来适配。

2. 封装了很多常用接口。比如增删样式，只需要 就可以，比原始方法简单很多。

3. 用组合模式减少错误。HTML 结构多变，JS 操作 DOM 节点很容易发生错误，尤其早期切页面和写 JS 的很可能不是同一个人。用 jQuery 你至少不用担心会报错。

就这样，jQuery 凭借着出色的工程设计，俘获了大量开发者的心，是现在最普及的框架。

铁器时代：Backbone

jQuery 治下的 DOM 操作实在太简单了，选择器 + 修改，还不用担心报错。这就好比说，邻居有个热心大哥，买了辆车，说你出门尽管找他。然后他还真的来者不拒，笑脸相迎，以至于小区里的人出门都不开车也不打车也不骑车，都坐他的车。

开始总是好的，但随着环境变化，老的优势也可能会变成问题。就像一个小区只有一辆车肯定不够一样，开发者对 DOM 操作过分依赖，会导致 JS 代码和 HTML 严重耦合，牵一发而动全身，维护成本大幅升高。

另外，经过几年发展，包括 Flash 等软件不懈探索，此时的 Web 已经不仅仅要提供能阅读的图文信息，越来越多的 RIA(Rich Internet Application，富互联网应用) 涌现出来，大家都在竭尽所能地把桌面软件搬上互联网。这对前端开发提出了更高的要求。

Backbone 给出了自己的答案。它是一个 MVP 框架，充分利用了现代 Web 技术，包括 jQuery。它大大减少了操作 DOM 的需求，转而教大家使用模板。它以数据为视角来组织代码，告诉大家：原来 JS 还可以这么写。

(图片来源： https://erazerbrecht.wordpress.com/2015/10/13/mvvm-entityframework/)

View 视图和 ViewModel 双向数据绑定，View 既是数据展示窗口，也是接受用户操作的输入来源。ViewModel 除了负责渲染逻辑以外，还负责全局数据管理，以及和真正的数据源 Model 进行交互。MVVM 非常吸引人，因为它在 MVP 的基础上又进行了一次抽象，并且提供双向数据绑定，所以开发维护效率巨高，代码量可能只有 MVP 的 1/10，但功能一致甚至更强。

最早在 Web 中引入这套模式的是 Knockout。用英语的句式来说：它是如此之早以至于它甚至支持 IE 6 和 Firefox 3.5……于是这也让它背上了沉重的历史包袱：

1. 它必须显式的声明数据绑定，显式到语法啰哩吧嗦。

2. 赋值时必须使用 这种语法，甚至 这样。

另一个尝试来自 Angular1。它不需要这么复杂的语法，而是采用“脏查询”的方式，即当某个可能导致页面重新渲染的操作产生后，检查所有备案过的变量，如果有改变的，就重新渲染。这种做法的问题就是慢，在运算能力充足的桌面电脑上感觉不明显，但是在移动端就会很慢。桌面端也会慢，所以它只能追踪1000个变量。

但是它的开发效率的确很高，在企业级占据霸主地位，几乎已经是事实标准。

这两个框架有些生不逢时，因为浏览器整体环境的限制，它们选择了不够完善的实现方案。但是 Angular 至少证明了这个方向可行，而且效果很好，于是他们注定要被后浪拍在沙滩上。

电子时代：Vue，React，Angular2/4/5

接下来便轮到我们的主角登场了。不过与它一起登场的还有另外两名选手，都是背景深厚实力不凡的大 Boss，我先介绍它们。

React

React 是 Facebook 研发的框架。它最大的特点是使用虚拟 DOM 作为实际 DOM 的影子，这样当它判断是否需要重新渲染时，就不用费力的与 DOM 交互，而只要从 JS 内存中取出虚拟 DOM 做 diff 即可。这样做可以大大提升检查效率，提高渲染速度。

但它本质上仍然在执行脏检查，所以实际效率不太高，或者说，有明显的天花板；只是面对越来越强的计算能力，这些损失浪费的表现越来越不明显。但是虚拟 DOM 也带来另外一个好处：如果重写它的实现机制，可以在任意场合实现任意类型的渲染，包括移动 App。于是便诞生了 React Native 这个项目，可以直接把基于 React 开发的 Web 项目转译成原生应用。

React 背靠 Facebook 这座大山，国内也有阿里支持，社区异常活跃，生态异常丰富。又能编译出原生应用，这是它最大的优势。

不过 React 也有缺点，导致我没有选择它：

1. 要使用 React 必须使用丑陋的 JSX，我认为这是反标准的。

2. 它的生态虽然丰富，但是官方并没有引导，没有全家桶，各种实现参差不齐。

3. 设计上为照顾大规模企业级开发，里面有众多新概念，学习曲线非常陡峭。

4. 夹带私货，如今 Apache 基金会已经禁止使用 React。

Angular 2/4/5

Angular 吸取了第一代的教训，在 Angular 2 里重写了底层逻辑，也使用虚拟 DOM 来判断是否需要重新渲染。所以 React 的优势它基本也有。之后的 v4、v5都是在 v2 基础上的改进，并没有特别大的变化。

Angular 的学习曲线就更陡峭了，应该说它从一开始就没打算走群众路线，而是直接奔着大而全的企业级开发框架去做的（因为 v1 就是这样做的并且取得了成功）——相对来说 React 表现的还有点扭捏。

另外 Angular 为了能够更好的对接大规模团队开发，选择 TypeScript 作为开发语言，一方面使得学习成本更高；另一方面也和标准化渐行渐远。这也是我不推荐它的原因。

Vue

与前面两个竞品不同，Vue 是个人作品，而且在 2013 年才开始开发。但我选择它推荐它并不是因为什么挑战大公司霸权的情怀，而是它的确设计得很棒。

1. 双向绑定效率高

   问世的晚，历史包袱就少。Vue 使用 ES5 新增的 方法，将对象的属性转化为 ，这样我们习以为常的 赋值语句实际上就被改写成 ，而这个操作对开发者来说是完全无感的！这样我们一方面可以正常写代码，另一方面还可以轻松的享受到双向绑定，并且是高效的没有多余动作的绑定，任何有点点洁癖或者强迫症的人都会觉得很舒服吧！

2. 模块化减缓学习曲线

   初入门时，我们只需要学习 Vue 就好。如果只想实现简单的“数据<=>视图”映射，区区几行代码就足够了，非常简单。甚至可以直接拿来替换 jQuery。

   之后随着项目增大，使用加深，可以慢慢的开始使用组件，使用路由，使用全局状态管理。这一系列进化都在平缓的进行。

3. 贴近标准

   与大公司喜欢夹带私货，搞自有标准不同，Vue 是标准友好的。甚至连 Vue 控件，写出来都跟普通 HTML 一样。作为个人开发者，或者小公司开发人员，我不愿意介入大公司之间的角逐，我见过妖魔横行的年代，我希望标准一统天下。

小结

在代表先进生产力的 MVVM 框架里，我最终选了 Vue 作为新的主攻框架。我也把它推荐给大家。

框架入门

这一章会简单介绍 Bootstrap 和 Vue 的入门知识，如果您已经了解，可以跳到下一章。

Bootstrap 简介

Bootstrap 是 Twitter 的两位前端工程师搞出来的前端框架。它包含了大量 UI 组件，可以覆盖到很多开发场景，大大提升开发效率。

Bootstrap 经过几轮升级，现在处于 v4-alpha.6 阶段，作为一个免费开源产品，原作者太忙，alpha 快两年了，还没 beta，不知道什么时候能正式版。不过经过我一段时间的使用，我觉得目前这个版本基本上没啥大问题，还是推荐大家使用。

Bootstrap 4 alpha 6 文档

作为最流行的前端框架，有很多人基于它做出了很多值得学习的项目，很多都是开源免费的，也一并推荐给大家：

• Bootstrap 免费主题

• Bootstrap 付费模板

• CoreUI 基于 Bootstrap 做的后台类模板，免费，有多种框架配置

• Start Bootstrap 另一套免费模板

Bootstrap 的文档非常详细，我就不凑字数了。将来文章发布后若有问题再补充吧。

Vue 入门

Vue 的文档非常棒，尤其还有中文版，学习起来轻松愉快。

Vue 官方教程中文版

这里我也不再重复官方已有的内容了，大家自己看就好。说一下我理解中，从 jQuery 向 Vue 转换时需要注意的东西。

MVVM 对数据的抽象

jQuery 里几乎没有数据抽象。你面对的就是一个虽然错综复杂，但是总能找到联系的 DOM 树，只要你有耐心，总能把它改成你想要的样子。

MVP 就抽象出数据层和视图层，但是还要我们手动更新视图；MVVM 比 MVP 的抽象更进一步，只要操作数据。所以我们必须要理解它的抽象，并且习惯它的抽象。

在这个体系里，我们应避免直接操作 DOM，因为一切都是数据的映射。举个例子，一个新闻列表，在传统开发模式中，是无数个 DOM 操作的结果；而在 Vue 里，就是通过模板把数据映射成 HTML。对后台类产品而言，这很好理解也很好实现，因为后台可以抽象成用户与数据的交互，然后还原成数据的展示和修改，继而直接对应到屏幕上的组件上。

在写 Vue 应用的时候，我们需要注意，哪些数据是业务数据，即要拿来跟后端数据进行交互的；哪些数据是界面数据，即用来切换页面状态，和业务无关。但是基本上，我们不需要直接操作 DOM。

组件复用

组件是 Vue 最值得注意的强大特性。组件化和组件复用将大大提升我们的开发效率。

使用组件主要有两种方式：

1. 注册全局组件。这种方式很简单，有点类似 jQuery 插件，我们只要引用组件就好，然后就可以在模板中使用特定的组件标签。比较适合已有项目，可以在不怎么改动的前提下接入应用 Vue。

2. 使用局部组件。这种方式要复杂一些，而且也有几种不同的实现，如果同时要加载组件模板和组件样式，可能还要用 webpack + vue-loader。

因为这篇文章就是“渐进式改造项目”，所以根据项目现状选择合适的方法很有必要。

ES6 与生态

这个其实不是 jQuery 和 Vue 的差别，只是在眼下这个时间点，ES6 已经实装到绝大部分浏览器里，所以我们无论是看文档、看教程都会看到大量 ES6 的内容。至于整个前端生态，基于 Node.js 开发的各种工具也已经普及到方方面面，使用 webpack + 各种 loader 已经成了默认功课。

所以，那个用 引入 jQuery，然后就可以在页面当中任意使用 jQuery 相关技术的年代，其实已经过去了。

目标改造项目简介

这个项目，本来有机会成为一个真实的项目，但造化弄人，所以它现在只是一个虚拟的项目。

对于这样的需求，在之前的产品中我是这么做的，首先，HTML 部分就按照 Bootstrap 的标准套路来写：

表格模板是这样的（只写单行吧，其它部分意义不大）：

这两部分没什么好解释的。接下来 JS 的部分就稍显啰嗦：

很明显，正如前文所写的那样，jQuery 用起来很方便，可以在 DOM 节点之间自由穿梭。但是因为它没有抽象，所以任何操作都要手工编写，会造成 JS 和 HTML 深度耦合，不仅不方便维护，新功能开发的时候也要写很多多余的代码。

接下来我们要用 Vue 实现同样地功能，应该怎么写呢/p>

首先我们可以观察一下 Bootstrap 里 Modal 的实现机制，很明显，它是通过修改 元素的 属性和增删 样式来实现的。那很简单，我们知道，Vue 里，可以通过 把 vm 的值 绑定到 DOM 节点的 属性上，所以控制弹窗的打开关闭就很简单：

（这里只列出重点代码，其它因为不影响大局就没有写。具体可以参考 codepen oegbvK）

这样修改了之后，我发现打开关闭已经正常工作了，但是没有动画，看起来不够炫酷。没关系，我们审查元素，发现是 样式增加的过渡效果，opacity 0 <-> 1，而同时设置 属性会使得它缺失过渡效果。那很简单，我们可以用 观察选项，侦听 的变化，在它变化后，间隔一点点时间，再触发动画。关闭的动画就要侦听 事件了，在关闭动画完成后再隐藏这部分元素。修改后的代码是这样的：

来源：软件供应链