02-js模式

发表于 | 分类于 |

01-工厂模式

1
2
3
4
5
6
7
8
9
10
11
12
13
function CreatePerson(name){
	
	this.name = name;
	this.showName = function(){
		alert( this.name );
	};
	
}

var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();
  • 当new去调用一个函数: 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
  • new后面调用的函数 : 叫做构造函数

01.01-对象的引用

  1. ==基本类型== : 赋值的时候只是值的复制
  2. ==对象类型== : 赋值不仅是值的复制，而且也是引用的传递

01.02-对象的比较

  1. ==基本类型== : 值相同就可以
  2. ==对象类型== : 对象类型 : 值和引用都相同才行

02-工厂模式之原型

1
2
3
4
5
6
7
8
function 构造函数(){
	this.属性
}

构造函数.原型.方法 = function(){};

var 对象1 = new 构造函数();
对象1.方法();
  1. 先变型:
  2. 尽量不要出现函数嵌套函数
  3. 可以有全局变量
  4. 把onload中不是赋值的语句放到单独函数中

改成面向对象:

  1. 全局变量就是属性
  2. 函数就是方法
  3. Onload中创建对象
  4. 改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
window.onload = function(){
	
	var t1 = new Tab();
	t1.init();
	
};

function Tab(){
	this.oParent = document.getElementById('div1');
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].index = i;
		this.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};