乐趣区

关于javascript:为什么会弃用-LigerUI

jiezi

为什么在晚期 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 会大大降低屡次保护的老本，让团队能疾速的进入业务开发。

退出移动版