引言

在学习前端的过程中，我开始接触到许多开发框架或开发工具，这些工具让我开始眼花缭乱。使用常规的html/css/js就已经能够开发出这种网页了，所以我问自己，为什么要学习这些框架或工具，这些库是用来解决什么问题的。想明白这个问题，我学习的目的就更加明确，在遇到一些开发情景时，也能够快速准确地挑选出应该使用的框架。

下面按照我目前的理解，对目前的主流的前端开发库进行一些分析和比较。由于我还是一个初学着，所以我的观点可能还不是很成熟。

为什么要使用jQuery

jQuery是一个轻量级js库，它有如下特性：

  • 简化了HTML/DOM操作
  • CSS选择器
  • 动画特效支持
  • 解决跨浏览器的兼容行问题
  • 完善的Ajax支持

在查阅资料的过程中，我还听到一些主张停用jQuery的声音。原因就在于随着前端开发生态不断的完善，现代浏览器原生API已经足够好用。

为什么要使用SASS

SASS是一种CSS预编译格式，它最终会编译成CSS。
SASS提供了CSS语法的拓展，它支持变量，算数运算符，循环操作，函数操作，样式模板（mixin）等强大的特性。它能够让开发人员更方便地编写CSS。SASS支持 import 关键字，这样就能够很方便地对样式进行模块化设计。

加一句题外话，在使用SASS时，需要考虑的另一个问题就是代码物理结构的安排（直白的说就是目录的划分，源文件的存放位置等），这也是所有代码开发中需要注意的问题。

与SASS相似的工具还有LESS。

为什么要使用Bootstrap

Bootstrap是一个用于快速开发网页的前端框架。以我目前的理解来看，它更像是一个网页样式框架。

  • 丰富的基础样式和资源
  • 响应式（responsive），良好的移动端支持
  • 强大的网格（grid）系统
  • 一致性，保证跨浏览器的样式一致

为什么要使用React

DOM操作对性能的影响很大，频繁的DOM操作会使网页渲染的速度变慢，React主要解决了这个问题。
React.js允许在js中编写html，形成Virtual DOM，只在变化进行重新渲染。

下面的一段文字摘自参考资料中的第5篇文章。

  • Am I building an app which has lots of DOM interactions, or is it a relatively simple app with relatively few interactions?
  • Does my app require a very high browser performance, that any user interactions must immediately be reflected in the UI? Is my data going to change over time, at a high rate?
  • Is one user interaction going to affect many other areas/components in the UI?
  • Is there a possibility that my app could grow big in the future, and so I would want to write extremely neat, modular front-end JavaScript that is easy to maintain? Would I want to use lots of native JavaScript or would I prefer using a lot of abstractions/methods provided in a framework?
  • Would I prefer a framework/library which does not have a high learning curve and which is pretty easy to get started with development?

在使用React之前，问自己这样几个问题，就能够帮助你决定是否需要使用React。

  • 所开发的网页应用涉及到很多DOM操作么？
  • 开发的网页应用需要很高的性能么，这意味着任何用于的操作都要立刻反应在界面上？我的数据变更会很频繁么？
  • 我开发的应用会在未来逐渐变得复杂么，这样我就需要将前端的js代码模块化？我是否会使用许多原生js特性，是否虚幻使用框架提供的抽象方法
  • 是否需要一个学习曲线比较平缓的框架，能够方便地上手进行开发？