1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。
构造函数模式
<script type="text/javascript">
function Person(name,age) {
this.name=name;
this.age=age;
}
Person.prototype.sayName=function () {
console.log(this.name);
}
var person1=new Person("Lucy",23);
person1.sayName();
</script>
混合模式
<script type="text/javascript">
function inherit(parent,sun) {
sun.prototype=Object.create(parent.prototype);
sun.prototype.constructor=sun;
}
function Person(name,age) {
this.name=name;
this.age=age;
}
Person.prototype.sayName=function () {
console.log(this.name);
}
function Student(name,age,score) {
Person.call(this,name,age);
this.score=score;
}
inherit(Person,Student);
Student.prototype.sayScore=function () {
console.log(this.score);
}
var student1=new Student("lucy",24,100);
student1.sayScore();
student1.sayName();
</script>
模块模式
<script type="text/javascript">
var person=(function () {
var name="lucy",
age=23;
function sayName() {
console.log(name);
}
return{
name:name,
age:age,
sayName:sayName
}
})();
person.sayName();
</script>
工厂模式
<script type="text/javascript">
// 缺点：无法知道实例是由哪个构造函数创建的
function Person(name,age) {
var temp={};
temp.name=name;
temp.age=age;
temp.sayName=function () {
console.log(this.name);
}
return temp;
}
var person1=Person("Lucy",23);
person1.sayName();
</script>
单例模式
<script type="text/javascript">
var Person=(function () {
var temp;
function init(name,age) {
return {
name:name,
age:age,
sayName:function () {
console.log(this.name);
}
}
}
return {
createPerson:function (name,age) {
if(!temp){
temp=init(name,age);
}
return temp;
}
}
}());
var person1=Person.createPerson("lucy",23);
var person2=Person.createPerson("lily",24);
</script>
发布订阅模式
<script type="text/javascript">
var EventCenter=(function () {
var events={};
function on(evt,handler) {
events[evt]=events[evt]||[];
events[evt].push({
handler:handler
})
}
function off(evt) {
delete events[evt];
}
function fire(evt,args) {
if(!events[evt]){
return;
}
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(args);
}
}
return {
on:on,
off:off,
fire:fire
}
})();
EventCenter.on('change', function(val){
console.log('change... now val is ' + val);
});
EventCenter.fire('change', '饥人谷'); //change... now val is 饥人谷
EventCenter.off('change');
2、使用发布订阅模式写一个事件管理器，可以实现如下方式调用
Event.on('change', function(val){
console.log('change... now val is ' + val);
});
Event.fire('change', '饥人谷');
Event.off('changer');
代码：
<script type="text/javascript">
var EventCenter=(function () {
var events={};
function on(evt,handler) {
events[evt]=events[evt]||[];
events[evt].push({
handler:handler
})
}
function off(evt) {
delete events[evt];
}
function fire(evt,args) {
if(!events[evt]){
return;
}
for(var i=0;i<events[evt].length;i++){
events[evt][i].handler(args);
}
}
return {
on:on,
off:off,
fire:fire
}
})();
EventCenter.on('change', function(val){
console.log('change... now val is ' + val);
});
EventCenter.fire('change', '饥人谷'); //change... now val is 饥人谷
EventCenter.off('change');
