構(gòu)造函數(shù)模式
利用原型繼承的方式創(chuàng)建對象，以實現(xiàn)功能
function People(name,age) {
this.name = name;
this.age = age;
this.init();
}
People.prototype = {
sayHello:function () {
console.log("I'm" + this.name + ",hello!")
},
init:function () {
this.sayHello();
}
};
var xiaoming = new People("xiaoming",18);
混合模式
本質(zhì)上也是利用原型繼承的方式創(chuàng)建對象，但更加具象了功能的分層。
function People(name) {
this.name = name;
this.init();
}
People.prototype = {
sayHello:function () {
console.log("I'm" + this.name + ",hello!")
},
init:function () {
this.sayHello();
}
};
function Student(name,grade){
People.call(this,name); //讓People中的this.name變?yōu)橛蒘tudent傳入的name
this.grade = grade;
}
Student.prototype= Object.create(People.prototype); //繼承父對象
Student.prototype.sayGrade = function () {
console.log("my grade is" + this.grade);
};
Student.prototype.init = function () {
this.sayHello();
this.sayGrade();
};
var xiaoming = new Student("xiaoming","A");
模塊模式
利用閉包拆火，將私有變量保存，是一種很常見的封裝方式，但是隱私性做的不夠好们镜。
var Student = (function () {
var name = "xiaoming"
var gender = "male";
function sayHello() {
console.log("my name is " + name);
}
function sayGender(){
console.log("my gender is " + gender);
}
return {
sayHello:sayHello,
sayGender:sayGender
}
})();
Student.sayGender();
工廠模式
建立一個功能豐富的函數(shù)币叹，將參數(shù)傳入函數(shù)以實現(xiàn)不同的功能
function People(gender){
function Male(gender){
this.gender=gender;
this.name="Kevin";
}
function Female(gender){
this.gender=gender;
this.name="Daisy";
}
var result=undefined;
if(gender.toLowerCase() == "male"){
result = new Male(gender);
}
if(gender.toLowerCase() == "female"){
result = new Female(gender);
}
return result;
}
People("male").name;
單例模式
利用閉包的思想保存私有變量，同時為了節(jié)省空間憎账，利用構(gòu)造函數(shù)的方法僅僅在調(diào)用時才創(chuàng)造新對象 套硼。最重要的是卡辰，對象只能構(gòu)造一次胞皱，無法通過反復(fù)調(diào)用函數(shù)更改屬性。
var SingletonTester = (function () {
//參數(shù)：傳遞給單例的一個參數(shù)集合
function Singleton(args) {
//設(shè)置args變量為接收的參數(shù)或者為空（如果沒有提供的話）
var options = args || {};
//設(shè)置name參數(shù)
this.name = 'SingletonTester';
//設(shè)置pointX的值
this.pointX = args.pointX || 6; //從接收的參數(shù)里獲取九妈，或者設(shè)置為默認(rèn)值
//設(shè)置pointY的值
this.pointY = args.pointY || 10;
}
//實例容器
var instance;
return {
//獲取實例的方法
//返回Singleton的實例
getInstance: function (args) {
if (!instance) {
instance = new Singleton(args);
}
return instance;
}
};
})();
var singletonTest = SingletonTester.getInstance({ pointX: 5 });
console.log(singletonTest.pointX); // 輸出 5
var singletonTest = SingletonTester.getInstance({ pointX: 10 });
console.log(singletonTest.pointX); // 輸出5
發(fā)布訂閱模式
該模式用一個自己寫的事件模塊來連接多個獨立模塊反砌，實現(xiàn)不同模塊之間的解耦。例如萌朱，輪播跳轉(zhuǎn)的同時實現(xiàn)文字的跳轉(zhuǎn)宴树，為了保持輪播模塊的獨立性，不想把關(guān)聯(lián)文字跳轉(zhuǎn)的代碼寫入輪播模塊中晶疼，這時我們就可以用這種方法記錄“輪播跳轉(zhuǎn)”酒贬，然后在文字跳轉(zhuǎn)這個模塊中實現(xiàn)功能。類似于事件監(jiān)聽翠霍，時間管理器代碼如下：
var EventManager = (function () {
//創(chuàng)建一個記錄事件的集合
var events = {};
return {
//添加事件
on:function (item,func) {
events[item] = events[item] || [];
events[item].push(func);
return this;
},
//觸發(fā)事件
fire:function (item) {
if(!events[item])return;
for(var i = 0; i < events[item].length; i++){
events[item][i]([].slice.call(arguments,1));
}
return this;
},
//刪除事件
off:function (item) {
if(events[item]){
delete events[item];
}
return this;
}
}
})();
EventManager.on('text:change', function(val){
console.log('text:change... now val is ' + val);
});
EventManager.fire('text:change', '饑人谷'); //text:change... now val is 饑人谷
EventManager.off('text:change');
寫一個函數(shù)createTimer锭吨，用于創(chuàng)建計時器，創(chuàng)建的計時器可分別進(jìn)行計時「新增」
function createTimer() {
var clock;
var i = 0;
function start() {
clock = setInterval(function () {
i++;
console.log(i);
},1000)
}
function get() {
return i;
}
function end() {
clearInterval(clock);
}
return {
start:start,
get:get,
end:end
}
}
