浅谈框架与库

实例引入框架与库

假如需要买一台电脑，框架是一台组装好的电脑，买回来直接可以用了，每个人都可以使用这台电脑。但是库就是买回来一些组件，需要自己组装成电脑，才可以使用，组装的过程中，如果缺少些什么，还可以自己创造。
库与框架的最大区别在于：库的使用非常灵活，但没有框架方便。

框架与库的区别

库（Library）

1. 库是将代码集合成一个产品，供程序员调用。
   面向对象的代码组织形式而成的库也叫类库，面向过程的代码组织形式而成的库叫函数库，在函数库中可直接使用的函数叫库函数。

库为我们提供了很多封装好的函数，使用灵活，需要哪部分就用哪部分即可，未实现的自己来写也OK。

2. 类库：方法库，UI组件库

   • 目的：让程序员拿现成类来诞生对象，并未预留空间给程序员来修正。
   • 应用程序的函数只能调用类库中的函数，反之不可。
   • 类是独立的，并未设定对象间的沟通方式。
   • 对象的行为皆是固定的，无法修正之。

框架（Framework）

框架则是为了解决一个（一类）问题而研发的产品。
框架用户一般只需要使用框架提供的类或函数，即可实现全部的功能。

框架中的各个类并不是孤立的，而框架中的逻辑代码是将不同的类‘连’在一起，在他们之间建立协作关系，也就是说，在使用框架时，必须使用框架的全部代码，即使某些地方用不到，但是也必须按照框架的使用规则来使用。

2. 框架

   • 目的：让应用程序员 衍生出具体类，衍生时可修正类，才衍生对象。
   • 应用框架中的类的函数，常调用应用程序中的函数。
   • 含有类之间的关系，其预设了对象之间的合作关系。
   • 物件常用来预设计行为。

设计语言（Design）

Design是设计语言。当说到xxx Design的时候，前端应该经常听到 Material Design和Ant Design，分别是Google和阿里的推出的两种前端UI设计语言。Design和具体实现是松耦合的，没有直接必然关联。规范只规定这种设计语言的风格是什么样子的，从来不指定具体实现，谁都可以实现。

Material Design起初是指导Andoid界面的，但是也存在很多Web UI的实现，例如基于Bootstrap开源的有Bootstrap Material。

Ant Design也是一样。只是最开始只有React的实现Ant Design of React。阿里团队后期发布了Angular的实现Ant Design of Angular(NG-ZORRO)。

模板、样板（Boilerplate）

当你用React开发的时候，React本身不能满足全部需求，就需要周边辅助的项目。如何把这些全家桶用最佳实践(Best Practice)的方式组合在一起？就需要有人给一个样板，Ant Design Pro就产生了。所以Ant Design是设计语言、Ant Design of React是遵循这门设计语言并且用React实现的UI组件库，Ant Design Pro就是模板。

脚手架工具（Scaffolding）

前端的脚手架工具一般都是用cli提供的，cli是( Command Line Interface的缩写）。Scaffolding的作用就是辅助你快速搭建项目。但是Scaffolding不是最终成果物的一部分。

前端框架（部分）

1. ReactJS (Star: 59989 Network Graph · facebook/react · GitHub,Fork: 10992)

React.js（React）是一个用来构建用户界面的 JavaScript 库，主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

2. AngularJS (Star: 54769 ,Fork: 27292)

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程，提供 Web 应用的架构，无需进行手工 DOM 操作。 AngularJS 很小，只有 60K，兼容主流浏览器，与 jQuery 配合良好。

3. Vue.js（Star: 43608, Fork: 5493）

Vue.js 是构建 Web 界面的 JavaScript 框架，提供数据驱动的组件，还有简单灵活的 API，使得 MVVM 更简单。

4. 、jQuery（Star: 43432, Fork: 12117）

Jquery 是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

5. Meteor(Star: 36691,Fork: 4617)

Meteor 是一组新的技术用于构建高质量的 Web 应用，提供很多现成的包，可直接在浏览器或者云平台中运行。

6. Angular2（Star: 20803，Fork: 5367）

Angular 是一款十分流行且好用的 Web 前端框架，目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本 Angular.js 分开维护（两者的 GitHub 地址和项目主页皆不相同），所以就有了这个页面。

7. Ember.js (Star: 17540,Fork: 3646)

Ember是一个雄心勃勃的Web应用程序，消除了样板，并提供了一个标准的应用程序架构的JavaScript框架。

8. Polymer(Star: 16979, Fork: 1699)

在2013年的Google I/O大会上，Google发布了Polymer，它是一个使用Web组件构建Web应用的类库，同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills功能，它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外，Polymer提供了一系列的部件的例子，其中包括天气、时钟、股票行情和线型图。

9. Zepto.js（Star: 12074，Fork: 3260）

Zepto.js 是支持移动WebKit浏览器的JavaScript框架，具有与jQuery兼容的语法。2-5k的库，通过不错的API处理绝大多数的基本工作。

10. Riot.js（Star: 11491，Fork: 902）

Riot.js是一个客户端模型-视图-呈现(MVP)框架并且它非常轻量级甚至小于1kb.尽管他的大小令人难以置信，所有它能构建的有如下：一个模板引擎，路由，甚至是库和一个严格的并具有组织的MVP模式。当模型数据变化时视图也会自动更新。

常用插件，工具等

三大框架的对比

1. Angular
   2009年发布，主要版本1.x，2.x，4.x，5.x(beta)
   基于html的大而全的MVC框架，还在解决JS问题，对于html和CSS处理比较少.
2. React
   Facebook在2013年5月开源，主要版本16.X。
   基于JS的视图层框架，把html,css都可以转成js一部分，js作为整个程序的入口，只关心页面的显示。
3. Vue.js
   2014年尤雨溪发布，主要版本0.1.x，1.x，2.x，3
   基于HTML的视图层框架。

4. 框架对比

   
   对比图.PNG
5. 适用场景

• Angular：后端开发人员构建CVRD类型应用
• React：前端开发人员构建复杂的web应用
• Vue.js：前端开发人员快速构建web应用