前端架构总结

1 、Bootstrap框架

Bootstrap的前端开发框架是指叠样式表（css），java脚本及html的一系列产品化组件的集合。开发人员利用前端开发框架来创建响应式且符合用户要求标准的网站，同时，在设计中能最大程度减少投入的精力，达到了简单而一致的效果。Bootstrap 框架作为一个WEB前端工具，可以用来开发兼容谷歌，火狐，IE等多种浏览器且精致的页面； 能提供多种流行简洁的UI 组件、特有的栅格系统以及部分广泛使用的脚本插件，便于应用人员进行调用，简而言之，Bootstrap 框架为网页设计人员提供了一个设计工具包。

优点

（1）扩展性强，能够更好的与现实的web开发项目结合。

（2）该框架不断适应web技术的发展。

（3）比较成熟，在大量的项目中充分的使用和测试。

（4）拥有完善的文档，使用起来更方便。

（5） Bootstrap提供了非常豐富的组件与插件，组件包含小图标、按钮组、菜单导航、标签页等等[3]，并接受定制。

（6）扩展性强，兼容各种脚本插件。

（7）拥有现成UI组件，可以快速搭建网页页面。

（8）前端处理简洁，在Blog系统搭建过程中使用方便。

（9） 当网站不需要支持ie6.减少了兼容代码的处理。

（10） Bootstrap框架为用户提供了一套响应式移动设备优先的流式栅格系统[2]，拥有完备的框架结构，整体效果和谐，对谷歌，火狐，IE等浏览器均可支持，项目开发方便快捷。

缺点：

（1）对于有特殊需求的使用者，bootstrap框架会对其带来较大的麻烦，需要做大量的css重写来改善非bootstrap“风格”的样式，导致该网站失去使用框架的意义。

（2）会有兼容问题，对底版本的浏览器兼容性不太好，页面显得更加死板，影响用户体验。

（3）js插件在导航页面直接切换到相应位置中，需要用js丰富它的内容，否则效果像是一个锚点，并没有滚动动画，不能尽如人意。

（4）定制会产生大量代码冗余，使用者利用css把原有的样式覆盖，当修改较多时被覆盖的代码没有了使用价值。

（5）Bootstrap框架设计使得HTML不再是语义及表现和内容分离的，最终会导致一堆充斥着class的DOM元素，不遵循最佳实践。部分开发人员会觉得相当刺眼，因为对扩展性，重用性和维护更是个挑战。

（6）当你突然要投入到相对较庞大的项目当中 ，想要通过Twitter Bootstrappy 直接享受其所有的好处，你会发现它和已存在设置发生相冲突的问题，而这些问题也将对项目原有的HTML，层叠样式表和Java脚本有较多的影响。于此同时，会发现在这个框架当中的某些资源条件，需要通过删除或者替换才能到达想要的效果，这当中必须要经过对该项目进行大量的计算工作来得出。Bootstrap在使用过程中出现一些修复奇怪的错误增加你额外的工作量是不可避免的，而这些与使用者一开始想要使用一个完整而简洁的框架是有所违背的。