编写高质量的代码--基础:结构和样式,行为的分离

实现高质量的代码需要我们在结构和样式,行为的分离的基础上做到:精简,重用,有序。
精简:尽量减小文件的大小,提高页面加载速度。
重用:提高代码的重用性,减少冗余代码,提高开发速度。
有序:提高代码的结构性,组织好代码结构更利于维护和应变特殊情况。
在我们的工作中你可能会遇到这样的代码,或者说你可能写出这样的代码
<td width="100%" height="20" class="f9pt" align="center">
<font color="#346F0E">下载</font>
<input type="text" name="wd" size="40" onMouseOver="this.focus()" onFocus="this.select()" style="margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sans-serif,宋体;padding-top:2px;padding-left:1px" maxlength="100">
</td>
多么美丽的代码。。。。
首先,不说代码的合理性,我们只讨论代码的标准,这里的代码没有遵从最基础的web标准-结构样式和行为的分离。上面的代码是一段html,css,js驳杂在一起的代码。为了提高网页性能和方便团队开发,我们应该将结构、样式和行为分别用单独文件分离开,如下。
test.html 文件:
<link rel=”stylesheet” type=”text/css” href=”test.css” />
<td class="f9pt myTd">
<span class=”myFont”>下载</span>
<input type=”text” name=”wd” size=”40” id=”myInput” maxlength=”100” />
</td>
<script type=”text/Javascript” src=”test.js”></script>
test.css 文件:
.myTd{width:100%;height:20px;text-align:center;}
.myFont{color:#346F0E;}
#myInput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sansserif,宋体;padding-top:2px;padding-left:1px
test.js 文件
var myInput = document.getElementById(“myInput”);
myInput.onmouseover = function(){
this.focus();
}
myInput.onfocus = function(){
this.select();
}

 

或者你如果实在必须写在html页面内才舒服,那么最好也要用如下用上style和script标签。
<style type=”text/CSS”>
.myTd{width:100%;height:20px;text-align:center;}
.myFont{color:#346F0E;}
#myInput{margin-bottom:-5px;font-size:16px;height:1.78em;font-family:arial,sansserif,宋体;padding-top:2px;padding-left:1px}
</style>

<td class="f9pt myTd">
  <
span class=”myFont”>下载</span>
  <
input type=”text” name=”wd” size=”40” id=”myInput” maxlength=”100” />
</
td> <script type=”text/Javascript”> var myInput = document.getElementById(“myInput”); myInput.onmouseover = function(){ this.focus(); } myInput.onfocus = function(){ this.select(); } </script>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

提高Java的锁性能

Plumbr是唯一通过解释应用程序性能数据来自动检测Java性能问题的根本原因的解决方案。 几个月前&#xff0c;我们在Plumbr中引入了锁定线程检测之后&#xff0c;我们开始收到类似于“嘿&#xff0c;太好了&#xff0c;现在我知道是什么导致了性能问题&#xff0c;但是现在应该…

APK反编译工具

apktool dex2jar jd-gui 1、将要反编译的APK文件后缀改为.zip&#xff0c;解压 2、取出classes.dex文件&#xff0c;拷贝至dex2jar目录。 3、在dex2jar目录运行下列命令行&#xff1a;dex2jar.bat classes.dex&#xff0c;回车。 4、会发现该目录生成了classes.dex.dex2jar.j…

Dom属性方法

一、javascript的三大核心 1.ECMAScript js的语法标准 2.DOM Document object Model 文档对象模型&#xff0c;提供的方法可以让js操作html标签 3.BOM Browser Object Model 浏览器对象模型&#xff0c;提供的方法让js可以操作浏览器 注意&#xff1a;1. js里最大的boss是wind…

学习Netflix管理员–第2部分

为了继续上一篇有关Netflix Governator的一些基础知识的文章&#xff0c;在这里&#xff0c;我将介绍Netflix Governator带给Google Guice的另一项增强功能–生命周期管理 生命周期管理本质上提供了进入对象所经历的不同生命周期阶段的钩子&#xff0c;以引用有关Governor的Wi…

[置顶] UDP协议---心德(1)

UDP协议1.面向无连接 2.速度快 3.不可靠的协议&#xff0c;容易丢包 4.包小于64k DatagramSocket:此类表示用来发送和接收数据报包的套接字 DatagramPacket:数据包 发送端&#xff1a; 1.创建一个udpsocket服务 DatagrameSocket dsnew DatagramSocket(); 2.将数据封装到数据包…

@vue/cli 3 运行支持报错 socket

问题 /sockjs-node/info 无限报错解决方案 原因是相关代理端不支持 ws&#xff0c;因此需要在代理处关闭 ws&#xff0c;即 ws: false&#xff0c;如下&#xff1a;vue.config.js const ds_proxy {/: {ws: false,target: https://dev.test.gitinn.com/,changeOrigin: true,…

Eclipse快捷键以及设置

转自&#xff1a;http://www.blogjava.net/liudawei/articles/362468.html Eclipse实用快捷键大全 收藏 Alt左箭头,右箭头 以在编辑窗口切换标签Alt上下箭头, 以自动选择鼠标所在行,并将其上下移动Ctrlf6 可以弹出菜单…

学习Netflix管理员–第1部分

最近几天&#xff0c;我一直在与Netflix Governator合作&#xff0c;并尝试使用Governator尝试一个小样本&#xff0c;以将其与Spring Framework的依赖项注入功能集进行比较。 以下内容并不全面&#xff0c;我将在下一系列文章中对此进行扩展。 因此&#xff0c;对于没有经验的…

元素类型

元素是文档结构的基础&#xff0c;在CSS中&#xff0c;每个元素生成了一个包含了元素内容的框&#xff08;box&#xff0c;也译为“盒子”&#xff09;。但是不同的元素显示的方式会有所不同&#xff0c;例 如<div>和<span>就不同&#xff0c;而<strong>和&l…

React 等框架使用 index 做 key 的问题

React 等框架使用 index 做 key 的问题 假如有两个树&#xff0c;一个是之前&#xff0c;一个是更变之后&#xff0c;我们抽象成两种可能性。 插入内容在最后插入内容在最前 关于插在中间&#xff0c;原理一样&#xff0c;就不阐述。 使用 ul 代表树&#xff0c;并且使用了…

非捕获Lambda的实例

大约一个月前&#xff0c;我在Java 8的lambda表达式框架下总结了Brian Goetz的观点 。 目前&#xff0c;我正在研究有关默认方法的文章&#xff0c;令我惊讶的是&#xff0c;我又回到了Java处理lambda表达式的方式。 这两个功能的交集可能会产生微妙但令人惊讶的效果&#xff0…

SQL Server 查询性能优化——创建索引原则(一)

索引是什么&#xff1f;索引是提高查询性能的一个重要工具&#xff0c;索引就是把查询语句所需要的少量数据添加到索引分页中&#xff0c;这样访问数据时只要访问少数索引的分页就可以。但是索引对于提高查询性能也不是万能的&#xff0c;也不是建立越多的索引就越好。索引建少…

WordPress强制跳转https教程

在互联网火热的今天&#xff0c;安全问题显得越来越重要&#xff0c;为了用户信息安全&#xff0c;很多热门网站都启用了https 有小伙伴就问&#xff1a;我启用了https&#xff0c;为什么访问的时候显示的还是http呢&#xff1f; 其实&#xff0c;有时候并不是因为我们ssl证书…

AEM中的单元测试(大声思考)

如果要在AEM中进行单元测试&#xff0c;这不是任何建议&#xff0c;而是各种思想的总结和一些可供选择的选项。 一段时间以前&#xff0c;我已经为客户进行了一些研究&#xff0c;这篇文章在很大程度上受到了这项工作的影响&#xff0c;但是很多上下文相关的东西已经被淘汰了。…

Java 8的装饰器模式

在最近的一篇文章中&#xff0c;我描述了装饰器模式如何拯救了我的一天。 我给出了一个小代码段&#xff0c;其中包含创建装饰器的最简单方法&#xff0c;但承诺Java 8会有更好的方法。 这里是&#xff1a; 用Java 8装饰 HyperlinkListener listener this::changeHtmlViewBa…

WPF中使用流文档灵活地显示内容

WPF中使用流文档灵活地显示内容 by: Markus Egger form: http://msdn.microsoft.com/msdnmag/issues/07/08/wpf/default.aspx?loczh Windows Presentation Foundation (WPF) 提供了一系列功能。事实上&#xff0c;功能…

canvas图表(4) - 散点图

原文地址&#xff1a;canvas图表(4) - 散点图 今天开始完成散点图&#xff0c;做完这一节&#xff0c;我的canvas图表系列就算是完成了&#xff0c;毕竟平时最频繁用到的就是这几类图表了&#xff1a;柱状&#xff0c;折线&#xff0c;饼图&#xff0c;散点。经过编写canvas图表…

Java8排序–性能陷阱

Java 8带来了lambda的所有优点&#xff0c;使我们能够使用声明式样式进行编程。 但这真的免费吗&#xff1f; 我们是否应该担心必须为新的编程功能付出的代价&#xff1f; 这是一个我们可能要担心的例子。 考虑对这个简单类的实例进行排序&#xff1a; private static class…

词频统计工程相关

&#xff08;the format of this article is from SkYjoKEr&#xff09; //开始干之前 模块1、WordClass 一个存放单词以及实现相关操作的类&#xff0c;其中单词以二元组<word, freq>的形式存储。 &#xff08;20min&#xff09; 2、WordCounter 完成单词统计&#xff0…

canvas图形编辑器

原文地址&#xff1a;http://jeffzhong.space/2017/11/02/drawboard/   使用canvas进行开发项目&#xff0c;我们离不开各种线段&#xff0c;曲线&#xff0c;图形&#xff0c;但每次都必须用代码一步一步去实现&#xff0c;显得非常麻烦。有没有一种类似于PS&#xff0c;CAD…