任务四

‍‍如何进行一组组件的设计？

组件通常都是一组的，所以我们可以定义一个widget类，在这个类里面定义几个基本方法。

Widget.prototype ={
     on:function (type,handler) {
     },//注册事件
     fire:function (type,data) {
     },//触发事件
     off:function () {
     },//事件解绑
     renderUI:function () {
        
     },//dom节点添加
     bindUI:function () {
        
     },//dom事件绑定
     syncUI:function () {
        
     },//组件属性初始化
     destructor:function () {
        
     },//销毁前要执行的方法
     render:function (container) {
        this.renderUI();
        this.handlers={};
        this.bindUI();
        this.syncUI();
        $(container||document.body).append(this.boundingBox);
     },//组件添加
     destroy:function () {
        this.destructor();
        this.boundingBox.off();
        this.boundingBox.remove();
     }//组件销毁
  };

然后对于模态框组件，我们可以使用jquery继承widget这个类，然后再实现他定义的接口。定义好一组组件的方法和属性后，开始实现模态框。
对于模态框，为了方便调用，我们要尽可能的接近原生的alert调用方法。
所以我们定义一个Window类，这是一个Window类的构造函数：

function Window() {
     this.config = {};
     this.handlers={};
  }

然后开始在Window的原型中实现上述定义的接口与方法。
以最简单的销毁函数举例：

destructor:function () {
        this._mask&&this._mask.remove();
     }

实现了这些接口后，我们在开始实现alert方法

alert:function (config) {
        $.extend(this.config,config,{winType:"alert"});
        this.render();
        return this;
     }

销毁函数一般在放在关闭按钮的事件，点击关闭按钮，触发销毁方法。

收获

‍‍1.理解了抽象的好处。

‍‍2.学会了构造函数的一般写法。‍‍‍‍

创建对象

工厂模式

function Person(name) {
		var o=new Object();
		o.name=name;
		o.sayName=function() {
			console.log(this.name);
		}
	}

简单粗暴，但是浪费了大量的空间。并且这并不是一个构造函数，他在内部创建了一个对象赋值后返回了这个对象。而构造函数内部一般不会显示的创建对象，创建对象和返回对象一般由new命令完成。

构造函数

在使用构造函数之前，我们需要先理解new命令。对构造函数使用new命令后，后面的构造函数就不会正常执行了。
它的执行顺序会变成这样
1.创建一个空对象。
2.将空对象的原型指向构造函数的prototype属性。
3.将空对象赋值给this。
4.执行构造函数。
5.返回this对象（一般情况下）。
对于上面的代码写成构造函数就是

function Person(name) {
		this.name=name;
		this.sayName=function() {
			console.log(this.name);
		}
	}

原型模式

因为每个对象的方法都一样，对于一样的属性，我们完全可以放到原型对象中，每个对象都引用原型对象的方法就可以了，需要注意一点的是原型对象的写法。
构造函数

Person.prototype.sayName=function() {
		console.log(this.name);
	}

这种写法没有任何问题，但是如果重写整个原型对象，就会切断构造函数与最初原型之间的联系。如下面的代码所示：

Person.prototype={
		sayName:function () {
			console.log(this.name);
		}	
	};

这样写了以后constructor属性不再指向Person，constructor默认指向构造函数，被重写后会指向Object，所以使用对象字面量来重写整个原型对象的时候，要注意需要同时给constructor 赋值。不过不重新给constructor 赋值，也不会有大问题，只不过无法通过constructor 获取正确的对象类型，不过用instanceof可以解决。