寫出 構造函數(shù)模式剧董、混合模式兔仰、模塊模式茫负、工廠模式、單例模式乎赴、發(fā)布訂閱模式的范例忍法。
//單例模式
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
顯然單例模式是不適合重復使用的??
//發(fā)布訂閱的寫法精髓
var EventCenter = (function () {
//這個events會在頁面一開始的時候，就注入EventCenter.on所產(chǎn)生的對象
var events = {};
function fire(evt, args) {
if (!events[evt]) {
return;
}
for (var i = 0; i < events[evt].length; i++) {
events[evt][i].handler(args);
//優(yōu)化的寫法榕吼，可以調(diào)用多個參數(shù)
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: '谷'});
工廠模式就是擼一個工具箱，然后大家都可以用這個工具箱做東西
//構造函數(shù)模式
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);
構造函數(shù)就是制造一個又一個的函數(shù)對象羹蚣，每一個對象都有同樣指針指向的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();
模塊模式和構造函數(shù)模式相似原探，只不過模塊模式生成的對象的方法都是每家自有的，不互相污染
//混合模式
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);
混合模式可以把幾個構造函數(shù)模式用.call()連接起來顽素，大家越來越龐大
以上代碼如果有不明白的讀者同學咽弦，歡迎丟入Chrome打斷點運行，瀏覽器給出的解釋比啥子注釋好用多了胁出。
var events = {};
EventManager = (function () {
function on(evt, handle) {
events[evt] = events[evt] || [];
events[evt].push(handle); //{事件1:[函數(shù)1,函數(shù)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才可以打出“未綁定此事件”
代碼題
寫一個函數(shù)createTimer，用于創(chuàng)建計時器划鸽，創(chuàng)建的計時器可分別進行計時「新增」。
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
//封裝一個曝光加載組件，能實現(xiàn)如下方式調(diào)用
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
})
封裝一個曝光組件
