什么是面向对象
要是以前别人问我。随口道来，封装继承多态，万物皆对象。。。一大推。说的自己都以为自己掌握了面向对象。呵呵一笑。确实掌握了 只是不会用。。。。。
什么是面向对象编程
以前 学。Net 虽然MVC 本身就是面向对象。也就没管什么思想，就记住步骤，跟着写就好。
现在想想，那时候还是太年轻了，当我看了设计模式里面对MCV的一个解释。发现并不是这么回事，面向对象 学问可大了，学好面向对象，锻炼思想，便开始虚心起来，觉得不简单。
废话说了那么多。
什么是面向对象编程。现在 我觉得 就是以对象的方式去写代码，不在考虑怎么一步步的实现效果。
按照之前我们可能会 先写10个DIV 然后随机位置 随机颜色 一步步
按照面向对象 就不在这样想了 先看有几个对象 在属性 方法。。
这个有一个盒子对象。 盒子有大小 位置 背景颜色这些属性
有随机颜色 随机位置 和出现的方法
那么就可以开始动手了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
800px;
height: 800px;
background-color: #cccccc;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
// 方块对象box
//盒子有大小，位置 背景颜色等属性。
//方法有随机改变位置 随机背景颜色
function Box(element) {
this.width = 20
this.height = 20
this.backgroundColor = 'red'
this.x = 50
this.y = 50
this.elemen=element
this.div=document.createElement('div')
element.appendChild(this.div)
}
//初始化
Box.prototype.init=function(){
this.randombc()
this.randomxy()
this.div.style.width=this.width+'px';
this.div.style.height=this.height+'px'
this.div.style.backgroundColor=this.backgroundColor
this.div.style.position='absolute'
this.div.style.left=this.x+'px'
this.div.style.top=this.y+'px'
console.log(this.div)
}
Box.prototype.randomxy=function(){
this.x=randomNum(0,(this.elemen.offsetWidth-this.width)/this.width)*this.width
this.y=randomNum(0,(this.elemen.offsetHeight-this.height)/this.height)*this.height
}
Box.prototype.randombc = function () {
let r = randomNum(0, 255)
let g = randomNum(0, 255)
let b = randomNum(0, 255)
this.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')'
}
function randomNum(minNum, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)
}
let ele=document.getElementById('container')
let arr=[]
for (let i=0;i<10;i++){
arr[i]=new Box(ele)
arr[i].init()
}
setInterval(function () {
for (let i=0;i<arr.length;i++){
arr[i].init()
}
},500)
</script>
</html>
面向对象 博大精深 需慢慢体会