读书笔记——javascript设计模式

版权声明：本文为博主原创文章，随便转载，出处注明一哈 https://blog.csdn.net/u012551928/article/details/88388170

灵活的语言——javascript

从上到下灵活转变

//全局变量污染
function checkName(){}
function checkEmail(){}
//等同于
var checkName = function(){}
var checkEmail = function(){}

升级成一个对象

var CheckObject = {
	checkName: function(){},
	checkEmail: function(){}
}
//等同于 对象的另一种形式
var CheckObject = function(){}
CheckObject.checkName = function(){}
CheckObject.checkEmail = function(){}

写一个函数，返回一个对象，会不影响。

var CheckObject = function(){
	return {
		checkName: function(){},
		checkEmail: function(){}
	}
}
var a = CheckObject();
a.checkEmail();

优化，使用类

var CheckObject = function(){
	this.checkName = function(){}
	this.checkEmail = function(){}
}
var a = new CheckObject();
a.checkEmail();

使用类new新对象时，this中的属性和方法会被复制一遍，使用原型方式，减轻资源消耗，实现复用

var CheckObject = function(){};
CheckObject.prototype.checkName = function(){}
CheckObject.prototype.checkEmail = function(){}
var a = new CheckObject();
a.checkName();
a.checkEmail();

避免书写三遍a进行调用验证，可以在最后将当前对象返回

var CheckObject = function(){};
CheckObject.prototype.checkName = function(){
	return this;
}
CheckObject.prototype.checkEmail = function(){
	return this;
}
var a = new CheckObject();
a.checkName().checkEmail();

prototype.js：一款javascript框架，封装了很多方法，对原生对象的扩展。
一种添加方法的功能方法

// 链式添加
Function.prototype.addMethod = function(name,fn){
	this[name] = fn;
	return this;
}
var methods = function(){};
methods.addMethod('checkName', function(){
	return this;
}).addMethod('checkEmail', function(){
	return this;
})
// 链式使用
methods.checkName().checkEmail();

原型方式

// 链式添加
Function.prototype.addMethod = function(name,fn){
	this.prototype[name] = fn;
	return this;
}
var methods = function(){};
methods.addMethod('checkName', function(){
	return this;
}).addMethod('checkEmail', function(){
	return this;
})
// 链式使用
var m = new methods();
m.checkName().checkEmail();

面向对象编程

面向对象编程：将需求抽象成一个对象，然后针对这个对象分析其特征（属性）与动作（方法）。
（记得Java中的）特点：封装，继承，多态。

new对象实例化，只对类执行一次，类内部this定义的属性和方法，复制到新创建的对象中。
类内部，声明的方法和属性称为类的私有属性和私有方法
类内部，this定义的方法和属性称为类的公有属性和公有方法，
其中类的公有方法=可外部访问+访问私有属性方法+访问共有属性方法+访问私有属性方法称为特权方法，
其中类的公有方法=用于初始化对象属性的称为构造器
类外面，点语法定义的属性和方法称为类的静态共有属性和静态共有方法

var Book = function(id, name, price){
	// 私有属性
	var num = 1;
	// 私有方法
	function checkId(){};
	// 特权方法
	this.setName = function(name){
		this.name = name;
	}
	// 对象公有属性
	this.id = id;
	// 对象公有方法
	this.copy = function(){};
	// 构造器
	this.setName(name)
}
// 静态公有属性(对象不能访问)
Book.isChinese = true;
// 静态公有方法(对象不能访问)
Book.resetTime = function(){}
// 原型公有属性和方法
Book.prototype = {
	isJSBook: false,
	display: function(){}
}
var b = new Book(11,'javascript 设计模式', 50)
console.log(b.num)  // undefined 私有属性和方法无法访问
console.log(b.isJSBook)  // false
console.log(b.id)  // 11
console.log(b.isChinese)  // undefined 类静态共有属性和方法无法访问

console.log(Book.isChinese)  // true  通过点语法直接访问。

闭包

闭包：有权访问另一个函数作用域中变量的函数。即一个函数内部创建一个函数。```

// 利用闭包实现，自调用函数
var Book = (function(){
	// 私有属性
	var bookNum = 1;
	// 私有方法
	function checkId(){};
	// 创建类
	function _book(newId, newName, newPrice){
		// 私有变量
		var name, price;
		// 私有方法
		function checkId(id){};
		// 特权方法
		this.getName = function(){}
		this.getPrice = function(){}
		this.setName = function(){}
		this.setPrice = function(){}
		// 公有属性
		this.id = newId;
		// 公有方法
		this.copy = function(){};
		bookNum++;
		if(bookNum>160)throw new Error('我们仅出版100本书。')
		// 构造器
		this.setName(name);
		this.setPrice(price);
	}
	// 构造原型
	_book.prototype = {
		// 静态公有属性
		isJSBook: false,
		// 静态公有方法
		display: function(){}
	}
	// 返回类
	return _book
})()
var c = new Book(12,'Tom',1200)
console.log(c.id)  // 12;
console.log(c.isJSBook)  // false;

创建对象的安全模式

直接实例对比：
不安全模式，如果忘记new ，则增加全局污染。如下：

// 图书类
var Book = function(title, time, type){
	this.title = title;
	this.time = time;
	this.type = type;
}
// 实例化一本书 ， 少了new
var book = Book('javascript', '2014', 'js');
console.log(book) // undefined
// 缺失new 作为函数调用，this指向window全局。所以全局污染。
// 全局污染
console.log(title) // javascript
console.log(time) // 2014
console.log(type) // js

安全模式下的实现。如下：

var Book = function(title, time, type){
	// 判断this是否指向当前对象，如果是则执行初始化
	if(this instanceof Book){
		this.title = title;
		this.time = time;
		this.type = type;
	}else{
		// 否则，实例化操作。
		return new Book(title, time, type)
	}
}
var book = new Book('javascript', '2014', 'js');
console.log(book) // Book {title: "javascript", time: "2014", type: "js"}
console.log(book.title) // javascript
console.log(title) // undefined

---

未完待续。。。