Javascript oop設(shè)計模式 面向?qū)ο缶幊毯唵螌嵗榻B
Javascript oop設(shè)計模式 面向?qū)ο缶幊?/strong>
最初我們寫js代碼的時候是這么寫
function checkName(){
//驗證姓名
}
function checkEmail(){
//驗證郵箱
}
function checkPassword(){
//驗證密碼
}
這種方式會造成全局變量的嚴重污染,再過渡到
var checkObject = {
checkName : function(){};
checkEmail: function(){};
checkPassword: funcion(){};
}
//也可如此寫
var checkObject = {} // || function(){}
checkObject.checkName = function(){};
checkObject.checkEmail = function(){};
checkObject.checkPassword = function(){};
//以上這兩種寫法不能復(fù)制一份,也就是說在new 方法創(chuàng)建新的對象的時候,新對象不能繼承這些方法
以上是直接使用,而不是新建對象復(fù)制一份的,復(fù)制一份的話可以這么寫
var checkObject = function(){
return {
checkName:function(){},
checkEmail:function(){},
checkPassword:function(){}
}
}
//使用的時候 可以
var a = checkObject();
a.checkName();
這么寫可以實現(xiàn)對象的復(fù)制 但是這不符合面向?qū)ο?,新?chuàng)建的類和checkObject 沒有任何關(guān)系
于是我們可以采用構(gòu)造函數(shù)的方式書寫代碼
var checkObject = function(){
this.checkName = function(){}
this.checkEmail = function(){}
this.checkPassword = function(){}
}
//像這樣我們便可以用CheckObject 來創(chuàng)建新的對象了,通過new 來創(chuàng)建對象,創(chuàng)建出來的每個對象都會對this上的屬性進行復(fù)制,但是這么做的話,每次都會有相對較大消耗,對于共有的方法,我們可以放在對象的原型上
var checkObject = function(){};
checkObject.prototype.checkName = function(){};
//...
//這樣寫要將prototype 書寫很多遍 ,所以我們可以這么寫,并實現(xiàn)鏈式調(diào)用,將this返回
var checkObject = function(){};
checkObject.prototype={
checkName:function(){
//驗證姓名
return this;
},
checkEmail:function(){
//驗證郵箱
return this
},
checkPassword:function(){
//驗證密碼
return this;
}
}
// 這兩種方式不可混用,否則后邊會覆蓋前邊,此時我們調(diào)用只需
new checkObject().checkName().checkEmail().checkPassword();
下面再來介紹一下面向?qū)ο蠛兔嫦蜻^程兩種編程方式 .page 10
多個function 書寫的方式是一種面向過程書寫代碼的實現(xiàn)方式,添加了很多全局變量而且不利于別人復(fù)用,在別人使用時你也不可修改,我們可以改用面向?qū)ο蠓绞絹碇貙?,我們把需求抽成一個對象,這個對象稱之為類,面向?qū)ο笠粋€重要特點就是封裝,將屬性和方法封裝在一個對象中,就像將物品放在一個旅行箱中,這樣不管是使用和管理我們都方便,(雖然有時候感覺直接拿在外邊擺放也很方便,但是東西一多便不利于管理)
var Book = (function () {
//靜態(tài)私有變量
var bookNum = 0;
//靜態(tài)私有方法
function checkBook() {
}
//返回構(gòu)造函數(shù)
return function (newId, newName, newPrice) {
//私有變量
var name, price;
//私有方法
function checkId(id) {
}
//特權(quán)方法
this.getPrice = function () {
};
this.getName = function () {
};
this.setName = function (name) {
this.name = name
};
this.setPrice = function () {
};
//公有屬性
this.id = newId;
//公有方法
this.copy = function () {
};
bookNum++;
if (bookNum > 100)
throw new Error('oop javascript');
//構(gòu)造器 實例化過程中被調(diào)用的方法
this.setName(name);
this.setPrice(price);
}
})();
Book.prototype = {
//靜態(tài)公有屬性
isJSBook: false,
//靜態(tài)公有方法
display: function () {
}
};
//對比Java 別被js 起的這些名字弄混了 其實Js 就模仿了一個New 其他的跟Java基本一樣 類 全局變量 方法 有自己的理解比較好 以前未想明白
// java 為什么那么些
//為了看起來更像一個類 我們將原型上的方法 寫到類里邊
var Book = (function () {
//靜態(tài)私有變量
var bookNum = 0;
//靜態(tài)私有方法
function checkBook() {
}
//返回構(gòu)造函數(shù)
function _Book(newId, newName, newPrice) {
//私有變量
var name, price;
//私有方法
function checkId(id) {
}
//特權(quán)方法
this.getPrice = function () {
};
this.getName = function () {
};
this.setName = function (name) {
this.name = name
};
this.setPrice = function () {
};
//公有屬性
this.id = newId;
//公有方法
this.copy = function () {
};
bookNum++;
if (bookNum > 100)
throw new Error('oop javascript');
//構(gòu)造器 實例化過程中被調(diào)用的方法
this.setName(name);
this.setPrice(price);
}
_Book.prototype = {
//靜態(tài)公有屬性
isJSBook: false,
//靜態(tài)公有方法
display: function () {
}
};
return _Book;
})();
下面再介紹一種創(chuàng)建對象的安全模式
//注意 執(zhí)行new Book 方法之前 this.title 會先執(zhí)行一次
var Book = function (title) {
if (this instanceof Book) {
alert(1);
this.title = title;
}else{
return new Book(title);
}
};
var book = new Book('js');
alert(book.title);
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
uniapp插件uview下表單無法動態(tài)校驗的問題解決
最近項目中用到了uview?在做表單時用到了校驗,發(fā)現(xiàn)校驗不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動態(tài)校驗的問題解決,需要的朋友可以參考下2022-12-12
詳解JavaScript中l(wèi)ocalStorage使用要點
localStorage主要用來替代cookie,解決cookie(可參考cookie使用要點)讀寫困難、容量有限的問題,對js localstorage的使用相關(guān)知識感興趣的朋友一起學習吧2016-01-01
JS實現(xiàn)控制表格只顯示行邊框或者只顯示列邊框的方法
這篇文章主要介紹了JS實現(xiàn)控制表格只顯示行邊框或者只顯示列邊框的方法,涉及javascript使用表格對象的rules屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JavaScript 刪除或抽取字符串指定字符的方法(極為常用)
這篇文章主要給大家分享了極為常用的JavaScript 刪除或抽取字符串指定字符的所有方法,具有一定的參考價值,需要的小伙伴可以參考一下2021-12-12

