敏捷AJAX开发思考(php jQuery)
2011-04-23 17:11
218 查看
敏捷AJAX开发思考
问题起源
在进行WFS手机端接口开发时,我发现前后端的完全分离为开发者提供了很大的便利。基本上开发者只需要约定传输的数据格式就能互不干扰的进行工作。
它相对于常规的mvc中的模板方式的优势在于:
后台工作者不需要再进行模板翻译,不用再写载入模板的语句。
后台代码可以更大程度的复用,通过json格式与前台进行交互,可以完美地复制到移动开发等其他应用中。
前台工作者可以自主载入ui组件,独立调试。
mvc的出现其实已经使得前后台有了很大的分离,但是在实际操作中,我们发现模板页常常需要进行复杂的调用,使得后台工作者需要编写能返回带html格式的结果的函数。在drupal的开发中,前台工作者甚至需要学习drupal的部分钩子,编写代码才能进行主题开发。
解决方案(暂称为DR)
将前后台代码、页面分离,所有页面文件单独存放在一个可以直接访问的文件夹中。后台代码仍然保持单一入口。这样DR可以与目前任意一套主流框架兼容。
后台对任何请求的数据都以json数据返回(除了图片等资源文件)。建议的格式为:{'error':/*返回约定的错误代码*/,'message':/*返回错误信息*/,'data':/*返回请求的数据*/,'plus':/*返回附加信息*/}
前台html部分将需要与服务器进行交互的表单元素都封装在<form name='/*必须填写*/'
action='/*填写提交到的接口*/'>表单里,name和action属性为必填。这里这样规定是为了在之后构造的javascript类中能方便的对所有表单做ajax处理。对于需要提交到不同接口的表单元素不需要做其他特殊处理,冗余数据在由接口忽略。
前台构造一个javascript类来封装页面的ajax操作。这里建议写一个jquery扩展。主要实现的功能为:
初始化。选择页面特效需要载入的库文件,通过在初始化中控制脚本加载来给用户最佳的体验(因为传统的<script>标签写法可能造成页面文件下载的阻塞,参考51cto.com的教程)。同时便于对库的管理。
管理页面的form表单和ajax元素。通过ajax方式提交表单能更好的控制用户体验,当提交时间过长等问题出现时,能更好的进行提示。
其他功能,如控制页面样式或者动画效果等。实现js代码统一管理。
示例代码如下:
js:
(jQuery扩展需要单独存放在js文件中)
;(function($){
$.fn.DR = function( options ){
this.opts = $.extend({}, $fn.DR.defaults, options );
//调用自己原型的初始化函数。
this._init();
};
$.fn.defaults = {/*默认设置的参数*/};
$.fn.DR.prototype = {
_init : function(){
/*1.这里进行初始化,根据this.opts来载入需要的库文件*/
/*2.自动初始化form表单和ajax元素(通过保留的class名来让DR识别ajax元素)*/
},
setCallback : function(){
/*这个方法的调用者应该是一个form的jquery对象*/
/*该方法为调用这个方法的表单设置回调函数*/
}
/*可以继续添加其他方法,如表单验证等*/
};
})(jQuery);
html:
<html>
<head>
<!--载入jquery和自定义的jquery插件-->
</head>
<body>
<form id='firstform' name='firstform'>
<input type='text' name='age' />
<input type='text' name='gender' />
<input type='submit' value='提交'/>
<script>
$().DR({/*这里填写设置*/});
$('#firstform').DR.setCallBack( function(data){
/*这里传入的值data是提交表单后服务器返回值。*/
});
</script>
</body>
</html>
总结
DR方式使web开发者可以更方便的进行js库的管理,使前台js代码变得可读性更强。
更方便前台工作人员进行开发。更容易进行独立调试。
大大减轻了后台开发人员的工作量,使得后台复用性更高。
问题起源
在进行WFS手机端接口开发时,我发现前后端的完全分离为开发者提供了很大的便利。基本上开发者只需要约定传输的数据格式就能互不干扰的进行工作。
它相对于常规的mvc中的模板方式的优势在于:
后台工作者不需要再进行模板翻译,不用再写载入模板的语句。
后台代码可以更大程度的复用,通过json格式与前台进行交互,可以完美地复制到移动开发等其他应用中。
前台工作者可以自主载入ui组件,独立调试。
mvc的出现其实已经使得前后台有了很大的分离,但是在实际操作中,我们发现模板页常常需要进行复杂的调用,使得后台工作者需要编写能返回带html格式的结果的函数。在drupal的开发中,前台工作者甚至需要学习drupal的部分钩子,编写代码才能进行主题开发。
解决方案(暂称为DR)
将前后台代码、页面分离,所有页面文件单独存放在一个可以直接访问的文件夹中。后台代码仍然保持单一入口。这样DR可以与目前任意一套主流框架兼容。
后台对任何请求的数据都以json数据返回(除了图片等资源文件)。建议的格式为:{'error':/*返回约定的错误代码*/,'message':/*返回错误信息*/,'data':/*返回请求的数据*/,'plus':/*返回附加信息*/}
前台html部分将需要与服务器进行交互的表单元素都封装在<form name='/*必须填写*/'
action='/*填写提交到的接口*/'>表单里,name和action属性为必填。这里这样规定是为了在之后构造的javascript类中能方便的对所有表单做ajax处理。对于需要提交到不同接口的表单元素不需要做其他特殊处理,冗余数据在由接口忽略。
前台构造一个javascript类来封装页面的ajax操作。这里建议写一个jquery扩展。主要实现的功能为:
初始化。选择页面特效需要载入的库文件,通过在初始化中控制脚本加载来给用户最佳的体验(因为传统的<script>标签写法可能造成页面文件下载的阻塞,参考51cto.com的教程)。同时便于对库的管理。
管理页面的form表单和ajax元素。通过ajax方式提交表单能更好的控制用户体验,当提交时间过长等问题出现时,能更好的进行提示。
其他功能,如控制页面样式或者动画效果等。实现js代码统一管理。
示例代码如下:
js:
(jQuery扩展需要单独存放在js文件中)
;(function($){
$.fn.DR = function( options ){
this.opts = $.extend({}, $fn.DR.defaults, options );
//调用自己原型的初始化函数。
this._init();
};
$.fn.defaults = {/*默认设置的参数*/};
$.fn.DR.prototype = {
_init : function(){
/*1.这里进行初始化,根据this.opts来载入需要的库文件*/
/*2.自动初始化form表单和ajax元素(通过保留的class名来让DR识别ajax元素)*/
},
setCallback : function(){
/*这个方法的调用者应该是一个form的jquery对象*/
/*该方法为调用这个方法的表单设置回调函数*/
}
/*可以继续添加其他方法,如表单验证等*/
};
})(jQuery);
html:
<html>
<head>
<!--载入jquery和自定义的jquery插件-->
</head>
<body>
<form id='firstform' name='firstform'>
<input type='text' name='age' />
<input type='text' name='gender' />
<input type='submit' value='提交'/>
<script>
$().DR({/*这里填写设置*/});
$('#firstform').DR.setCallBack( function(data){
/*这里传入的值data是提交表单后服务器返回值。*/
});
</script>
</body>
</html>
总结
DR方式使web开发者可以更方便的进行js库的管理,使前台js代码变得可读性更强。
更方便前台工作人员进行开发。更容易进行独立调试。
大大减轻了后台开发人员的工作量,使得后台复用性更高。
相关文章推荐
- PHP服务器文件管理器开发小结(十):使用jQuery和iframe实现AJAX文件上传
- ajax开发:jqueryajax+php的登录与退出功能实现
- HTML/CSS/Js/Jquery/PHP网站0基础开发到大神系列【飞鸽学院】
- php与jquery开发注意事项
- PHP桌面应用开发思考
- PHP开发环境思考
- 项目开发实战 jQuery+php+mysql实现数据上传功能
- 结合Rexsee、Jquery、PHP开发移动应用时的数据交互问题
- 项目开发实战 jQuery+php+mysql实现数据上传功能(补充!!!)
- PHP服务器文件管理器开发小结(三):使用jQuery提交AJAX请求
- php与jquery开发注意事项
- php开发微信程序的一点思考
- 项目开发实战 jQuery+php+mysql实现数据上传功能
- PHP+jQuery 注册模块开发详解
- PHP服务器文件管理器开发小结(九):jQuery动态表单实现文件下载
- PHP开发-HTML中使用Jquery实现多行数据的省略号效果(效果图)
- [置顶] php插件 jquery插件 收集大放送 php开发 jquery开发 超极管用100+
- Alex学PHP [配一个开发环境]
- jQuery 插件开发 其实很简单
- Ubuntu下的PHP开发环境架设