设计模式-Assignment

问答

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

【设计模式梗概】

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

var EventManger = (function(){
  var event = {}; 
  function on(eventName,callback){
    event[eventName] = event[eventName] || [];
    event[eventName].push({
      callback:callback,
    })
    return this
  };  
  function fire(eventName,data){
    if(!event[eventName]){return}
    var subscribers = event[eventName];
    var len = subscribers.length;
    while(len--){
      subscribers[len].callback(data)
    }
    return this;
   
  };
  
  function off(eventName){
    if(!event[eventName]){return}
    event[eventName].splice(0,1);
   return this
  
  }
  return {
    on:on,
    fire:fire,
    off:off
  }
})();

EventManger.on('text:change',function(val){
  console.log('text:change...now val is '+val);
});

EventManger.fire('text:change','hungerVallery');

EventManger.fire('text:change','stay hungry');

EventManger.off('text:change');

EventManger.fire('text:change','stay foolish');

代码

1.写一个函数createTimer，用于创建计时器，创建的计时器可分别进行计时「新增」。

ps: 1. 计时器内部写法参考前面的任务中Runtime的写法; 2. 体会工厂模式的用法

function createTimer(){
  var start,end;
  
  function start(){
    start = new Date();
    return start;
  };
  function end(){
    end = new Date();
    return end;
  };
  
  function get(){
    return (end - start);
  }
  
  return {
    start:start,
    end:end,
    get:get
  };
};

var timer1 = createTimer();
var timer2 = createTimer();
timer1.start();
for(var i=0;i<100;i++){
    console.log(1);
}
timer2.start();
for(var i=0;i<100;i++){
    console.log(2);
}
timer1.end();
timer2.end();
console.log('timer1: '+timer1.get());
console.log('timer2: '+timer2.get());

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

//$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

【Expouse】

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

// 要求：html 里有多个carousel，当调用时启动全部的 carousel

//方式1
//通过插件的方式启动所有轮播
$('.carousel').carousel();

//方式2
//通过创建对象的方式启动所有轮播
$('.carousel').each(function(){
    new Carousel($(this));
});

【jQeruy插件形式】

【创建对象形式】