快速业务通道

mvc模式分离javascript开发

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-06
eb页面的基础,给我们服务的每个页面都反映了他们在服务器那一刻的信息状态。但是我们得到不止是原始数据,而是包含原始数据的xhtml或者html数据,并且通过已经预定义的css渲染后的漂亮的页面。

多年前,如果你想去修改原始数据,服务端必须提供一个可以文本输入的页面去做改动。那时候我们把改动后的信息发送给服务端,并且等待服务端返回ok 的反馈后才能搞定。每次都是完整的请求一个新的页面,然后在等待服务器反馈,这样让我们用户感到乏味不堪,甚至当你出现错误的时候,还需要重新键入原来输 入的信息。

The knight in shining armor (铠甲骑士)

后来,web早期的黑暗迎来了他们的拯救者,铠甲骑士 –javascript和ajax。

他们结束以前的整个页面请求的方式,可以单个元素发送用户请求到后端服务器。

并且也允许用户页面发送请求的时候,继续响应用户的其他操作。

现在我们需要在javascript和ajax的发展和运用中采用MVC的模式分离代码:

比如说:在某些情况下,分离可能是不需要的,甚至某些情况下,分离会造成很多不必要的程序冗长。当我们的应用程序便得越来越复杂,需要 javascript在网站的多数部分的交互操作的时候。我们把javascript分离进入MVC模式能够产生出更多元化,更重复利用的代码。

Structuring our code(构造我们的代码)

javscript是个傻瓜,他不会明白html将要告诉用户什么或者用户想在这个页面完成什么。所以我们作为开发者,就必须告诉我们的javascript,用户的输入意味着什么。

思考下面的例子,如果我们需要验证表单中的数据,我们可以设置一个事件来处理这个任务,在这个任务中,事件处理函数去遍历表单中的字段列表,并且确定怎样去反馈出错误的结果。

function validateForm(){
var errorMessage = ‘The following errors were found:
‘;
if (document.getElementById(’email’).value.length == 0) {
errorMessage += ‘You must supply an email address
‘;
}
document.getElementById(’message’).innerHTML = errorMessage;
}

上面得这个方法能工作,但是不够灵活,比如我们如果想要增加个字段验证,或者另一个页面有不同表单验证。那我们就不得不拷贝这个函数的大部分代码为我们每次新增加字段验证。

Toward modularity(奔向模块化)

第一步是奔向模块化,并且分离就是在表单的字段中添加语义化的东西。

比如对于email验证的表单字段我们可以这样做:

<input type="text" class="required email">

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号