敏捷AJAX开发思考（php jQuery）

最新推荐文章于 2024-09-11 20:28:45 发布

rainer_H

最新推荐文章于 2024-09-11 20:28:45 发布

阅读量660

点赞数 1

文章标签： jquery ajax 敏捷 php function jquery插件

本文链接：https://blog.csdn.net/rainer_H/article/details/6347030

版权

敏捷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扩展。主要实现的功能为：
1. 初始化。选择页面特效需要载入的库文件，通过在初始化中控制脚本加载来给用户最佳的体验（因为传统的<script>标签写法可能造成页面文件下载的阻塞，参考51cto.com的教程）。同时便于对库的管理。
2. 管理页面的form表单和ajax元素。通过ajax方式提交表单能更好的控制用户体验，当提交时间过长等问题出现时，能更好的进行提示。
3. 其他功能，如控制页面样式或者动画效果等。实现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来载入需要的库文件*/