1,写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
//单例模式范例
var Car = (function(){
var instance;
function init() {
//私有的变量和函数
var speed = 0;
return {
//定义公共的属性和方法
getSpeed: function(){
return speed;
},
setSpeed: function( s ){
speed = s;
}
};
}
return {
getInstance: function() {
if (!instance) {
instance = init();
}
return instance;
}
};
}());
var car = Car.getInstance();
var car2 = Car.getInstance();
car === car2;
//工厂模式 ---通过函数创造一个对象 将其return出来
function createPeople(age,name,sex) {
var o= new Object();
o.age=age;
o.name=name;
o.sex=sex;
return o;
}
var p1=createPeople(18,"zhangsan","M"),
p2=createPeople(20,"lisi","F");
console.log(p1,p2)
//模块模式
var People=(function () {
var name="laomingzi";
return{
changeName: function (newName) {
name=newName;
},
sayName:function () {
console.log(name)
}
}
}());
People.sayName();
People.changeName("xinmingzi");
People.sayName();
// 常见形式
var Car=(function () {
var carName="奔驰";
function sayCarName() {
console.log(carName)
}
return{
sayNameFunc:sayCarName
}
}());
Car.sayNameFunc()
//发布订阅模式
//无传参模式
EventCenter=(function () {
var events={};
return{
on:function (evt,handle) {
events[evt]=events[evt]||[];
events[evt].push(handle);
},
fire:function (evt) {
if (!events[evt]){ console.log("未绑定此事件"); return}
for(var i=0;i<events[evt].length;i++){
events[evt][i]()
}
},
unbind:function (evt) {
delete events[evt];
}
}
}())
//有参数模式
EventCenter=(function () {
var events={};
return{
on:function (evt,handle) {
events[evt]=events[evt]||[];
events[evt].push({handle:handle});
},
fire:function (evt,arg) {
if (!events[evt]){ console.log("未绑定此事件"); return}
for(var i=0;i<events[evt].length;i++){
events[evt][i].handle(arg)
}
},
unbind:function (evt) {
delete events[evt];
}
}
}());
2,使用发布订阅模式写一个事件管理器,可以实现如下方式调用
EventManager.on('text:change', function(val){
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', '饥人谷');
EventManager.off('text:change');
var Event = (function (){
var events = {};
function on(evt, handle){
events[evt] = events[evt] || [];
events[evt].push({
handle:handle
});
};
function fire(evt,args){
if(!events[evt]){
return
}
for(var i=0; i<events[evt].length; i++){
events[evt][i].handle(args);
}
};
function off(){
delete events[evt]
};
return {
on: on,
fire: fire,
off: off
}
})()
Event.on('change', function(val){
console.log('change…… now val is' + val);
});
Event.fire('change', '饥人谷');
}
执行结果