Web前端框架

一、前端框架介绍

1、前端、后端

那么首先什么事前端呢？ 有前端肯定就会有后端。

大家都知道，我们在浏览器上浏览网站的数据都是来自服务器端处理提供的。那所谓前端就是指我们在浏览器上所见到的UI界面和交互，后端是指服务器的数据处理。

成为一个前端开发高手，必须得精通的技术就是HTML、CSS和Javascript。后端开发也就是服务器开发会用到PHP / python和最近很火的node.js。

那么接下来就进入今天的主题，前端框架。

什么是前端框架？它又能给我们带来什么好处呢？

我通过讲解一个著名框架诞生的过程，来为大家解决这些问题。

2、Bootstrap介绍

一个程序员在网页上通过上面的代码创建了一个提交按钮，这个时候公司的设计师说这个默认样式太方了，加个圆角比较好看。

程序员照做。

不过设计师觉得应该加上外边框显得炫酷。

程序员照过。

设计师还是觉得有点挤，应该把内边距调整大一点。

程序员照做。

最后设计师很满意，给产品经理看。

产品经理是个处女座，对细节很敏感。他说高度要调整到1.42857143像素。

程序员终于把一个按钮改好了。

一个默认的按钮加上了非常多的样式最终变的非常漂亮。

于是这段CSS代码被用在了公司的很多项目上。

公司的设计师不仅设计了按钮，还有表格、表单等UI控件，程序员为他们写了CSS代码，渐渐的这个文件变的很大，很丰富。

形成了一个框架。

有一天公司的设计师和程序员决定把这个框架开源到GitHub，这个设计非常出色的框架一经公布，在Web领域掀起了热潮。被很多公司或者个人所使用。包括GitHub自己也是使用的这个框架。

这个神奇的公司就是Twitter。

框架名字称为Bootstrap。

其实Bootstrap厉害的地方不仅仅只有UI设计，而且在Web布局上也大胆创新，让Web布局变的不再那么复杂。

所谓布局就是什么内容摆放在哪里，怎样设置才能达到效果。 

这是一张一个音乐网站的局部截图，可以看到内容分为三个部分

最新推荐、最热推荐、和精彩活动。

如果按照传统的布局方法，我们需要将这三个div区块分别进行左浮动，还需要将下面的区块依次进行清除浮动。内容少一点还好，可是一多起来就会变的非常复杂，经常会遇到DIV区块不见了 ／ 布局混乱的情况。

为了解决这个问题，Bootstrap采用了一种栅格化的布局方式。

它将网页页面分成12份，当你需要定义这个区块大小和位置的时候，你只需要指明这个区块从第几分开始，占用多少份就可以了。

比如我想创建12个Div区块平铺在页面上，传统做法是对12个区块进行依次左浮动。而现在我只需要制定一下他们的Bootstrap样式就可以了。每个div样式为col-md-1。

如果我想实现这种 8 4 分的布局，直接可以写这样的样式。

那样我们再回到刚才那个案例，一行上有三个区块，三等份。

我们的做法就是在源代码中首先引入Bootstrap文件，然后创建一个行。

行里三个Div，每个DIV制订一个col-md-4样式。分别在他们里面写入内容就可以实现这种布局了。

这个就是Bootstrap，在github上星星最多的前端框架，风靡全世界。

说到风靡，不得不提的另一个前端框架，JQuery。

2、JQuery

刚才的Bootstrap主要特色在于UI的设计，那么JQuery又是什么类型的框架呢？

JQuery其实是对javascript的封装

Write less , do more.这个是JQuery的口号。顾名思义就是一句话做很多javascript做的事情。

我从JQuery的众多特色功能中跳出来四个比较有代表性的为大家介绍一下。

1、方便获取 DOM 对象

html里面的元素都是有dom对象组成，我们使用javascript去获取元素的时候很费劲，需要调用这些名字很长的方法。而且限制还很大，只能是id class 和 标签名。

JQuery中获取DOM对象的方法很简单，直接用$()包住。id就写＃，class就写.，还不止这些，最神奇的地方就是这里面可以填写CSS的选择器。比如说选择具备某个属性的标签，某个标签的子标签等等。

2、方便动态修改DOM内容

在HTMLDOM中其实一个<p>内容</p>这样的标签是两个DOM对象，一个<p>，一个里面的内容。这个时候我们想要用js添加一个段落的话。就需要新建两个DOM，然后填充内容后插入到DOM中。

利用JQuery可以很方便，直接append就可以了。

3、为页面添加动态效果

JQuery还提供了一些简单的动画，比如我想实现一个小球滚动动画。利用js来实现的话，需要绘制小球在每一帧上的位置，而且如果要调整速度曲线的话还非常困难。这个时候可以借助JQuery用一个函数就实现了。

$(‘#content’).hide(“slow”);这句话实现了一个控件的渐渐消失。

4、统一的ajax操作

什么是ajax呢？

ajax其实是一种网页的局部刷新技术。通常客户端发送一个请求，服务器响应过来，整个页面都会刷新。有些时候并不需要刷新整个页面，就像百度的首页，右下角又一个时事热点，点击［换一换按钮］并不会刷新整个网页，只是获取了服务器的热点数据直接更新到这个区域。这个时候就用到了ajax技术，他通过javascript和服务器通信，服务器返回信息给javascript接受，然后javascript将内容更新到网页指定的区域。

这项技术是非常好的，但是有两个严重的缺点：

1、代码冗长复杂 2、各个浏览器兼容性不好

JQuery中对ajax有很好的封装，只需要一行代码就能够实现，也很好的解决了兼容性的问题。

3、JQueryUI

说到JQuery，不得不提JQueryUI这个框架。从名称就可以看得出来，这是一款基于JQuery对UI和交互进行封装的库。他让很多交互式的界面实现起来变的更加简单，例如模态框等。

4、React Native

最后再看一下ReactNative。

这个框架是顶顶大名的Facebook在今年上半年发布的一个很厉害的框架。他并不是Web框架，而是一个移动端开发框架，但是却基于HTML5和javascript。

这个框架厉害在哪里呢？

利用这个框架开发的应用程序，能够直接运行在ios 安卓 上， 而且UI空间都是符合系统风格的。

因为它是基于网页的，网页有这样一个特点，就是通用型很强，不管什么操作系统，什么硬件设备，只要浏览器遵守标准，那么他们的显示都是差不多的。所以这个框架能够实现这个伟大的功能。

二、项目中如何选取前端框架

1、人气

就像商城里面销量好的产品一定不会差到哪里去。框架只要人气高了，参与使用的人就会有很多，那么和他相关的一些文档就会很丰富，网络上对这个框架的问答就会有很多，利于我们使用、学习。

2、是否持续维护

一个框架是否还在积极维护非常重要。因为框架会有很多潜在的漏洞，如果发布了一阵子就不去维护了，那些漏洞就会越来越多，但是没人去解决。这个时候项目一旦使用了这样的框架就会很危险。

3、是否成熟

一个成熟的框架能够给项目带来事半功倍的效果，试想一下一个产品里面采用的是测试版本的框架，那会是多么疯狂的事情。

4、按需选取

很多框架都是有自定义配置功能的，比如上面讲到的Bootstrap。在做项目的时候需要联系自己的项目情况进行按需选取，需要用到什么样的效果、功能，框架就配置什么功能，保证最终的项目不要冗余。

5、兼容性

在Web领域，兼容性非常重要，同时也是一个头疼的问题。为了解决各大浏览器的兼容性问题，要求程序员编写非常多的兼容性保证代码，如果用框架的话，就需要这个框架兼容性能够非常好。不然还是达不到效果，等于没用。