逻辑代码与呈现代码分离原则

来源：互联网发布：阿里云怎么下网站模板编辑：程序博客网时间：2024/05/16 14:00

问题的提出

B/S软件开发的过程中，软件开发人员使用的已经不仅仅是一门单纯的编程语言。除了会用C# 或者java(c++,vb,php...)等高级语言外，还需要使用html或者xml设定页面结构，使用javascript设定页面行为，使用css/XSTL进行页面布局。将来或许还会有更多的技术和实现方法（Flesh, silverlight, javaFX, Felx），林子大了什么问题都会出现。特别是页面的呈现和逻辑代码的处理如果不当，将会出现很多麻烦。

传统的做法

假设有这样一段html 页面代码

<HTML>

<HEAD>

<TITLE> alert inside html </TITLE>

function promptTest(string){

this.alert(string);

}

</script>

</HEAD>

<BODY>

<input type="button" value="点击我"

onclick="promptTest('hello,you have just clicked on me');"/>

</BODY>

</HTML>

在浏览器中用户会看到一个按钮，点击后弹出一个消息框，上面显示hello,you have just clicked on me。这里仅仅是一个简单的函数。在实际项目中，特别是在使用了ajax的项目中，有可能到处都是javascript函数。在这个例子中，使用onclick="promptTest('hello,you have just clicked on me');"这样的方式调用javascript函数。现在的很多教科书，甚至ASP.NET response 给用户的html代码中很多地方都采用了这样一种方式。这样的代码会不会有问题呢？

当然我们完全可以把javascript代码分离出来作为一个单独的文件，但根本问题还是没有解决。因为页面中仍旧有onclick=“....”这样的“不纯洁“的html。

传统做法所产生的后果

一．假如这是一个很大的工程，基于分工的原因，页面设计人员不会javascript,或者不熟悉javascript，对设计人员来说看到掺杂了javascript代码的页面将是一件非常痛苦的事情，加上程序员之间沟通不畅，很有可能会出现很多麻烦。不仅延长工期，更有可能因为代码维护的问题造成项目失败。即使项目完工，这样做也不利于项目的扩展和二次开发。

二．从用户的角度说，假如有一个很重要的用户，他/她却恰恰出于安全的考虑将浏览器里的javascript禁用了。那么他将无法访问这一个页面，即使可以访问也有可能会弹出一个错误对话框：

软件出现这样的错误，对用户来说是一种极大的打击，甚至有可能放弃使用这一网站。对企业来说，有可能是一笔很大的损失，而这一切有可能就是使用了onclick=”function...”这样的方式。作为开发人员，永远都无法责怪用户为什么要把javascript关了。或许用户自己都已经忘记自己是否禁用了javascript。上面这个丑陋的对话框，以及没完没了的弹出窗口曾经一度给javascript摸了不少黑。

那么我们有没有办法，把javascript彻底清理出html呢？

新的做法

我们完全可以使用javascipt 的dom 编程，把javascript代码彻底清理出html。实现真正意义上的代码逻辑和页面呈现分离。

首先给按钮加上一 Id=”btn”,并且去除onclick=”....”,如下所示：

通过id号，javascript可以通过document.getElementById(“btn”);获取button对象，如下：

var aButton=document.getElementById(“btn”);

既然我的javascript代码已经持有了DOM树中的button对象，意味着我可以对这个对进行实时的修改，甚至给button.onclick 创建一个新的function:

aButton.onclick=promptTest;

function promptTest(){

alert(“hello”);

}

如果javascript是写在html里面，一切都很正常，可是如果这段代码是写在单独的js文件里，浏览器怎么能知道什么时候加载完毕呢？事实上，我们可以使用window.onload函数进行动态加载。

window.onload=setButton;

function setButton(){

var aButton=document.getElementById("but");

aButton.onclick=promptTest;

}

文章开头的代码经过修改后如下

//javascript.js 文件

//开始

window.onload=setButton;

function setButton(){

var aButton=document.getElementById("but");

aButton.onclick=promptTest;

}

function promptTest(){

alert("hello");

}

//结束~

////test.html文件

//开始

<HTML>

<HEAD>

<TITLE> alert inside html </TITLE>

</script>

</HEAD>

<BODY>

</BODY>

</HTML>

//结束～

逻辑呈现分离的好处

在上面这段代码中html代码中的元素id号，将html和javascript联系起来，逻辑和代码实现了彻底的分离。这样做或许会多写一点代码，但是当代码的规模扩大的时候，逻辑和呈现是低耦合的，同时也比较容易构建健壮的代码。

编程人员可以安心编写逻辑，设计人员只要给编程人员留出合适的id号。分工将更加明确。

在这种情况下，即使用户禁用了javascript代码，页面也不会出现任何错误。最多也就是某些功能无法实现。但最重要的是，以这种方式写出的html不再依赖javascript文件了，也就是说逻辑和表现是自独立的。

规范编码的意义和总结

软件有时候很像一座大楼，狗窝人人都会建，但是高楼大厦却不见得人人都能建。在《圣经》旧约里，以色列人要建造“巴别塔”，神让他们说不同的语言后，巴别塔就建不下去了。软件也是如此，如果人人都有自己的一套标准，软件也是无法构建的。标准意味着规范，规范意味着统一的文档，规范的编码，规范的流程。有时候规范和文档比代码本身更加重要。