w3c代码规范标准 Web语义化 表现与数据分离

代码标准 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下方。











 
    古典文学
    现代文学
    西方文学
 

　　  首先创建一个Controller对象，该controller对象即可以监听view的数据变化，也可以将view的变化数据响应到model中，最终将model变化的数据更新到view。其结构如下：


         技术分享


 


实现表现与数据分离的优点和缺点：


       优点是： 模块化 --> 容易测试 --> 降低bug频率


       缺点是：程序结构复杂，比较耗时，上手有学习曲线


应用场景：


       项目具有明显的数据需求，比如要与很多Service交互，业务流程复杂，表单很多


非应用场景：


      项目是典型的静态信息展示型页面，或是微型的内部app，或是产品idea验证时期的MVP。