常见设计模式

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

//单例模式范例
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;

//构造函数模式
function Car(){
      this.speed;
}
Car.prototype.init = funcition(){
      this.speed = 0;
}
Car.prototype.getSpeed = function(){
      return this.speed;
}
Car.prototype.setSpeed = function(s){
      this.speed = s;
      return this.speed;
}
var car = new Car();
car.init();
car.setSpeed(40);
car.getSpeed();

//混合模式
function Person(name){
      this.name = name;
}
Person.prototype.satName = function(){
      console.log(this.name);
}
function People(name, age){
      Person.call(this, name);
      this.age = age;
}
//People.prototype = Object.create(Person.prototye);
People.prototype = create(Person.prototype);
function create(parentObj){
      function F(){};
      F.prototype = parentObj;
      return new F();
}

//模块模式
var Person = (function(){
      var name = 'yangran';
      return {
            sayName: function(){
                  console.log(name);
            },
            setName: function(newName){
                  name = newName;
            }
      }
})()
Person.sayName();
Person.setName('sfyr111');
Person.sayName();

//工厂模式
function CreatPerson(opts){
      function Person(){
            this.name = opts.name || 'yangran';
            this.age = opts.age;
      }
      Person.prototype.sayName = function(){
            console.log(this.name);
      }
      Person.prototype.sayAge = function(){
            console.log(this.age);
      }
      if(opts.type === 'sayName'){
            return new Person().sayName();
      }  else if(opts.type === 'sayAge'){
            return new Person().sayAge();
      }
}
CreatPerson({type: 'sayName', name: 'sfyr111'});

//单例模式
var People = (function(){
      var instance;
      function Person(){
      }
      Person.prototype.init = function(opts){
            this.name;
            this.age;
      }
      Person.prototype.sayName  = function(){
            console.log(this.name);
      }
      if(!instance) {
            instance =  new Person();
      } 
      return instance;
})()

//发布订阅模式
var EventCenter = (function(){
      var events = {};//定义事件空集合 
      //预定的集合类型events = {'event1': [fun1, fun2],'event2': [fun3, fun4]}
      function on(evt, fn){
            events[evt] = events[evt] || [];
            events[evt].push(fn);
      }
      function fire(evt){
            if(!events[evt]){
                  return;
            }
            for(var i = 0; i < events[evt].length; i ++ ){
                  events[evt][i]( [].slice.call(arguments, 1) );
            }
      }
      function off(evt){
             delete events[evt];
      }
      return {
            on: on,
            fire: fire,
            off: off
      }
})()
EventCenter.on('event1', function(){
      console.log(1);
})
EventCenter.on('event2', function(){
      console.log(2);
})
EventCenter.fire('event1')
EventCenter.fire('event2')

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

EventManager.on('text:change', function(val){
    console.log('text:change...  now val is ' + val);  
});
EventManager.fire('text:change', '饥人谷');
EventManager.off('text:change');

var EventManager = (function(){
   var events = {};//定义事件空集合
   //预定的集合类型events = {'event1': [fun1, fun2],'event2': [fun3, fun4]}
   function on(evt, fn){
         events[evt] = events[evt] || [];
         events[evt].push(fn);
   }
   function fire(evt){
         if(!events[evt]){
               return;
         }
         for(var i = 0; i < events[evt].length; i ++ ){
               events[evt][i]( [].slice.call(arguments, 1) );
         }
   }
   function off(evt){
          delete events[evt];
   }
   return {
         on: on,
         fire: fire,
         off: off
   }
})()

发布订阅模式

• 写一个函数createTimer，用于创建计时器，创建的计时器可分别进行计时「新增」。
  ps: 1. 计时器内部写法参考前面的任务中Runtime的写法; 2. 体会工厂模式的用法

function createTimer(){
    function Timer(){
        this.start;
        this.end;
    }
    Timer.prototype.start = function(){
        this.start = Date.now();  
    }
    Timer.prototype.end = function(){
        this.end = Date.now();
    }
    Timer.prototype.get = function(){
        console.log(this.end - this.start);
    }
    return new Timer;
}
var timer1 = createTimer();
var timer2 = createTimer();
timer1.start();
for(var i=0;i<100;i++){
    console.log(i);
}
timer2.start();
for(var i=0;i<100;i++){
    console.log(i);
}
timer1.end();
timer2.end();
console.log(timer1.get());
console.log(timer2.get());

• 封装一个曝光加载组件，能实现如下方式调用

//$target 是 jquery 对象
// 当窗口滚动时，如果$target 出现在可见区域，执行回调函数里面的代码，且在回调函数内，$(this)代表$target
Expouse.bind($target, function(){
    console.log($(this));    // $target
});
// 当窗口滚动时，如果$target 出现在可见区域，执行回调函数里面的代码，且在回调函数内，$(this)代表$target。 仅执行一次回调函数，下次$target 曝光不再执行
Expourse.one($target, function(){
    console.log($(this));    // $target
})

曝光加载组件

• 封装一个 轮播插件，分别使用对象方式和 jquery插件方式来调用

// 要求：html 里有多个carousel，当调用时启动全部的 carousel
//方式1
//通过插件的方式启动所有轮播
$('.carousel').carousel();
//方式2
//通过创建对象的方式启动所有轮播
$('.carousel').each(function(){
    new Carousel($(this));
});

轮播jquery插件方式
轮播创建对象方式
本博客版权归 本人和饥人谷所有，转载需说明来源