前端设计模式

1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。

   //工厂模式
   function createPerson(name,age,job){
       var person = {
           name:name,
           age:age,
           job:job,
           sayName:function(){
               console.log(this.name)
           }
       };
       return person
   }
   var people = createPerson("Clark","30","Doctor");
   console.log(people.job);
   people.sayName();
   //构造函数模式
   function Person(name){
       this.name = name;
   }
   Person.prototype.sayName = function(){
       console.log('my name is '+this.name)
   };
   var people1 = new Person("Clark");
   people1.sayName();
   //混合模式
       function Person(name,sex){
           this.name = name;
           this.sex = sex;
       }
       Person.prototype.getName = function(){
           console.log('my name is '+this.name)
       };

       function Male(name,sex,age){
           Person.call(this,name,sex);
           this.age = age;
       }
       Male.prototype = Object.create(Person.prototype);
       Male.prototype.getAge = function(){
           console.log(this.age)
       };
       Male.prototype.constructor = Male;
       var Clark = new Male('Clark', '男', 27);
       Clark.getName();
       Clark.getAge();
       console.log(Clark.sex);
  //模块模式
       var Person = (function(){
           function People(name){
               this.name = name;
           }
           People.prototype.sayName = function(){
               console.log('my name is '+this.name)
           };
           return new People("Clark")
       })();


       var Person = (function(){
           var name = "Clark";
           return {
               changeName: function(newName){
                   name = newName;
               },
               sayName: function(){
                   console.log(name);
               }
           };
       })();
       Person.sayName();
       Person.changeName("xuyangjie");
       Person.sayName();
//单例模式
var People = (function(){
    var instance;
    function init() {
        //define private methods and properties
        //do something
        return {
            //define public methods and properties
        };
    }
    return {
        createPeople: function() {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
}());
var obj1 = People.createPeople();
var obj2 = People.createPeople();
//发布订阅模式
var EventCenter=(function(){
    var events={};
/*
    {
        my_event:[{handler:function(data){xxx}},{handler:function(data){zzz}}]
    }
*/
    function on(evt,handler){
        events[evt]=events[evt] || [];
        events[evt].push({
            handler:handler
        })
    }
    function fire(evt,arg){
        if(!events[evt]){
            return 
        }
        for(var i=0;i

2.使用发布订阅模式写一个事件管理器,可以实现如下方式调用

Event.on('change', function(val){
    console.log('change...  now val is ' + val);  
});
Event.fire('change', '饥人谷');
Event.off('changer');
var Event=(function(){
var events={};
/*
{
    my_event:[{handler:function(data){xxx}},{handler:function(data){zzz}}]
}
*/
function on(evt,handler){
    events[evt]=events[evt] || [];
    events[evt].push({
        handler:handler
    })
}
function fire(evt,arg){
    if(!events[evt]){
        return 
    }
    for(var i=0;i

你可能感兴趣的:(前端设计模式)