常见设计模式

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

//单例模式
var Singleton = (function () {

    function Singleton(args) {        
        var args = args || {};
        this.name = 'Singleton';
        this.pointX = args.pointX || 1; 
        this.pointY = args.pointY || 2;

    }
    //实例容器
    var instance;
    var _static = {
        name: '用来玩的默认属性',

        /*
         * 获取实例的方法
         * 返回Singleton的实例
         */
        getInstance: function (args) {
            if (instance === undefined) {
                instance = new Singleton(args)
            }
            return instance
        }
    }
    return _static
})();
var singletonTest = Singleton.getInstance({ pointX: 5 });
var singletonTest2 = Singleton.getInstance({ pointX: 100000 });
console.log(singletonTest.pointX); // 输出 5
console.log(singletonTest.name); // 输出 "用来玩的默认属性"
console.log(singletonTest2.pointX); // 输出 5

显然单例模式是不适合重复使用的

//发布订阅的写法精髓
var EventCenter = (function () {
//这个events会在页面一开始的时候，就注入EventCenter.on所产生的对象
    var events = {};
    function fire(evt, args) {
        if (!events[evt]) {
            return;
        }
        for (var i = 0; i < events[evt].length; i++) {
            events[evt][i].handler(args);
            //优化的写法，可以调用多个参数
            events[evt][i].handler([].slice.call(arguments,1));
        }

    }
    function on(evt, handler2) {
        events[evt] = events[evt] || [];
        events[evt].push({
            handler: handler2
        });
    }
    return {
        on: on,
        fire: fire
    }
})();

EventCenter.fire('roll');

EventCenter.on('roll', function (data) {
    console.log(data);
    console.log("got you ROLL!!!")
})

模块化写的时候，用于互相呼叫模块可以哦

//工厂模式
   function createPerson(opts){
     var person = {
       name: opts.name||'hunger'
     };
     person.sayName: function(){
       console.log(this.name);
     }
     return person;
   }
   var p1 = createPerson({name:'ruoyu'});
   var p2 = createPerson({name: '谷'});

工厂模式就是撸一个工具箱，然后大家都可以用这个工具箱做东西

//构造函数模式
function Person(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function(){
  return this.name;
};
var student = new Person("若愚", 30);
console.log(student);

构造函数就是制造一个又一个的函数对象，每一个对象都有同样指针指向的prototype方法

//模块模式
var Person = (function(){
  var name = "hunger";
  return {
      changeName: function(newName){
          name = newName;
      },
      sayName: function(){
          console.log(name);
      }
  };
})();

Person.sayName();
Person.changeName("ruoyu");
Person.sayName();

模块模式和构造函数模式相似，只不过模块模式生成的对象的方法都是每家自有的，不互相污染

//混合模式
var Person = function(name, age) {
    this.name = name;
    this.age = age;
};
Person.prototype.sayName = function(){
  console.log(this.name);
}

var Student = function(name, age,  score) {
    Person.call(this, name, age);
    this.score = score;
};
//Student.prototype = Object.create(Person.prototype);
Student.prototype = create(Person.prototype);
function create (parentObj){
    function F(){}
    F.prototype = parentObj;
    return new F();
};

Student.prototype.sayScore = function(){
  console.log(this.score);
}
var student = new Student("谷", 28, 99);
console.log(student);

混合模式可以把几个构造函数模式用.call()连接起来，大家越来越庞大

以上代码如果有不明白的读者同学，欢迎丢入Chrome打断点运行，浏览器给出的解释比啥子注释好用多了。

var events = {};
EventManager = (function () {

    function on(evt, handle) {
        events[evt] = events[evt] || [];
        events[evt].push(handle);  //{事件1:[函数1,函数2]}
    }

    function fire(evt) {
        if (!events[evt]) {
            console.log("未绑定此事件");
            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
    }
}());

EventManager.on('text:change', function (val) {
    console.log('text:change...  now val is ' + val);
});
EventManager.fire('text:change', 'jirengu');//text:change...  now val is jirengu
EventManager.off('text:change');
EventManager.fire('text:change', 'jirengu');//未绑定此事件

上面的events要放在上一级作用域下，最后一个.fire才可以打出“未绑定此事件”

代码题

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

function createTimer(t) {
    var startTime,
        endTime,
        difference;
    function start() {
        startTime=Date.now();
        return startTime;
    }
    function end() {
        endTime=Date.now();
        return endTime
    }
    function get() {
        difference=endTime-startTime;
        return difference
    }
    var timer={
        start:start,
        end:end,
        get:get
    };

    return timer
}

var timer1 = createTimer();
var timer2 = createTimer();

timer1.start();
for (var i = 0; i < 9999; i++) {
    console.error(i);
}
timer2.start();
for (var i = 0; i < 9999; i++) {
    console.error(i);
}
timer1.end();
timer2.end();
console.log("一号差距",timer1.get()); //一号差距 527
console.log("二号差距",timer2.get()); //二号差距 232

//封装一个曝光加载组件，能实现如下方式调用
var Expouse = (function () {
    function bind($el, fn) {
        $(window).on('scroll', function () {
            if (!isShow($el)) {
                return
            }
            if (isShow($el)) {
                fn.call($el);
            }
        })
    }

    function one($el, fn) {
        var flag = true;
        $(window).on('scroll', function () {
            if (flag === false) {
                return
            }
            if (!isShow($el)) {
                return
            }
            if (isShow($el)) {
                fn.call($el);
                flag = false;
            }
        })

    }

    function isShow($el) {
        var scrollTop = $(window).scrollTop(),
            winH = $(window).height(),
            top = $el.offset().top;
        if ((scrollTop + winH) > top) {
            return true
        } else {
            return false
        }
    }

    return {
        bind: bind,
        one: one
    }
})()

var $target = $('.target');

Expouse.one($target, function () {
    console.log($(this));    // $target
})

封装一个曝光组件

封装的曝光
封装的轮播