前端框架初接触感悟

学习前端时,绕不开的就是前端框架。关于前端框架,真是乱花迷人眼:各大主要的技术公司都会推出自己的前端框架,在难以一一试用的情况下,很难说哪一个更适合自己使用。另一方面,初接触前端框架时,真的很迷茫,不知道框架是怎么定义的,也就不知道怎么去使用这些框架,网上的资料大多语焉不详,或直奔主题,没有给人“引子”。不过门路是可以慢慢摸通的,只要有耐心,英文网站里有足够多的资料供你阅读,我也对前端框架有了一些感悟。

所谓框架,就是一些预先定义好了的“样式”,也是一种固定的设计模式。通过使用框架,设计开发者可以不必考虑底层的实现细节,而专注于使用现有的“半成品”来搭建自己的成品。打个比方,要做一个书架,你可以从一块块木头锯起,自己搭好架子,自己组合成一个个“框”,这是原始的搭建方式。而“框架”的实现,则是假设你有很多个大小规格不一、颜色花纹各异的框子,你要做的就是选择合适的搭配,来组合成一个书架,而不再需要从锯木头开始了。

毫无疑问,使用框架可以大大减少设计开发者的工作,而并不会减少设计上的灵活性,这些预先定义好的样式是可以修改的,设计师可以只关注对自己有用的样式,专注做好个性化定制,同时直接使用一些已经定义好、符合需求的标准样式。使用框架唯一的问题在于:由于忽略了底层细节的开发,设计开发者可能会慢慢失去开发新技术的能力,就好比一个习惯打字的人在使用笔写字时会忘字一样。当然这主要是看需求,有些设计开发者不需要考虑那么底层的东西,而有些开发狂热者则会始终积极地去开发新的技术。只要自己把握好即可。

我目前所理解的前端框架,大概可以分为css框架、js框架和综合性前端框架。

我最初接触到的框架,是bootstrap,这是twitter开发团队的框架,自然有其独到之处。但是一开始的时候,我看着网站上的介绍,很迷茫,根本不知道从何入手。好在不久之后我就接触了一些简单的css布局框架,如960.gs、unsemantic,举一反三,对前端框架有了新的认识。

960gs

960.gs。这是一个很多年前就流行起来的网格式布局框架。它专为生成960px大小的网页而设,提供12或16列网格,使用者可以自由组合不同的列数,形成两栏或多栏布局。在构建网页布局时,最初遇到的问题就是两栏和多栏的问题,做多栏时往往要费劲地使用浮动,计算外边距……使用这个布局框架则很方便地生成不同的多栏了。不过这个框架已经存在比较久了,没有实现响应式设计,而作者也在网页上推荐一个新的布局框架unsemantic了。

unsemantic

unsemantic。实际上这是一个作者杜撰出来的词,semantic的意思是语义化的,所以unsemantic则是非语义化的。很好理解,布局框架的层id都是使用“grid-数字”的形式,自然无法使用有意义的英文单词令层的作用更明白。unsemantic加入了响应式设计,因此宽度不再限于960px了。它的加载方式更加灵活。你可以选择一次性载入考虑了各种设备宽度的响应式设计css文件,也可以使用一个js文件进行判断,再选择性地载入适合相应宽度的css文件。我比较推荐的是使用js加载的方式,虽然增加了一个js请求,但css文件可以减少约一半的体积,还是值得的。

bootstrap

bootstrap。作为鼎鼎大名的twitter推出的前端框架,目前的热度挺高的。bootstrap是一个综合性的前端框架,包含了布局、基础css、js、组件等,因此它是可以用来开发完整的网站的!目前我主要看了布局部分,它可以使用12列实现网格布局,也支持流式网格,同时支持响应式设计,基本囊括了一些最新的前端布局技术了。

如何使用前端框架。简单来说,一个前端框架里面一般包含着一些css和js文件,它们定义了基本的样式和js元素。使用框架时,先在头部引入合适的css和js文件,然后参照框架官方网站的技术文档,在构建html代码时,调用相应的样式名称或id即可。具体用法还需要多参照官方文档。

使用前端框架,尤其是国外的,一般都要考虑一个浏览器兼容性问题。一般来说,很多框架都会兼容到IE7,而不兼容IE6了。这在国外没有什么问题,IE6的份额已经非常的低。其实这在国内也不是什么大问题了,随着win vista、win7的普及,越来越多的电脑都是使用IE8以上的浏览器了。以我搭建维护的一个网站为例,从统计数据中看到,IE6的占有率只有4%,完全可以不再考虑了。但是IE7还是要考虑的,相当一部分使用win xp的人在使用IE7,而且很多国产浏览器(比如搜狗浏览器)在使用所谓的“兼容模式”浏览时,其实就是在用IE7内核的。

使用前端框架还有一个非语义化的问题。前面也提到,前端框架做布局的层一般都是预先定义好的,因此也就失去了语义化。其实现在语义化主要是为开发维护方便,对搜索引擎优化所起的作用应该很有限。若只是外层大的布局设计使用框架定义的层,对于一些包含具体网页内容的层使用自定义的层名,应该还是不存在问题的。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>