重构项目前端js框架
2015-11-24 12:02
211 查看
在重构项目中,暂时以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有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中包含了一套全局CSS样式、各种组件和javascript插件,还可以根据项目需求对其进行定制。
dataTables可以使用其他jQuery框架的css样式,如bootstrap,jquery-ui等。
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){});
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){});
相关文章推荐
- JS获取当前时间
- 如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap
- nodejs npm常用命令
- JS获取当前时间
- jQuery 增加 删除 修改select option .
- UVA 11552 Fewest Flops
- firebug更新1.12,新功能和改进解析
- jQuery $.ajax写法-自用
- 基于jquery实现日历签到功能
- CSS box-flex属性,然后弹性盒子模型简介
- Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
- css background属性的使用方法
- JSON及JSON-LIB
- jQuery源码学习7——实例成员
- Javascript:ajax
- html 网页代码大全,总结,使用
- 【Copy】jQuery常用方法一览
- C#实现将javascript文件编译成dll文件的方法
- HTML中<script ...>....</script>标签的正则表达式?
- JS实现图片高亮展示效果实例