重构项目前端js框架

在重构项目中,暂时以requirejs作为javascript模块加载器,以jQuery做为基础框架,bootstrap作为响应式布局框架,dataTables作为表格处理框架,jQuery-validation作为前端表单验证框架,HighCharts作为图表框架,jquery-ui作为其他插件的框架。以下是这些框架的官方首页:

requires:http://www.requirejs.cn/home.html

jQuery:http://jquery.com/

bootstrap:http://v3.bootcss.com/

jQuery-UI:http://jqueryui.com/

dataTables:http://datatables.net/

jQuery-validation:http://jqueryvalidation.org/

HighCharts:http://www.hcharts.cn/

jQuery

由于jQuery的流行和普及,以及其简单易用的特性,在重构中采用jQuery做为前端开发的一个基础框架,可以提高开发效率。

目前jQuery有2个分支:jquery-1.xx和jquery-2.xx,jquery-1.xx支持IE浏览器(6,7,8)和W3C标准的浏览器的库,jquery-2.xx只支持W3C标准的浏览器的库。如果项目不需要对IE浏览器(6,7,8)进行支持,可以采用jquery-2.xx进行开发。

bootstrap

由于重构项目需要支持PC端和PAD端,页面需要做相应式布局。Bootstrap是最受欢迎的 HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。

bootstrap中包含了一套全局CSS样式、各种组件和javascript插件,还可以根据项目需求对其进行定制。

jQuery-UI

         jQuery-UI是一个基于jQuery的一个插件系统。里面包含了日期控件、模态对话框、文本框自动提示、进度条等功能,我们可以根据项目需求下载需要的功能。

jQuery-validation

         jQuery-validation是一个基于jQuery的前端表单验证框架。它提供了国际化功能、同步/异步提交表单的功能、内置多种验证规则、可扩展的验证规则机制、联合验证、错误信息位置设置等等功能。

dataTables

         dataTables是一个基于jQuery的表格展示插件。它提供了国际化功能、多皮肤、多数据源、分页、排序、搜索等功能。

         dataTables可以使用其他jQuery框架的css样式,如bootstrap,jquery-ui等。

HighCharts

         HighCharts是一款适用svg进行绘图的功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库。它提供了曲线图、区域图、3d图、柱状图、饼图、散列图以及混合图的绘制。

Requirejs

         RequireJS是一个JavaScript模块加载器,采用AMD方式对js进行加载。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

         Requires打包压缩方法:

                   http://www.cnblogs.com/snandy/archive/2012/06/06/2536969.html

         Requirejs使用注意事项:

Ø           data-main入口点设置:在main.js中设置的脚步都是异步加载的,所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。

Ø  设置path的时候,要注意别名可能与js文件中的命名空间冲突问题。例如使用dataTables插件,path设置为:

require.config({

         paths: {

                   jquery:"lib/jquery-2.1.4.min",

                   dataTables:"lib/jquery.dataTables.min",

                   bootstrap:"lib/bootstrap.min"

         },

});

                            这样设置,在使用$(“#table”).dataTable()的时候会报错,因为别名“dataTables”

                            和jQuerydataTables的命名空间dataTables冲突了,应该换其他的别名。

Ø  使用有依赖关系的组件的时候,要通过shim参数来设置他们的依赖关系:

require.config({

         paths: {

                   jquery: "lib/jquery-2.1.4.min",

                   datatables:"lib/jquery.dataTables.min",

                   bootstrap:"lib/bootstrap.min"

         },

         shim: {

                   'bootstrap':['jquery'],

                   'datatables':['jquery']

         }

});

Ø  定义模块(define)

n  一个js文件只定义一个模块

n  可以将模块定义为object和function,其中function的返回值可以是object,也可以是另外一个function

n  定义模块的标准格式:

define([“jquery”],function($){});

define(function(require,exports, module){});


猜你喜欢

转载自blog.csdn.net/wenzhihui_2010/article/details/50010793
今日推荐