内容、表现和行为分离

2019-3-9 11:38| 作者: admin| 查看: 165| 评论: 0|来自: 蚂蚁部落

内容、表现和行为分离是前端页面基本原则,下面对此原则做一下简单阐述。

一.网页的组成部分:

应用于项目中的网页通常有如下几个部分构成:

(1).通过HTML结构创建的结构与填写的文本,它是页面基本框架与实质内容。

(2).CSS代码部分,负责对HTML结构和其中的文本内容进行美化修饰,也就是网页的表现部分。

(3).JavaScript代码部分,负责对内容增加一些动态效果,可以称之为行为。

上述三个部分的结合可以使网页更加美观有动感,交互能力也更加强大,当你的网页也可以只有内容部分,不需要CSS与JavaScript,这当然是可以的,这是这样的网页很难满足实际项目的需求。

二.内容、表现和行为分离:

在文章起始位置已经提到过,内容、表现和行为分离是前端页面基本原则。

也就是将HTML结构与内部的文本内容、CSS代码和JavaScript分离开,首先看一段代码:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<div><b>蚂蚁部落</b></div>
<div style="color:red;font-size:14px">蚂蚁部落一</div>
<di style="color:blue" onclick="this.style.color='green'">蚂蚁部落二</div>
</body>
</html>

上面代码汇总,CSS与JavaScript代码嵌套进HTML中,并且对"蚂蚁部落"加粗采用<b>标签。

如此简单的代码就让人感觉非常凌乱,可以想象,如果代码量庞大的话,页面代码会多么臃肿。

修改页面的样式和行为非常困难,首先在HTML中找到对应的位置,然后再修改代码,程序员内心应该是崩溃的。

并且对搜索引擎优化也很不好友,因为搜索引擎真正想要的是页面中的内容,而不是嵌套的CSS代码和js代码。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.a{font-weight:bold} 
.b{
  color:red;
  font-size:14px;
}
.c{color:blue}
</style>  
<script>
window.onload=function(){
  let odiv=document.getElementsByClassName("c")[0];
  odiv.onclick=function(){
    this.style.color='green';
  }
}  
</script>  
</head>
<body>
<div class="a">蚂蚁部落</div>
<div class="b">蚂蚁部落一</div>
<div class="c">蚂蚁部落二</div>
</body>
</html>

上面代码在一定实现三者分离效果,内容非常的简洁,无论对于程序员还是对于搜索引擎都比较友好。

代码较少情况下,是不错选择,如果代码量较大,页面依然会非常的臃肿,引入外部js和css文件是不错的选择。

上述代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<link rel="stylesheet" href="css.css"> 
<script src="js.js"></script>  
</head>
<body>
<div class="a">蚂蚁部落</div>
<div class="b">蚂蚁部落一</div>
<div class="c">蚂蚁部落二</div>
</body>
</html>

上面代码仅仅是一个引入演示,并没有对应的js和css文件。

上述方式,如果要修改样式和行为,甚至不需要去触碰这些HTML代码,只需要去修改CSS和js文件即可。

主要规则如下:

(1).CSS和js代码尽量不要嵌入HTML中。

(2).页面中尽量保持一个js文件引入,如果有多个,可以在部署时压缩为一个。

(3).CSS代码尽可能不适用内联样式,代码量小可以使用内部样式表。

(4).尽量使用css属性替代标签规定文本的表现,比如尽量避免使用<b>, <u>, <center>, <font>和<b>等。

关于内联样式与内部样式可以参阅HTML应用CSS代码方式一章节。

三.简单代码演示:

我们布局页面的最终目的是在于用户有良好交互与视觉体验的前提下,能够做到页面以非常简洁的形式展现在开发者和搜索引擎面前,以便于代码开发维护和搜索引擎的抓取。

所以,不要引入一些特定的HTML 结构来解决一些视觉设计问题,代码片段如下:

[HTML] 纯文本查看 复制代码
<span class="text-box">
  <span class="square"></span>
  前面是一个矩形框。
</span>

上面通过一个span元素在文本前面添加一个矩形框。

CSS修饰代码如下:

[CSS] 纯文本查看 复制代码
.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

上面是对span矩形框的一个样式设置。

其实代码可以更加简化,让HTML结构更加简单,代码片段如下:

[HTML] 纯文本查看 复制代码
<span class="text-box">
  前面是一个矩形框。
</span>

CSS修饰代码如下:

[CSS] 纯文本查看 复制代码
.text-box:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

通过伪元素选择器在文本前面添加一个伪元素,然后设置其样式。

这样是不是HTML结构就更加简洁了,当然并不能一概而论,根据具体需要。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部