Web前端开发解耦1

在网站建设的工作中，Web前端工程师占据着非常重要的位置，好的前端工程师保证了良好的网站优化以及友好的用户体验。今天佚站互联主要分享一下对于Web前端开发规范的一些见解。

学过面向对象编程的朋友应该都知道，好的代码应当讲究两个标准：代码结构间高聚合、低耦合的关系，关于聚合我们暂不展开，在这里主要分享解耦在Web前端开发中的具体应用，希望对感兴趣的朋友有所帮助。

众所周知，前端开发过程中不可避免地要接触三样代码，它们分别是HTML、CSS、JavaScript（以下简称JS），在笔者的学习与开发过程中发现，很多人对于这三种代码的使用并不特别规范，往往是想到什么用什么，不规范代码带来的后果就是对于团队合作开发非常不友好，并且在后期的扩展维护中带来很多不必要的麻烦。如何更规范地编写相应代码，做到逻辑、结构与表现形式之间的解耦，这是前端代码师应该掌握的一项技能。

三样代码各司其职

按照自身分工来看，HTML代码掌管前台整体的文档结构与内容，以造楼为例，HTML就是整个页面的钢筋水泥，页面上有几个模块，每个模块布局如何，有什么内容，都应该由HTML来主管，很久以前的Web开发主要使用Table进行布局，但是到了Web2.0之后，越来越多的人喜欢用DIV进行布局，不管使用哪种HTML元素，都没有离开它的本质。所以，HTML应该是掌管页面文档结构与内容的一类代码。

CSS的学名是“层叠样式表”，顾名思义，它应该是主管样式的，就如整个页面哪里应该是什么颜色，放什么背景，多大的字体等等，它不应该涉及到任何的逻辑与页面结构内容。所以，CSS应该是掌管页面样式的一类代码。

JS是非常灵活轻巧的面向对象脚本语言，如果以楼房为例，它就好比是墙上的开关，按下它应该做什么操作，是亮灯还是做其他事情，如果是亮灯那它亮的是哪盏灯。放在Web前端开发中来说，比如点击某个按钮应该触发什么事件，是弹出对话框还是提交表单，是变换样式还是移动位置，这都是JS需要考虑的，与另外两种代码无关，换句话说，JS在Web前端开发中的角色就是掌管逻辑的。

综上所述，在Web前端开发中，HTML是主管页面文档结构与内容的、CSS是主管页面元素样式表现的、JavaScript是主管交互逻辑的。

具体实例分析

在上面部分我们分析了这三类代码在Web前端开发中所扮演的角色与所担任的职责，那么具体应该怎么使用呢？

我们以最简单的DIV变化为例，为了编写方便，这里引入jQuery。

案例说明：点击一个黑底白字内容为“Demo”的DIV，将DIV变为红底黑字，内容变为“Hello Benz”。

没有解耦的代码编写：

HTML代码：

     <div id="demo">Demo</demo>

CSS代码：

     #demo {          width:200px;          height:50px;          color: white;          background: black;     }

jQuery代码：

     $(document).ready(function() {           $("#demo").click(function() {               $(this).css({                    "color" : "black",                    "background" : "red"                })               .text("Hello Benz");          });     });

案例分析：

上面的例子非常简单，这也是很多人喜欢用的编写方式，因为方便快捷，但是却并不太符合解耦思想。

问题主要的原因在于JS，很多人为了图方便，把很多文档结构内容以及CSS样式都写在了JS中，对于这种写法，笔者认为欠妥，因为JS是主管逻辑的，不应该把文档结构内容以及样式表现这些职责都强加于它。

解耦的代码编写：

HTML代码：

     <div id="demo" data-changed="Hello Benz">Demo</demo>

CSS代码：

     #demo {          width:200px;          height:50px;          color: white;          background: black;     }

      #demo.changed {          color: black;          background: red;     }

jQuery代码：

     $(document).ready(function() {          $("#demo").click(function() {               var dataChanged = $(this).attr("data-changed");               $(this).addClass("changed")                        .text(dataChanged);           });     });

案例分析：

在这个修改过的代码中我们可以发现，三种代码之间的关系非常清晰。

1.HTML主管文档结构（点击DIV后变成的内容为“Hello Benz”），将文档结构内容放在自定义属性“data-changed”里，方便JS获取。

2.定义了新的样式changed，在点击DIV后DIV将会变化成怎样都由CSS来决定。

3.JS只负责“点击DIV后DIV的样式变成changed，文档结构内容变成data-changed”这两个逻辑，至于变成怎样，内容如何，JS一概不参与。

这样解耦的好处在于，如果你想要对某个特定交互样式或者内容进行修改，你不必在JS中苦苦寻找，只需要知道修改哪个样式，修改哪个文档结构内容，就能迅速完成。如果你想要修改这个交互的逻辑，你只需要对JS的逻辑进行修改，不会对文档结构内容以及样式有任何影响。