这是一个 用 面向对象来 创建对象 的典型的列子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用面向对象创建矩形</title>
</head>
<body>
<div class="box" id="box">
</div>
<script>
window.onload = function () {
//1. 创建构造函数(创建类)
//要把属性也放在原型库中,使用一个初始化方法 _init
function Rect(option){
//然后在构造函数中调用初始化方法, 同时也把这个初始化方法放在原型库中,
//初始化方法是用来初始化属性的
this._init(option);
}
// 2. 给原型属性扩展方法和初始化属性 (原型库的写法)
Rect.prototype = {//注意 名字的第一个字要大写
_init:function(option){
//优化:就是使用json把参数保存起来,直接传递json
var option = option || {};
//设置属性
//2.1 放在哪里
this.parentId = option.parentId;
//2.2 设置位置
this.left = option.left ||100;
this.top = option.top ||100;
//2.3 设置大小
this.width = option.width||100;
this.height = option.height||50;
//设置其他
this.backgroundColor = option.backgroundColor||'blue';
this.border = option.border||0;
this.borderRadius = option.borderRadius||10;
},
//绘制方法
render: function () {
// 1.获取 parent 标签
var parentNode = document.getElementById(this.parentId);
//创建 div
var childNode = document.createElement('div');
//2.设置标签的相关属性
parentNode.style.position = 'relative';//给父标签 设置 relative
childNode.style.position = 'absolute';
childNode.style.left = this.left + 'px';//设置位置 左边的多少
childNode.style.top = this.top + 'px';
childNode.style.width = this.width + 'px'; //设置对象的宽度
childNode.style.height = this.height + 'px';
//设置其他
childNode.style.backgroundColor = this.backgroundColor;
childNode.style.border = this.border;
childNode.style.borderRadius = this.borderRadius + 'px';
//添加
parentNode.appendChild(childNode);
}
}
//如果要进行封装也是可以的,直接把上面的全部放在js文件夹中
//创建新的矩形
var mrRect = new Rect({
parentId:'box',
left:200,
top:200,
width:500,
height:300,
backgroundColor:'yellow',
border:'10px solid red',
borderRadius:15
});
//绘制,调用方法
mrRect.render();
}
</script>
</body>
</html>
网友评论