1.工厂模式,即函数封装,把对象什么的在函数内定义。(好处低耦合高内聚,重复的代码可以放在父类去编写,子类继承父类所有的成员属性和方法,子类只专注于实现自己的业务逻辑)
function factory(name,age){
var obj = {};
obj.name = name;
obj.age = age;
obj.write = function(){
alert(this.name+"can write JS!");
}
return obj;
}
var p1 = factory("Amy",12);
var p2 = factory("Bob",14);
p1.write();
p2.write();
2.单例模式。先创建对象,对象内创建方法。然后调用。(进行模块化开发)
var person = {
name: "Amy",
age: 12,
write: function(){
alert(this.name,this.age);
}
};
person.write();
3.单体模式。(把一些属性和方法放在一起的对象,只能被实例化一次)
/*Basic Singleton*/
var Singleton = {
attribute:true,
method1:function(){},
method2:function(){}
};
4.观察者模式,即发布订阅模式。定义对象间的一对多的依赖关系,如,事件绑定。
Event.on('test', function (result) {
console.log(result);
});
Event.on('test', function () {
console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'
5.策略模式。定义算法,然后封装,即将是算法的使用与实现分离
// 对于vip客户
function vipPrice() {
this.discount = 0.5;
}
vipPrice.prototype.getPrice = function(price) {
return price * this.discount;
}
// 对于老客户
function oldPrice() {
this.discount = 0.3;
}
oldPrice.prototype.getPrice = function(price) {
return price * this.discount;
}
// 对于普通客户
function Price() {
this.discount = 1;
}
Price.prototype.getPrice = function(price) {
return price ;
}
// 上下文,对于客户端的使用
function Context() {
this.name = '';
this.strategy = null;
this.price = 0;
}
Context.prototype.set = function(name, strategy, price) {
this.name = name;
this.strategy = strategy;
this.price = price;
}
Context.prototype.getResult = function() {
console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));
}
var context = new Context();
var vip = new vipPrice();
context.set ('vip客户', vip, 200);
context.getResult(); // vip客户 的结账价为: 100
var old = new oldPrice();
context.set ('老客户', old, 200);
context.getResult(); // 老客户 的结账价为: 60
var Price = new Price();
context.set ('普通客户', Price, 200);
context.getResult(); // 普通客户 的结账价为: 200
6.模板模式。(定义算法的方法封装到父类,子类可以继承父类,并且可以重写父类。)
var Interview = function(){};
// 笔试
Interview.prototype.writtenTest = function(){
console.log("这里是前端笔试题");
};
// 技术面试
Interview.prototype.technicalInterview = function(){
console.log("这里是技术面试");
};
// 领导面试
Interview.prototype.leader = function(){
console.log("领导面试");
};
// 领导面试
Interview.prototype.HR = function(){
console.log("HR面试");
};
// 等通知
Interview.prototype.waitNotice = function(){
console.log("等通知啊,不知道过了没有哦");
};
// 代码初始化
Interview.prototype.init = function(){
this.writtenTest();
this.technicalInterview();
this.leader();
this.HR();
this.waitNotice();
};
// 阿里巴巴的笔试和技术面不同,重写父类方法,其他继承父类方法。
var AliInterview = function(){};
AliInterview.prototype = new Interview();
// 子类重写方法 实现自己的业务逻辑
AliInterview.prototype.writtenTest = function(){
console.log("阿里的技术题就是难啊");
}
AliInterview.prototype.technicalInterview = function(){
console.log("阿里的技术面就是叼啊");
}
var AliInterview = new AliInterview();
AliInterview.init();
// 阿里的技术题就是难啊
// 阿里的技术面就是叼啊
// 领导面试
// HR面试
// 等通知啊,不知道过了没有哦
7.代理模式。(把对一个对象的访问,交给另一个代理对象来操作)
// 补打卡事件
var fillOut = function (lateDate) {
this.lateDate = lateDate;
};
// 这是bigBoss
var bigBoss = function (fillOut) {
this.state = function (isSuccess) {
console.log("忘记打卡的日期为:" + fillOut.lateDate + ", 补打卡状态:" + isSuccess);
}
};
// 助理代理大boss 完成补打卡审批
var proxyAssis = function (fillOut) {
this.state = function (isSuccess) {
(new bigBoss(fillOut)).state(isSuccess); // 替bigBoss审批
}
};
// 调用方法:
var proxyAssis = new proxyAssis(new fillOut("2016-9-11"));
proxyAssis.state("补打卡成功");
// 忘记打卡的日期为:2016-9-11, 补打卡状态:补打卡成功
8.外观模式。(封装了复杂操作的函数)
function ajaxCall(type,url,callback,data){
// 根据当前浏览器获取对ajax连接对象的引用
var xhr=(function(){
try {
// 所有现代浏览器所使用的标准方法
return new XMLHttpRequest();
}catch(e){}
// 较老版本的internet Explorer兼容
try{
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(e){}
try{
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){}
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
// 如果没能找到相关的ajax连接对象,则跑出一个错误。
throw new Error("Ajax not support in this browser.")
}()),
STATE_LOADED=4,
STATUS_OK=200;
// 一但从服务器收到表示成功的相应消息,则执行所给定的回调方法
xhr.onreadystatechange=function{
if(xhr.readyState !==STATE_LOADED){
return;
}
if(xhr.state==STATUS_OK){
callback(xhr.responseText);
}
}
// 使用浏览器的ajax连接对象来向所给定的URL发出相关的调用
xhr.open(type.toUpperCase(),url);
xhr.send(data);
}
// 使用方法
ajaxCall("get","/user/12345",function(rs){
alert('收到的数据为:'+rs);
})