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的逻辑进行修改,不会对文档结构内容以及样式有任何影响。
最新文章
- maven-web项目中的一些小问题
- wp8开发笔记之应用程序真机发布调试
- [deviceone开发]-HeaderView和FooterView的示例
- kafka_2.11-0.8.2.2的搭建
- EF经验分享_jimmyzzc
- 发布ASP.NET网站到IIS
- storyBoard使用介绍
- springmvc中使用response的out.print问题
- Debate CodeForces - 1070F (贪心)
- [转帖]Linux 的静态库与动态库
- c#除掉字符串最后一个字符几种方法
- Codeforces Round #541 (Div. 2) E 字符串 + 思维 + 猜性质
- extern声明全局变量用法
- windows 使用 xxfpm 解决 php-cgi 进程自动关闭
- Eclipse的SVN插件移动中文名称文件提示org.tigris.subversion.javahl.ClientException: Bogus URL
- 洛谷P3437 [POI2006]TET-Tetris 3D(二维线段树 标记永久化)
- 20172308 实验二《Java面向对象程序设计 》实验报告
- Comparable 与 Comparator的区别
- 2017百度春招<;不等式排列>;
- python开发学习-day07(面向对象之多态、类的方法、反射、新式类and旧式类、socket编程)
热门文章
- C++ 中set
- c# Selenium ExpectedConditions 不存在
- linux常用命令(20)用SecureCRT来上传和下载文件
- 卷积的三种模式:full、same、valid + 卷积输出size的计算
- django在style的样式image url添加静态图片路径和django如何动态传入图片链接?
- H5本地存储技术
- 使用shell脚本常见的一些问题
- Nginx实现负载均衡的方式有哪几种呢?
- jvm学习笔记:一、类的加载、连接、初始化
- SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession