-
面向过程例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 20px;
width: 200px;
}
</style>
</head>
<body>
//div * 3
//统一设置div样式,设置边框 "1px solid red"
//p * 3
//统一设置p样式,设置边框 "1px solid red"
<div></div>
<div></div>
<div></div>
<p>我是第个1标签</p>
<p>我是第个2标签</p>
<p>我是第个3标签</p>
</body>
<script>
//问题:有大量的重复代码(代码冗余)
//01 获得页面中所有的div
var divs = document.getElementsByTagName("div");
//02 遍历标签数组
for (var i = 0; i < divs.length; i++) {
//03 设置每个标签的样式
divs[i].style.border = "1px solid red";
}
//01 获得页面中所有的p标签
var ps = document.getElementsByTagName("p");
//02 遍历标签数组
for (var i = 0; i < ps.length; i++) {
//03 设置每个标签的样式
ps[i].style.border = "1px solid red";
}
</script>
———————————————————————————————————————
-
函数封装小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 20px;
width: 200px;
}
</style>
</head>
<body>
//div * 3
//统一设置div样式,设置边框 "1px solid red"
//p * 3
//统一设置p样式,设置边框 "1px solid red"
<div></div>
<div></div>
<div></div>
<p>我是第个1标签</p>
<p>我是第个2标签</p>
<p>我是第个3标签</p>
</body>
<script>
//问题:01 全局变量污染
// 02 不方便阅读,维护麻烦,结构不清晰
var divs = tag("div");
setStyle(divs);
var ps = tag("p");
setStyle(ps);
function tag(tagName) {
return document.getElementsByTagName(tagName);
}
function setStyle(param) {
for (var i = 0; i < param.length; i++) {
//03 设置每个标签的样式
param[i].style.border = "1px solid red";
}
}
</script>
</html>
———————————————————————————————————————
-
面向对象小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 20px;
width: 200px;
}
</style>
</head>
<body>
//div * 3
//统一设置div样式,设置边框 "1px solid red"
//p * 3
//统一设置p样式,设置边框 "1px solid red"
<div></div>
<div></div>
<div></div>
<p>我是第个1标签</p>
<p>我是第个2标签</p>
<p>我是第个3标签</p>
</body>
<script>
//问题:01 全局变量污染
// 02 不方便阅读,维护麻烦,结构不清晰
var divs = $.tag("div");
$.setStyle(divs);
var ps = $.tag("p");
$.setStyle(ps);
//可以使用对象来进行封装(让上面所有的变量都成为某个对象的属性或者是方法)
var $ = {
getEle:{
tag:function (tagName) {
return document.getElementsByTagName(tagName);
},
id:function (id) {
return document.getElementById(id);
},
className:function (className) {
return document.getElementsByClassName(className);
},
},
setCss:{
setStyle:function (param) {
for (var i = 0; i < param.length; i++) {
//03 设置每个标签的样式
param[i].style.border = "1px solid red";
}
}
}
}
</script>
</html>
