您的位置：首页 > Web前端 > CSS

前端开发如何实现结构、样式、行为彻底分离

2017-06-04 10:24 696 查看

严格意义上来讲，彻底分离就是结构只出现HTML的代码，没有任何的CSS、JS代码，甚至通过行为改变的HTML也应该写在JS代码里面。

HTML：index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>image gallery</title>
<link rel="stylesheet" href="layout/index.css" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="image/a.png" title="a">
<img src="image/a.png">
</a>
</li>
<li>
<a href="image/b.png" title="b">
<img src="image/b.png">
</a>
</li>
<li>
<a href="image/c.png" title="c">
<img src="image/c.png">
</a>
</li>
<li>
<a href="image/d.png" title="d">
<img src="image/d.png">
</a>
</li>
</ul>



<script src="scripts/index.js"></script>
</body>
</html>

CSS：index.css
body{
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}

h1{
color: #333;
background-color: transparent;
}

a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

ul{
padding: 0;
}

li{
float: left;
padding: 1em;
list-style: none;
}

#imagegallery{
list-style: none;
}

#imagegallery li{
list-style: inline;
}

#imagegallery li a img{
border:0;
}

#placeholder{
width: 50px;
height: 50px;
}

JavaScript：index.js
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}else {
window.onload = function(){
oldonload();
func();
}
}
}

function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
}else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}

function preparePlaceholder(){
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");
placeholder.setAttribute("src","image/p.png");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var destext = document.createTextNode("choose one image");
description.appendChild(destext);
//document.getElementsByTagName("body")[0].appendChild(placeholder);
//document.getElementsByTagName("body")[0].appendChild(description);
var gallery = document.getElementById("imagegallery");
//gallery.parentNode.insertBefore(placeholder,gallery);
//gallery.parentNode.insertBefore(description,gallery);

insertAfter(description,gallery);
insertAfter(placeholder,gallery);

}

function prepareGallery(){
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) ? false : true;
}
}
}

function showPic(whichpic){
if (!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
if (document.getElementById("description")){
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
}

return true;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航