首页 > 代码库 > 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