为什么会弃用 LigerUI

为什么在早期 jQuery 对我们来说是有意义的

那时候谷歌发布 Chrome 浏览器还不是绝大多数。当时还没有通过 CSS 选择器来查询 DOM 元素的标准方法，也没有动态渲染元素的样式的标准方法，而 Internet Explorer 的 XMLHttpRequest 接口与其他很多 API 一样，在浏览器之间存在不一致性问题。Query 让 DOM 操作、创建动画和“AJAX”请求变得相当简单——基本上，它让 Web 开发人员能够创建更加现代化的动态 Web 体验。最重要的是，使用 jQuery 为一个浏览器开发的代码也适用于其他浏览器。在的早期阶段，jQuery + UI 框架让开发团队能够快速进行原型设计并开发出新功能，而无需专门针对每个 Web 浏览器调整代码。
LigerUI 基于 Jquery 进行高度耦合的定制化框架。在业务及交互单一时候， 完美担任了一个页面框架的作用。 让开发人员能快速的输出模型， 添加需要的功能节点。让大家都能快速的根据自己当前的业务情况， 进行独立完成相关功能。

后来的 Web 标准

后来，我们成长为一家拥有数多名工程师的公司，并逐渐成立了一个专门的团队，负责 JavaScript 代码的规模和质量。我们一直在排除技术债务，有时技术债务会随着依赖项的增多而增长，这些依赖项在一开始会为我们带来一定的价值，但这些价值也随着时间的推移而下降。

我们可以将 jQuery 与现代浏览器支持的 Web 标准的快速演化进行比较：

1. $(selector) 模式可以使用 querySelectorAll() 来替换 ;
2. 现在可以使用 Element.classList 来实现 CSS 类名切换 ;
3. CSS 现在支持在样式表中而不是在 JavaScript 中定义可视动画 ;
4. 现在可以使用 Fetch Standard 执行 $.ajax 请求 ;
5. addEventListener() 接口已经足够稳定，可以跨平台使用 ;
6. 我们可以使用轻量级的库来封装事件委托模式 ;
7. 随着 JavaScript 语言的发展，jQuery 提供的一些语法糖已经变得多余。

另外，链式语法不能满足我们想要的编写代码的方式。

$('.js-widget')
  .addClass('is-loading')
  .show()

这种语法写起来很简单，但是根据我们的标准，它并不能很好地传达我们的意图。作者是否期望在当前页面上有一个或多个 js-widget 元素？另外，如果我们更新页面标记并意外遗漏了 js-widget 类名，浏览器是否会抛出异常会告诉我们出了什么问题？默认情况下，当没有任何内容与选择器匹配时，jQuery 会跳过整个表达式，但对我们来说，这是一个 bug。

第二，网站业务越来越复杂，人们需要更强大的框架来支撑业务，而 jQuery 及其衍生库都无法完成。分配所有资源并不能承受过多的解耦任务且需要开发者对代码完全了解并掌握思想，大大增加了修改框架时的修改成本。jQuery 的开源生态是一个一个的交互组件，但是结构性不强，代码质量不好。 在 Gitub 上 5000+ star 的也存在多多少少的代码缺陷和功能臃肿。

最后，在团队人员越来越多的情况下， 需要加入 eslint ，flow 等工具进行代码优化。 因为 jQuery 是一个链式调用， 所以返回值大部分时间都是一样的。链式语法不适合做静态分析，因为几乎所有 jQuery 方法返回的结果都是相同的类型。

总而言之，放弃 LigerUI 是因为移除 jQuery 生态导致的。移除 jQuery 意味着我们可以更多地依赖 Web 标准，让 MDN Web 文档成为前端开发人员事实上的默认文档，在将来可以维护更具弹性的代码，并且可以将 3MB 的依赖从我们的捆绑包中移除，加快页面的加载速度和 JavaScript 的执行速度。

选择 VUE

了解了问题， 但是分配所有资源一次性移除 LigerUI 是不可行的。所以， 我们找了多个解决方案。在理论及个人实践后， 最终导致了我选择 VUE。
后面看到了 Vue.js 在代码的可读性、可维护性和趣味性的方面的处理可谓是会心一击。
如果你看过Vue的文档指南，你会马上发现，这个框架将比React和Angular 1 带来更好的编程体验。
对比React，React是一个以组件为基础的框架，每个组件实例有自己的方法、属性、顺着组件层级的单向数据流、函数调用、虚拟dom、和状态管理。
对比Angular 1，Angular 1 更像是一个有着优秀语法的模板，并且有你一定会需要的双向数据绑定（在单个组件内）。
Vue.js是一个很容易起步的框架，这在我们的团队中已经得到了印证。它不需要强制的基于任何编译环境，所以它能很容易地和你的历史遗留代码结合，并且能马上用Vue的代码改善历史用jQuery编码时的问题。
当前三大框架中最易简单、最易上手；文档深入浅出，逻辑清晰，易学易用；中文文档翻译的也不错，中文社区活跃；.vue文件写法简洁明了，连css的作用域问题都帮你解决了。

无论是在html，还是在js中使用框架，Vue.js都是一个很容上手的框架。它让你在操作一个复杂的模板的时候，你可以专注你的业务。并且即使这个模板非常大，也能有很强的可读性。在这个时候，你就能更方便地根据你的业务逻辑处理好的你的代码逻辑。如果你想重构模板并且拆分它们成更小的组件，你也可以从刚开始的大模板中更清晰地看到整个应用的关联关系。

1. 双向绑定的数据流是Vue的一大亮点，即使是在复杂的场景下也不会带来任何问题。当你拆分你的组件时，你总是能通过回调来单向传输需要改变的数据。
2. 如果你想要使用一些预处理的工具，比如PostCSS、ES6，可以点这里。在Vue2里面，写一个公共组件已经成为拓展Vue的默认方式了。顺便值得一提的是，在组件内编写css，是一种看起来很棒的体验，它能够减少传统css的命名的层级问题，就像BEM一样。
3. Vue.js有简单的、高效的状态管理机制，比如用data()和props()，他们能在实际场景的使用过程中发挥很大的作用。并且能够通过Vuex更好的分离状态管理，帮助我们更有效的管理状态（Vuex在我看来是一个和React中的Mobx差不多的状态管理工具，一款把状态操作和状态分离的管理工具）。

   到此，我觉得用 VUE 会大大降低多次维护的成本， 让团队能快速的进入业务开发。