寫出 構造函數模式、混合模式、模塊模式、工廠模式、單例模式、發布訂閱模式的范例。

//單例模式
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
})

封裝一個曝光組件

封裝的曝光
封裝的輪播