代码标准 w3c官网
语义化:1、浏览器和W3C组织推出的如h1~h6、thead、ul、ol的HTML标签,用于在Web页面中组织对应的内容,如网页标题、表头、无序、有序列表,以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容,又鉴于搜索引擎的巨大流量推荐,Web前端不得不考虑SEO,从而两者实现有益的循环,共同推进着语义化标签的使用。
2、但Web的发展超乎想象,起初定义的HTML语义化标签,不足以实现对Web页面各个部分的功能或位置描述,所以Web前端人员利用HTML标签的id和class属性,进一步对HTML标签进行描述,如对页脚HTML标签添加如id="footer"或者class="footer"的属性(值),以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。
3、W3C组织意识到了之前HTML版本的不足,推出的HTML5进一步推进了Web语义化发展,采用了诸如footer、section等语义化标签,弥补了采用id="footer"或者class="footer"形式的不足,以更好的推动Web的发展
表现与数据分离:
初级web开发通常会利用JS获取页面的ID或class获取页面的DOM,然后进行动态交互或渲染页面,但是,当后序升级中将包含该id的DOM删除了,那么这个时候就会报错。特别是ajax的大量运用,1)对页面元素的class id等元素选择器分散在代码各个地方,没有抽象出来。2)对于ajax异步获取的数据,也没有对数据持久层分离,基本都是按功能分散在代码中各个部分。3)经常在html中镶嵌大量JS运用代码而且是JS主要功能代码,使代码分散不宜维护。简小的页面还可以维护,如果是大的项目该如何处理呢?这时候就应用到了表现与数据分离。
W3C标准中有规定,网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior),它们应该是相互分离的,便于后期的开发和维护。我理解的表现与数据分离是javaScript中的MVC,用JavaScript负责填充数据,HTML负责表现数据。下面我们先说一说MVC的概念:
采用MVC开发的最初目的就是让表现与数据分离。MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式, Model(模型)负责在数据库中存取数据。View(视图)显示数据。Controller(控制器)控制器负责从视图读取数据,控制用户输入,并向模型发送数据,保证视图与模型数据同步更新。
如何实现JavaScript的MVC呢???
下面举个栗子:select一个选项,并将该选项在后台所对应的数据显示在select下方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表现与数据分离</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var controller = {
start: function() {
this.view.start();
},
set: function(type) { //将view上变化的数据映射到model上
controller.model.set(type);
}
};
controller.model ={
// 初始化model
data: {
‘古典文学‘: ‘三国演义‘,
‘现代文学‘: ‘悲伤逆流成河‘,
‘西方文学‘: ‘红与黑‘},
currentType: null,
// 初始化model结束
// 响应来自controller的数据变化
set: function(type) {
this.currentType = this.data[type];
this.change(this.currentType);
},
change: function(book) {
controller.view.undate(book); //将modle变化后有关view的数据映射到view上,该函数外包为change
}
};
controller.view = {
// 监听页面数据变化
start: function() {
$("#menu").change(this.changeHandler);
},
// 将变化的数据映射到model上
changeHandler: function() {
controller.set($("#menu").val());
},
undate: function(book){ // 响应来自model的数据
$("#show").html(book);
}
};
controller.start(); //开启controller
});
</script>
</head>
<body>
<select id="menu">
<option value="menu">古典文学</option>
<option value="现代文学">现代文学</option>
<option value="西方文学">西方文学</option>
</select>
<div id="show"></div>
</body>
</html>
首先创建一个Controller对象,该controller对象即可以监听view的数据变化,也可以将view的变化数据响应到model中,最终将model变化的数据更新到view。其结构如下:
技术分享
实现表现与数据分离的优点和缺点:
优点是: 模块化 --> 容易测试 --> 降低bug频率
缺点是:程序结构复杂,比较耗时,上手有学习曲线
应用场景:
项目具有明显的数据需求,比如要与很多Service交互,业务流程复杂,表单很多
非应用场景:
项目是典型的静态信息展示型页面,或是微型的内部app,或是产品idea验证时期的MVP。