关于内容、表现、行为的理解

来源：互联网发布：哪个天气预报软件准确编辑：程序博客网时间：2024/04/29 10:37

刚开始接触前端的概念时，关于结构、表现行为分离的理解大概是：

把html写在一个文件，css代码写在一个文件，js代码写在一个文件。

后来在详细学习css的时候，理解内容表现分离的意义是，即时在没有css文件的条件下（包括因为网络传输故障导致css文件丢失，或是移动端浏览器不支持css样式），网页仍能正常工作。所以同理，我理解的行为分离意义应该是：

在没有js代码的情况（传输故障、浏览器不支持js脚本、用户禁用js），网页仍然能正常工作。

即，不管表现还是行为都应当为内容服务，网页的存在应该以内容为核心。css样式和js脚本都应当是为了网页能有更好的体验而存在，如果没有css和js网页可以体验差一些但是不应该无法访问。如果一个网页离开了js和css便无法正常的工作，这个项目应该是失败的。

我对‘分离JavaScript’的理解来自于对Jeremy Keith 《JavaScript DOM 编程艺术》的学习。严格的js脚本，应当拒绝在html代码中存在js代码的情况。如一个按钮的“onclick”属性。规范的做法应当是存在一个挂钩，如节点的“id”属性。我们用这个挂钩连接JavaScript和html代码。当然更不应该随处滥用“JavaScript:”伪协议等手段。

同时，JavaScript代码本身也应当注意平稳退化的原则，代码中应当存在处理“用户禁用JavaScript”、“浏览器不支持部分JavaScript API”等意外情况。我认为浏览器兼容和平稳退化是有区别的。平稳退化原则出发点还是在“保证内容的可访问性”上面。好在JavaScript存在对象检测这样的功能，让我们可以在JavaScript部分功能不能使用的情况下即时采取措施。当JavaScript不能正常完成工作时我们应该将工作交还给html代码。至少让网页还能正常地工作。

下面用一个简单的图片浏览器来进行说明：

/* CSS Document */*{ margin:0 ; padding:0;}body{ text-align:center;}ul{ list-style:none;}ul li{ display:inline-block; padding:10px;}ul li img{ width:100px; height:66px;}#placeholder{ width:600px; border:1px red solid;}

<!doctype html><html><head><meta charset="utf-8"><title>Image Gallery</title><link rel="stylesheet" href="layout.css" media="screen" /></head><body><h1>Snapshots</h1><ul id="imagegallery"><li><a href="images/IMG_20140308_153901.jpg" title="pic1-桃花" ><img src="images/IMG_20140308_153901.jpg" alt="桃花" /></a></li><li><a href="images/IMG_20140308_155151.jpg" title="pic2-李花" ><img src="images/IMG_20140308_155151.jpg" alt="李花" /></a></li><li><a href="images/IMG_20140309_162516.jpg" title="pic3-菜花"><img src="images/IMG_20140309_162516.jpg" title="菜花" /></a></li><li><a href="images/IMG_20140328_115945.jpg" title="pic4-樱花"><img src="images/IMG_20140328_115945.jpg" alt="樱花"/></a></li></ul><script src="show_pic.js"></script></body></html>

// JavaScript Documentfunction addLoadEvent(func){var oldonload = window.onload;if( typeof window.onload != 'function'){window.onload = func;}else{window.onload = function(){oldonload();func();}}}function perparePlaceholder(){if(!document.createElement ) return false;if(!document.createTextNode) return false;if(!document.getElementById) return false;if(!document.getElementById("imagegallery")) return false;var placeholder = document.createElement('img');placeholder.setAttribute('id',"placeholder");var description = document.createElement("p");description.setAttribute("id","description");var distext = document.createTextNode("Choose an pic");description.appendChild(distext);document.body.appendChild(placeholder);document.body.appendChild(description);}function perpareGallery(){if(!document.getElementsByTagName) return false;if(!document.getElementById) return false;if(!document.getElementById("imagegallery")) return false;//性能检测var gallery = document.getElementById("imagegallery");var links = gallery.getElementsByTagName("a");for( var i = 0; i<=links.length;i++){links[i].onclick = function(){return showPic(this);}links[i].onkeypress = links[i].onclick;}}function showPic(whichpic){//为<a>标签添加点击事件，同时用返回值拦截“href”属性指向的地址.if(!document.getElementById("placeholder")) return true;//当JavaScript不能正常工作时，将showPic函数的工作交还给html。采取页面跳转的方式完成工作。var placeholder = document.getElementById("placeholder");var source = whichpic.getAttribute("href");placeholder.setAttribute("src",source);if (!document.getElementById("description")) return false;if(whichpic.getAttribute("title"))var text = whichpic.getAttribute("title");elsevar text =""; var description = document.getElementById("description");if(description.firstChild.nodeType == 3)description.firstChild.nodeValue = text;return false;//当JavaScript正常工作时，返回false,拦截跳转动作}addLoadEvent(perparePlaceholder);addLoadEvent(perpareGallery);

1 0