面向对象 红绿灯 案例

面向对象 点击实现红绿灯颜色切换

面向对象：定义不同类，让类的实例工作
优点：代码清晰，结构严密，更利于维护
使用场景：需要封装和复用性的场合，组件思维

案例： 点击红灯变黄，黄灯变绿，绿灯变红，如果页面有100个红绿灯，怎么做到互不影响？

• 面向对象编程，重要的是编写类
  (1) 定义类 TrafficLights()
• 红绿灯有哪写属性方法？
  1.属性
  (1) 当前颜色 color
  (2) 属于自己的 dom
  2.方法
  (1) 初始化 init()
  (2) 切换颜色 colorChange()
  (3) 绑定事件 bindClick()

<div id="box"></div>

    // 定义类 TrafficLights
   function TrafficLights() {
        // 添加属性
        this.color = 1; // 红色1,黄色2,绿色3
        // 初始化
        this.init();
        // 监听
        this.bindClick();
   }
    // 初始化方法
   TrafficLights.prototype.init = function() {
    // 创建dom
       this.dom = document.createElement('img');
       // 设置src
       this.dom.src = 'images/' + this.color + '.jpg';
       // box追加 ‘appendchild’在指定元素节点的最后一个子节点之后添加节点。
       box.appendChild(this.dom);
   }
    //  绑定监听
    TrafficLights.prototype.bindClick = function() {
    // 备份上下文,self 指的是整个js实例。
    // 事件处理函数中，this是触发this.dom的这个元素本身，this不能指向它的实例
        var self = this; 
        // 当dom被点击时，触发函数
        this.dom.onclick = function() {
            self.colorChange();
        }
    }  
    // 改变颜色
    TrafficLights.prototype.colorChange = function() {
        this.color++;
        if(this.color === 4) {
            this.color = 1;
        }
        this.dom.src = 'images/' + this.color + '.jpg';
    }
    // 拿到盒子box
   var box = document.getElementById('box');
   // 实例
 	new TrafficLights(); // 1个红绿灯
   console.log(new TrafficLights()); // 打印new TrafficLights() 里边会有添加的属性color和dom
	
	var cont = 100; // 100个红绿灯
	while(cont--){
		new TrafficLights();
	}