js設計模式
阿新 • • 發佈：2017-07-02
實現 方式 script 實現接口 復雜 java sta 告訴 參考
1.接口
-接口是面向對象javaScript程序員工具箱中最有用的工具之一，那麽對於javaScript沒有定義接口的概念，
我們通過模擬高級程序語言的方式來創建javaScript中的接口。
-接口的概念：提供一種以說明一個對象應該有哪些方法的手段。
-通常建立javaScript接口的三種方式：
-1.註釋描述接口
<script type="text/javascript" charset="utf-8">
// javaScript中，定義接口有三種方式
// 1.註解描述(特點，1.程序員可以有一個參考，2缺點是還是屬於文檔範疇,3如果程序員忘記了定義方法，不會出錯。)
-2.屬性檢測接口
<script type="text/javascript" charset="utf-8">
// 2.屬性檢測
/**
* interface Composite {
*
* function add();
* function remove();
* function update();
* }
*
* interface FormItem {
* function select(obj);
* }
*/
// CompositImpl implements Coposite 和 FormItem
var CompositImpl = function (){
// 顯示的在類的內部接受所實現的接口
// 一般來講 在類的內部定義一個變量，名字要固定。這是一個規範
this.implemtnsInterface = [‘Comosite‘,‘FormItem‘];
};
CompositeImpl.prototype.add = function(obj) {
// do something
alert(‘add‘);
};
CompositeImpl.prototype.remove = function(obj) {
// do something
alert(‘remove‘);
};
CompositeImpl.prototype.update = function(obj) {
// do something
alert(‘update‘);
};
CompositeImpl.prototype.select = function(obj) {
// do something
alert(‘select‘);
};
// 定義一個方法去檢測 類是否實現了所有的接口
function checkCompositImpl() {
// 判斷當前對象是否實現了所有接口
if(!IsImplments(instance, ‘Composite‘, ‘FormItem‘)) {
throw new Error(‘Object does not implement a required interface‘);
}
}
// 判斷當前對象是否實現了所有接口
// 這個方法的主要目的就是判斷 實例對象有沒有實現相關的接口
function IsImplments(Object) {
//arguments 獲得實際參數
for (var i = 1; i < arguments.length; i++) {
// 接受所實現的每一個接口的名字
var interfaceNmae = arguments[i];
var interfaceFound = false;
for (var g = 0; g < Object.implemtnsInterface.length; g++) {
if (Object.implemtnsInterface[g] == interfaceName) {
interfaceFound = true;
break;
}
}
if (!iterfaceName) {
return false;
}
}
return true;
}
</script>
-3.鴨式辨型接口
<script type="text/javascript" charset="utf-8">
// 3.鴨式辨型(最完美的實現接口的方式)
// 核心：一個類實現接口的主要目的就是將接口中的方法全部實現。(檢測方法)
// 優點：完全面向對象，代碼也實現統一，也實現了解耦
// 1.接口類 Class Interface ==> 實例化N多個接口
/*
* 接口類需要兩個參數
* 1.接口的名字
* 2.接受方法名稱的數組
*/
var Interface = function(name, methods) {
// 1.判斷接口的參數個數
if(arguments.length != 2) {
throw new Error(‘this instance interface constructor must be 2 length‘);
}
this.name = name;
// 定義一個內置空數組，等待接受methods裏面的元素
this.methods = [];
for (var i = 0, len = methods.length; i < len; i++) {
if(typeof methods[i] !== ‘string‘) {
throw new Error(‘the interface method name is error!‘);
}
this.methods.push(methods[i]);
}
};
// 2.準備工作：具體的實現類
// 實例化接口對象
var CompositeInterFace = new Interface(‘CompositeInterFace‘, [‘add‘, ‘remove‘]);
var FormItemInterFace = new Interface(‘FormItemInterFace‘, ‘update‘, ‘select‘);
// CompositImpl 實現了CompositeInterFace和FormItemInterFace
var CompositImpl = function() {
};
CompositeImpl.prototype.add = function(obj) {
// do something
alert(‘add‘);
};
CompositeImpl.prototype.remove = function(obj) {
// do something
alert(‘remove‘);
};
CompositeImpl.prototype.update = function(obj) {
// do something
alert(‘update‘);
};
CompositeImpl.prototype.select = function(obj) {
// do something
alert(‘select‘);
};
// 3.檢驗接口裏的方法
// 如果檢驗通過，不做任何處理。如果沒有通過，則瀏覽器拋出異常
// 這個方法的目的就是檢測方法的
Interface.ensureImplments = function(Object) {
if(arguments.length < 2) {
throw new Error(‘Interface.ensureImplments method constructor arguments must be >= 2‘);
}
// 獲得接口實例對象
for (var i = 1; i < arguments.length; i++) {
var instanceInterface = arguments[i];
// 判斷參數是否是接口類的類型
if (instanceInterface.constructor !== interface) {
throw new Error(‘the arguments constructor not be Interface class!‘);
}
// 循環接口實例對象中的每一個方法
for (var j = 0; j < instanceInterface.methods.length; j++) {
// 用一個臨時變量接受每一個方法的名字(字符串)
var methodName = instanceInterface.methods[j];
if(!Object[methodName] || typeof Object[methodName] != ‘function‘) {
throw new Error(‘the method is not found‘);
}
}
}
};
var c1 = new ComopsitImpl();
Interface.ensureImplments(c1, CompositeInterFace, FormItemInterFace);
</script>
-接口的利弊：
-對於一些中小程序來說，使用接口顯然是不明智的，對於項目來說接口的好處不明顯，只是徒增復雜度。
-對於接口的好處，首先增進了代碼的重用，對於開發來講，還可以告訴程序員哪些類都使用了哪些方法，
如果你事先知道接口，那麽就減少了你在編碼的時候對類與類之間沖突，實現解耦。對於測試和調試也變得輕松。
對於javaScript的弱類型語言，類型不匹配很常見，使用接口會變得容易一些。
js設計模式