学前端 UI 框架之前，最好先了解它的作用和意义

最近在整理 L3 学习路线，开始要学习前端 UI 框架了，在 B 站找了一些 React/Vue 的学习视频，都简单看了一下，发现讲师都没有仔细讲这些框架的作用和意义。

我觉得在学前端 UI 框架之前，搞懂它的作用和意义，心里有个清晰的概念，这样在学习和应用这些框架时，会更加通透一些。

因此，我觉得有必要补充一篇文章，跟你讲清楚，前端 UI 框架到底是干嘛的，它的作用是什么。

先说结论吧，几乎所有的框架的作用都是提升开发效率的，因此，前端 UI 框架的作用就是提升前端在开发 UI 界面的时候碰到的效率问题的。

就像我们大学学到的汇编语言，直接写汇编也是可以开发出能运行的程序的，但问题是什么？编码效率太慢。于是，高级语言就出来了。

前端 UI 框架也是一样的，我们完全可以不使用前端 UI 框架，直接使用原生 JS 也一样可以开发页面，但问题是什么？开发效率太低了。于是，前端 UI 框架就出来了。

那前端 UI 框架为什么可以提升我们的开发效率呢？因为它们做了 3 个封装。

封装1 ------ 系统兼容性

前端 UI 框架做了第一层封装，解决了系统兼容性，在前端领域，一般称为浏览器兼容性。

在过去，浏览器兼容性一直都是让前端开发头疼的事情，不过你应该不会有这种感觉，因为框架或者浏览器本身都帮你解决了这个问题了。

如果你学过红宝书，应该还记得这段经典的代码：

javascript 复制代码

var EventUtil = {
	addHandler: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  
  removeHandler: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  }
};

这么一大段代码是在干什么？就是在处理事件订阅和取消订阅的浏览器兼容性问题的。

庆幸的是，我们现在已经几乎接触不到这些"恶心"的代码了。

正是因为有很多的工具和框架，帮我们解决了浏览器兼容性问题，我们才能专注于业务开发。

兼容性问题不是专属于前端的，很多地方都有兼容性问题，比如 QT 框架解决系统的兼容性问题。

也因此，我的子标题才会使用"系统兼容性"，因为我们前端大多数时候不直接对接底层系统，浏览器就是我们的"系统"。

封装2 ------ 语法糖

前端 UI 框架解决了兼容性问题之后，极大地提升了我们的开发效率，在我们开发的时候，不需要担心我们的页面在其他浏览器上会不会出问题。

但这样还不够，即使我们不需要担心原生 JS 的接口会出现兼容性问题，但使用原生 JS 的接口来开发，效率还是比较低。

因此，前端 UI 框架给我们做了第二层封装 ------ 语法糖。对于编程来说，不管是在哪个领域，语法糖都是提升开发效率的一把好手。

不用说太多，直接上栗子你就懂了，请看当前前端业界最经典的语法糖：

react 复制代码

React.render(<h1>hello world! <p>之道前端</p></h1>, document.getElementById('root'));

// 等价于
React.render(
  React.createElement("h1", null, "Hello, World!", React.createElement("p", null, "之道前端")),
  document.getElementById('root')
);

没错，React 的 JSX 就是现在前端最经典的语法糖。上面还是一个非常简单的例子，如果我们的 DOM 结构非常复杂的话，如果没有 JSX 的能力，估计我们会开发得非常痛苦，最终没有人会使用 React 了吧。

一个好的框架一定会有一些让人印象深刻的语法糖，再举个比较经典的语法糖栗子：

javascript 复制代码

// 你能识别这是什么代码吗？
$('#root').text('之道前端').on('click', () => {});

资深一点的前端同学一眼就能看出来，这是 jQuery 的代码，为什么？就是因为它的特色语法糖：$ 语法和链式调用。

封装3 ------ 统一编码规范

是不是做好兼容性处理和语法糖就足够了呢？当然不是。

一个优秀的前端 UI 框架还有最后一个封装 ------ 统一编码规范，而这一点带来的效率提升比前两个封装要更大。

就像做一把锤子，

一方面，这把锤子应该要做到能打各种各样的钉子；

另一方面，这把锤子还要有足够的重量，这样我在打钉子的时候可以更加省力；

除了这两点之外，还能更进一步。研究我们人类在使用锤子打钉子的技巧，比如如何握住锤子、打钉子的姿势、身体哪里发力、打击的角度等等，研究出最佳的锤钉子技巧，教给用户，并且把锤子设计成最适合这套技巧的样子配合使用。

这样，所有用户都能用差不多的方法去使用这种锤子，不知不觉中，让所有用户都能更加省力地高效地打钉子。（我为什么要举这种例子？果然我还是牛马呀~）

因此，一个优秀的前端 UI 框架会有自己的设计理念和方法论。

框架本身就是基于这个设计理念和方法论去做整体架构设计的。当用户遵循框架的设计理念去应用框架，就能极大地提升开发效率。所有应用这个框架编写出来的代码看起来就会差不多，从而提升项目的可维护性。

就跟编码规范一样，一个遵守统一编码规范的团队，能够带来非常多的好处，提升整个团队的开发效率。所有的前端开发都按照框架的设计理念和方法论去编码，同样能带来极大的效率提升。

另一方面，跟编码规范一样，你也可以不遵守这个编码规范，这样的后果就是会降低自己的开发效率。

这么讲有点抽象，就拿 React 举例，React 的设计理念在它的官方文档已有说明，可以看这篇文档：React 哲学。

React 的核心设计理念就是组件化和声明式UI。如果你理解 React 设计理念，并贯彻它的哲学去组织你的 React 代码，就能开发出高可维护的代码，从而提升自己的开发效率。

当然也有很多前端同学没有遵守 React 哲学，不是不想，而是没有深刻理解。就拿组件化来说，大家开发的都是 React 组件，但是有很多都是一个页面就只有一个 App 组件，大几百行几千行的组件也很常见，这不能称为组件化，只是披了个外衣而已。

结语

今天的内容就快到结尾了，给大家做个小结。

在学前端 UI 框架之前，一定要搞清楚：前端 UI 框架的作用和意义是提升前端同学在开发 UI 界面的时候碰到的效率问题的。

前端 UI 框架通过以下 3 层封装达到提升开发效率的目的：

系统兼容性
语法糖
统一编码规范

第三层的封装是大家不易察觉的，但却是提升我们开发效率的利器。

因此，希望后续你在学习前端 UI 框架的时候，一定要深入了解 这个框架的设计理念，想办法理解它 ，并不断实践它。