浏览 11581 次
精华帖 (3) :: 良好帖 (7) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-03-29
最后修改:2010-04-01
目录 (一)有关框架 (二)文件组织与代码组织 (三)JS与FLASH交互 (四)ajax局部刷新与RPC (五)获取设置元素样式与监听元素事件 (六)页面元素的创建调整与关联 (七)浏览器兼容性问题 (八)WEB软件的前端架构实践 文章中的代码只为表达文章意义,非真正能执行的代码。 不同目的ajax请求 一、使用ajax进行局部更新 目前项目中的主要几种 1、切换到新的TAB时局部更新 自定义实现了TabPanel,主要通过在元素上设置属性来设置参数,这样做的好处是不必在代码中写参杂页面控制逻辑。结构如下,当子节点没有设置相关属性时,从父节点设置的属性中获取。 <h3>新闻</h3> <ul renderTo="#newsContent" class="tabpanel" url="http://www.a.com/?category=$0&count=$1" > <li> <a data="tech,8" renderTo="#newsContent" class="tab on" before="js code" after="js code">科技</a> </li> <li> <a data="economic,9" class="tab">经济</a> </li> <li></li> </ul> <div id="newsContent"> </div> 属性含义: renderTo: 渲染到哪个元素 url: 请求的地址的模板 data:替换url中的参数 before: 载入前要执行的代码 after: 载入后要执行的代码 2、弹出一个浮动窗口,内容由ajax获取 这个实现也比较简单,写一下调用示例: ibm.popup({ url: " http://www.a.com/login", params: {theme: "sky"}, html: "", //如果指定了内容,则不会发起请求 modal: true, //窗口是否为模态 time: -1, //指定时间内自动关闭 success: function(){ ibm.initLogin(); } }) 3、点击一个按钮后进行局部更新 简单的直接onclick="jQuery('selExp').load('url')"; 复杂的直接调用业务方法 4、通过RPC请求新增一条数据或删除一条数据后进行局部更新 为了保持前端无状态,删除或添加后都局部刷新整个列表,除非这样做会导致系统负担,才手动操作DOM做假的增加删除。 如果这一块的HTML比较多,导致更新局部的时候获取的HTML比较大,或者用户做这种局部更新比较频繁,就考虑把模板放到前端,然后每次只请求数据,然后由前端完成渲染工作。相关介绍见金大为的文章。雏凤清音 -- 面向数据的前端编程方法 二、使用ajax提交表单 比较简单,主要使用jQuey+插件validation来做。 表单的参数由元素name指定,不用用户输入的参数通过<input type="hidden" />来实现,一般不在JS方法中对提交的后台的参数进行增加或修改操作。 三、使用ajax进行远程过程调用(RPC) RPC我们遵行的是JSON RPC规范。根据是否跨域,我们有两种实现,不跨域的时候是POST请求,跨域情况下,我们采用导入脚本的方式。当然,RPC接口是统一的,是否跨域根据URL自动判断,晒一下方法签名 /** * @param {String} url * @param {Object} params * @param {Function | String} successFn 成功后的回调 * 如果为字符串,将显示该消息,且不显示返回数据中的消息 * 未提供此参数,判断成功后,尝试从返回数据中提取消息进行显示 * @param {Function | String} failFn 失败后的回调 * 如果为字符串,将显示该消息,且不显示返回数据中的消息 * 未提供此参数,在判断RPC操作失败时,将尝试从返回数据中提取错误消息进行显示 */ rpc: function(url, params, successFn, failFn) { //code } //使用示例 rpc("http://www.a.com/user/updateMoney", {value: money}, function(data){ jQuery("#userMoney").text(data.money) }) RPC操作超过2秒后没有得么响应,将弹出一个系统繁忙提示的DIV模拟模态弹出窗口,防止用户重复点击提交。 在我们的项目中,后台程序统一了一个响应前端RPC的方法,处理前端响应的业务代码中在响应请求时调用那个方法,以使得统一以及返回数据遵行JSON RPC规范。 其它RPC的实现也有很多,如PHP RPC 全局ajax设置及错误处理 用jQuery实现统一的ajax全局设置还是比较简单的 网络连接中断,超时以及当HTTP HEAD中state code非200时都会报错。 目前以下代码无法在IE下驱分出网站连接中断与超时,FF下与CHROME下可以。 代码看起来比较乱 function initAjax() { jQuery.ajaxSetup({ timeout: 10000, cache: false }); $(document.body).ajaxComplete(function(event, request, ajaxOption, state){ if(!Comm.browser.isIE && state == "timeout"){ Comm.onceError("请求超时,请稍候重试!"); } }).ajaxError(function(event, request, ajaxOption, thrownError){ var passError = /&passerror=|^passerror=/; var hasJsonName = /&jsonName=|^jsonName=/; var data = ajaxOption.data; var isJsonRPC = data && hasJsonName.test(data) && (!passError.test(data)); try{ if(!Comm.browser.isIE && (!request || request.status == 0)){ Comm.onceError("网络连接中断,请检查你的网络连接"); return; } var state_code = request.status.toString().substr(0, 3); if (state_code != "200") { var msg = ''; msg = $HTTP_STATE_CODE[state_code]; if(msg) msg = msg[1] || msg[0]; if (!msg) msg = "请求数据失败,请稍后重试"; if (state_code == "401") Comm.error(msg, function() { top.location.href = "http://www.a.com/login"; return; }); if (isJsonRPC) Comm.error(msg); } }catch(e){ if(Comm.browser.isIE)Comm.onceError("请求超时,请稍候重试!"); } }) } 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-03-31
能附上下载就更好了
|
|
返回顶楼 | |
发表时间:2010-04-01
有图才有真相!
|
|
返回顶楼 | |
发表时间:2010-04-05
一个做过后端开发的人 最终走在前端是需要勇气的
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话) 谢谢 期待你的回答 |
|
返回顶楼 | |
发表时间:2010-04-05
qiren83 写道 一个做过后端开发的人 最终走在前端是需要勇气的
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话) 谢谢 期待你的回答 我做程序员以来,一直就偏向于喜欢研究前端技术,因为前端的纷乱以及不成熟,更有机会创新,以目前WEB化的趋势,随着HTML5的到来,前端技术的重要性将更加突出。目前在一小公司做WEB GAME。 |
|
返回顶楼 | |
发表时间:2010-04-06
bellstar 写道 qiren83 写道 一个做过后端开发的人 最终走在前端是需要勇气的
想知道楼主现在的月薪多少 在哪家上班(如果是大公司的话) 谢谢 期待你的回答 我做程序员以来,一直就偏向于喜欢研究前端技术,因为前端的纷乱以及不成熟,更有机会创新,以目前WEB化的趋势,随着HTML5的到来,前端技术的重要性将更加突出。目前在一小公司做WEB GAME。 的确,web前端技术太杂乱了。调试起来也比较麻烦,该死的ie6问题还不少 |
|
返回顶楼 | |