首页 > 代码库 > Web前端开发解耦1

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的逻辑进行修改,不会对文档结构内容以及样式有任何影响。

Web前端开发解耦1