js20---接口3種方式
阿新 • • 發佈：2017-05-19
nbsp title 一個數 失敗 檢測方法 led length bre cti
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type=text/javascript charset=utf-8> //javascript沒有定義接口的概念，我們通過模擬高級程序語言的方式來創建javascript中的接口。實現要重寫接口所有的方法。 /* javascript定義接口有三種方式 1 註釋描述接口 2 屬性檢測接口 3 鴨式辯型接口 */ // 1 註解描述的方式（註釋方式，假的） /** interface Composite { function add(obj); function remove(obj); function uopdate(obj); } var CompositeImpl = function(){ this.add = function(){}, this.remove = function(){}, this.upload = function(){} }; var c1 = new CompositeImpl(); var c2 = new CompositeImpl(); alert(c1.add == c2.add); //false,每次都有一個add,所以寫到原型裏面*/ // CompositeImpl implements Composite var CompositeImpl = function(){ }; CompositeImpl.prototype.add = function(obj){ } CompositeImpl.prototype.remove = function(obj){ } CompositeImpl.prototype.update = function(obj){ } var c1 = new CompositeImpl(); var c2 = new CompositeImpl(); alert(c1.add == c2.add); </script> </head> <body> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type=text/javascript charset=utf-8> // 第二種實現接口的方式 屬性檢測的方式（繼承接口，就要實現所有方法。） /** * interface Composite { * function add(obj); * function remove(obj); * function uopdate(obj); * } * * interface FormItem { * function select(obj); * } * */ // CompositeImpl implements Composite , FormItem var CompositeImpl = function(){ // 顯示的再類的內部 接受所實現的接口 // 一般來說是一個規範 我們項目經理:在類的內部定義一個數組(名字要固定) this.implementsInterfaces = [‘Composite‘ ,‘FormItem‘ ];//this是這個類的當前對象 } CompositeImpl.prototype.add = function(obj){ alert(‘add...‘); } CompositeImpl.prototype.remove = function(obj){ } CompositeImpl.prototype.update = function(obj){ } CompositeImpl.prototype.select = function(obj){ } // 檢測CompositeImpl類的對象的 function CheckCompositeImpl(instance){ //判斷當前對象是否實現了所有的接口 if(!IsImplements(instance,‘Composite‘,‘FormItem‘)){ throw new Error(‘Object does not implement a required interface!‘); } } function IsImplements(object){//實參多個，形參一個，這個形參就是實參的第一個， // arguments 對象 獲得函數的實際參數 for(var i = 1 ; i < arguments.length;i++){ //接受所實現的每一個接口的名字 var interfaceName = arguments[i];//arguments[i]在不在object.implementsInterfaces裏面 var interfaceFound = false ; for(var j = 0 ; j <object.implementsInterfaces.length;j++){ if(object.implementsInterfaces[j] == interfaceName) { interfaceFound = true ; break;//跳出for循環 } } if(!interfaceFound){ return false ; } } return true ; } var c1 = new CompositeImpl(); CheckCompositeImpl(c1); c1.add(); </script> </head> <body> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type=text/javascript charset=utf-8> // 實現接口的第三種方式：鴨式辨型法實現接口(最完美的javascript實現接口方式) // 鴨式辨型法實現的核心：一個類實現接口的主要目的：把接口裏的方法都實現（檢測方法） // 完全面向對象 代碼也實現統一 也解耦了 // 一： 接口類 Class Interface ==>實例化N多個接口 /** * 接口類需要2個參數 * 參數1: 接口的名字 (string) * 參數2: 接受方法名稱的集合(數組) (array) */ var Interface = function(name,methods){ //判斷接口的參數個數 if(arguments.length != 2){ throw new Error(‘this instance interface constructor arguments must be 2 length!‘); } this.name = name ; this.methods = [] ; //定義一個內置的空數組對象 等待接受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]); } } // 1 實例化接口對象 var CompositeInterface = new Interface(‘CompositeInterface‘ , [‘add‘ , ‘remove‘]);//CompositeInterface對象有屬性name為CompositeInterface，數組[‘add‘ , ‘remove‘] var FormItemInterface = new Interface(‘FormItemInterface‘ , [‘update‘,‘select‘]); // CompositeImpl implements CompositeInterface , FormItemInterface var CompositeImpl = function(){ } // 3 實現接口的方法implements methods CompositeImpl.prototype.add = function(obj){ alert(‘add‘); } CompositeImpl.prototype.remove = function(obj){ alert(‘remove‘); } CompositeImpl.prototype.update = function(obj){ alert(‘update‘); } /* CompositeImpl.prototype.select = function(obj){ alert(‘select‘); } */ // 三：檢驗接口裏的方法 Interface.ensureImplements = function(object){ // 如果檢測方法接受的參數小於2個 參數傳遞失敗! if(arguments.length < 2 ){ throw new Error(‘Interface.ensureImplements method constructor arguments must be >= 2!‘); } for(var i = 1 , len = arguments.length; i<len; 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 name ‘" + methodName + "‘ is not found !"); } } } } var c1 = new CompositeImpl(); Interface.ensureImplements(c1,CompositeInterface,FormItemInterface); c1.add(); </script> </head> <body> </body> </html>
var CompositeImpl = function(){}
CompositeImpl.prototype.add = function(obj){
alert(‘add‘);
}
var c1 = new CompositeImpl();
alert(c1[‘add‘]);//function(obj){alert(‘add‘);}
alert(c1[‘ssadd‘]);//undefined
alert(c1[‘sss‘]);//undefined,
alert(c1.ssadd());//ssadd is not a function
alert(c1.sss);//undefined, 沒有屬性,方法，通過中括號返回未定義，就是假
c1[‘add‘];//什麽都沒有
alert(typeof c1[‘add‘]);//function
if( !c1[methodName] || typeof c1[methodName] !== ‘function‘ ){
throw new Error("the method name ‘" + methodName + "‘ is not found !");
}// c1[methodName]有可能是一個屬性，不是方法。 !==
// 判斷對象是不是一個類的實例，判斷對象的構造器是不是類名字
instanceInterface.constructor !== Interface
js20---接口3種方式