最佳实践
BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt
前期技术选型
- BootStrap + Backbone.js + require.js + jquery插件
- ExtJS
- Angular.js
- BootStrap + jquery + jquery插件
前端技术选型总结：
- 之所以选择 BootStrap + jquery + jquery插件 的原因是因为ExtJS或Angular.js这种大而全的MVC框架，学习成本较大，之前没有项目经验；
- 弃用require.js或sea.js（模块化工具）以及Grunt（自动化构建工具）的原因是接手项目时已经是二手项目，并且rails有js模块化工具和自动化构建工具
但如果后台web框架不提供模块化工具和自动化构建工具，就非常有必要使用类似于sea.js、require.js这样的模块化工具以及Grunt这样的自动化构建工具
前端技术图示
备注：有些技术未用到
前端插件使用心得
图表
- Echarts
- 综合评分：5星
- 易用性：4星
- 收费：否
- 使用心得：百度良心打造canvas图表库，能基本满足所有线上图表需求，示例多、主题丰富、线下询问方便，但有一些bug（不影响正常使用）
- d3.js
- 综合评分：4星
- 易用性：3星
- 收费：否
- 使用心得：开源SVG图表库，在图表较为复杂时，可以使用d3来绘制，示例多，但易用性较差，本项目中未使用
- HighCharts
- 综合评分：4星
- 易用性：4星
- 收费：是
- 使用心得：收费高，易用性高、未发现bug，图表丰富，本项目中未使用
表格控件
- DateTables
- 综合评分：5星
- 易用性：5星
- 收费：否
- 使用心得：功能强大，有BootStrap风格样式，本项目中未使用
- st-grid3.0
- 综合评分：4星
- 易用性：5星
- 收费：否
- 使用心得：公司内部组件，可扩展性高，灵活性大，但有些功能尚不完善，可自行扩展
时间控件
- jquery datepicker
- 综合评分：5星
- 易用性：5星
- 收费：否
- 使用心得：可用于单天日期选择，API完善，能满足大部分需求，建议自行从该插件扩展功能，同时有BootStrap风格的皮肤，本项目中未使用
- DateRangePicker
- 综合评分：5星
- 易用性：5星
- 收费：否
- 使用心得：双日历时间控件，当然jquery datepicker也可以控制显示多个日历表，但本控件封装的较为完善，满足了较为复杂的需求
多选日历
- KitJS多选日历
- 综合评分：3星
- 易用性：3星
- 收费：否
- 使用心得：在论坛中找到，感觉像是为了完成示例一样的插件，现在作者不再维护，可扩展性差，在本项目中为完成需求曾多次修改其源码
- jquery Kalendae
- 综合评分：未知
- 易用性：未知
- 收费：否
- 使用心得：将此插件找到后未使用，由于其为jquery插件，可扩展性会比上款多选日历的插件要好些（当然也只是感觉），本项目中未使用
下拉菜单
- select2
- 综合评分：5星
- 易用性：5星
- 收费：否
- 使用心得：可用于单选或多选，可根据关键字搜索，易用性高，API完善
对话框
- st-pop
- 综合评分：5星
- 易用性：5星
- 收费：否
- 使用心得：公司内部对话框组件，灵活性高，可扩展性强，但样式方面可能需要使用者自行修改符合系统的风格
树形控件
- zTree
- 综合评分：5星
- 易用性：5星
- 收费：否
- 使用心得：API完善，易用性高，但一次性生成多个节点速度会比较慢，这也是生成大数据量的DOM节点时的弊病，本项目中未用到
及时编辑控件
- Jeditable
- 综合评分：4星
- 易用性：4星
- 收费：否
- 使用心得：样式简洁，可所见即所得的编辑文字，可自行扩展样式
css前端框架
项目构建工具
- Grunt
- 综合评分：5星
- 易用性：4星
- 收费：否
- 使用心得：自动化构建工具，可一键式压缩（minification）、编译、单元测试、linting，结束您反复的构建工作。
模块化
- sea.js
- require.js
- 综合评分：都是5星
- 易用性：都是5星
- 收费：否
- 使用心得：两个模块化工具，是两种不同的规范，sea.js是CMD规范，require.js是AMD规范，在本项目中未使用
js MVC 框架
- Backbone.js
- 综合评分：4星
- 易用性：4星
- 收费：否
- 使用心得：学习方便，源码仅有2000多行（带注释），非常适用于移动版，个人感觉，Backbone虽然没有其他MVC框架那么强大，但是也因此更加灵活，个人感觉可以当做多人协作的代码规范工具，在项目中未使用
- Angular.js
- 综合评分：未知
- 易用性：未知
- 收费：否
- 使用心得：在项目中只是用到其上传文件的组件，Angular是Google开源的一个MVC框架，功能非常强大，但是报错不是特别明显，调试bug比较麻烦
- ExtJS
- 综合评分：3星
- 易用性：3星
- 收费：是
- 使用心得：非常符合企业级的内部管理系统，高强度定制化，学习成本高，维护成本高，调试bug比较麻烦，学习教程
js库
- jquery
- 综合评分：5星
- 易用性：5星
- 收费：否
- 使用心得：非常好用乃至接近完美的js DOM 库，jquery UI更是非常方便且易扩展，并且jquery UI 现在有BootStrap风格的皮肤
图标字体
上传控件
- jquery FileUpload
- 综合评分：5星
- 易用性：4星
- 收费：否
- 使用心得：配合HTML模板比较简单易用，但是在本项目中整合到rails中就不是很好用，但仍不失为一款非常好用的拖拽上传软件，支持查看上传进度
- 百度WebUploader
- 综合评分：未知
- 易用性：未知
- 收费：否
- 使用心得：百度FEX刚刚出的一款HTML+Flash上传插件，功能较为强大，但未在真实项目中使用，不知其性能和易用性如何
视频播放插件
- jwplayer
- 综合评分：4星
- 易用性：4星
- 收费：否（但去LOGO，需要收费）
- 使用心得：由于HTML5不支持在线播放Flash格式视频，所以需要外在插件，jwplayer的确是不错的选择，但在本项目中也是自己进行破解其插件才打到需要的效果
公司某项目前端技术积累,布布扣,bubuko.com
公司某项目前端技术积累
原文：http://blog.csdn.net/sunyingyuan/article/details/38237139
