前言：等后端联调的这一会儿 写一个面向对象的圆角矩形。练练手，复习
ES5创建类的方式是用function来实现，传入一个参数对象（为什么不传入各种参数而是把这些参数放到一个对象中传入？简洁、安全），把这些参数作为类的属性，写一个初始化函数，一个渲染函数（方法挂在类的prototype属性上，好处是什么？节省内存），new实例化，调初始化函数，(new一个对象的函数，做了哪些？三步：1. 生成一个新对象 2. 往这个新对象上添加属性方法 3. 返回this)
圆角矩形的类函数如下：
function Rect(opts) {
this.top = opts.top || 100;
this.left = opts.left || 100;
this.width = opts.width || 100;
this.height = opts.height || 100;
this.bgColor = opts.bgColor || 'red';
this.border = opts.border || '1px solid #000';
this.id = opts.id;
this.borderRadius = opts.borderRadius || 0;
}
Rect.prototype._init = function() {
let parentId = document.getElementById(this.id);
let childId = document.createElement('div');
parentId.appendChild(childId);
childId.style.width = this.width + 'px';
childId.style.height = this.height + 'px';
childId.style.position = 'absolute';
childId.style.top = this.top + 'px';
childId.style.left = this.left + 'px';
childId.style.border = this.border;
childId.style.background = this.bgColor;
childId.style.borderRadius = this.borderRadius + 'px';
}
Rect.prototype.render = function() {
this._init();
}
新建一个页面，引入这个类，实例化，初始化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" style="position: relative;"></div>
<script type="text/javascript" src="./rect.js"></script>
<script type="text/javascript">
let rect = new Rect({
id: 'app',
borderRadius: '10',
border: '10px solid green',
top: 20
})
rect.render();
</script>
</body>
</html>
最后结果如下：
