歡迎您光臨本站 註冊首頁

JavaScript 接口原理與用法實例詳解

←手機掃碼閱讀     sl_ivan @ 2020-05-13 , reply:0

本文實例講述了JavaScript 接口原理與用法。分享給大家供大家參考,具體如下:
js接口
意義:
提供一種以說明一個對象應該有哪些方法的手段。
接口是面向對象javascript程序員的工具箱中最有用的工具之一
接口的利弊:
對於一些中小型程序來說 使用接口很顯然是不明智的,對項目來說接口的好處也不明顯,只是徒增其複雜度而已。
對於接口的好處,那麼顯而易見 首先促進代碼的重用,對於開發來講,還可以告訴程序員那些類都使用了什麼方法,如果你事先知道接口那麼就減少了你在編碼的時候對類與類之間衝突,實現解耦。對於測試和調試也會變得輕鬆,用於javascript的弱類型語言,類型不匹配經常出現,那麼使用接口,這一點會變得容易一些。
註釋接口描述
優點:程序員可以有一個參考
缺點:屬於文檔的範疇 ,這種方式過於鬆散, 沒有檢查接口的方法是否完全被實現
interface Composite{ function add (obj) ; function remove (obj) ; function update ( obj ) ; } //CompositeImp1 implements Composite var CompositeImp1 = function () { } CompositeImp1.prototype.remove = function ( obj ) { } CompositeImp1.prototype.update = function ( obj ) { } CompositeImp1.prototype.add = function (obj) { } var c1 = new CompositeImp1();
屬性檢測
判斷接口是否存在
/*interface Composite{ function add (obj) ; function remove (obj) ; function update ( obj ) ; } interface FormItem { function select (obj) ; } */ //CompositeImp1 implements Composite , FormItem var CompositeImpl = function () { //顯式在類的內部, 接受所實現的接口 //一般來說, 在類的內部,定義一個數組(數組變量名字固定) this.implementsInterfaces = ['Composite', 'FormItem']; //利用 implementsInterfaces 後續的判斷使用 } CompositeImpl.prototype.remove = function ( obj ) { // do something ... } CompositeImpl.prototype.update = function ( obj ) { } CompositeImpl.prototype.add = function (obj) { alert('add'); } CompositeImpl.prototype.select = function (obj) { } //檢測 CompositeImpl 類 的對象 function CheckCompositeImpl ( instance ) {//實例對象作為參數,檢測是否存在 //判斷當前對象是否實現了所有的接口。 if ( !IsImplements(instance,'Composite','FormItem') ) { throw new Error('Object does not implement a requried interface'); } } //公用的具體的檢測方法(核心方法) //return boolean function IsImplements ( obj ) { //判斷實例對象,有沒有實現相關的接口. //arguments 對象 獲得函數的實際參數 for ( var i=1; i<arguments.length; i++ ) { //接收所實現接口的名字 var interfaceName = arguments[i]; //判斷此方法, 是 成功,還是失敗。 var interfaceFound = false; for ( var j=0; j<obj.implementsInterfaces.length; j++ ) { if ( obj.implementsInterfaces[j] == interfaceName ) { interfaceFound = true; break; } } if ( !interfaceFound ) { return false; } } return true; }
鴨式辯型法
核心: 一個類實現接口的主要目的:把接口裡的方法都實現。(檢測實現方法)
完全面向對象,代碼實現統一, 也解耦
//1 ,接口類。 //定義一個類,作為藉口的基類,通過類實例化N多個接口實例。// Class Interface 接口類所需要的2個參數 參數1:接口的名字 (string) 參數2:接收方法名稱的集合 methods, 是一個數組 (array) //實現抽象方法 var Interface=function( name,methods ){ //methods 的名字必須是String類型的可以. if( arguments.length != 2 ){ throw new Error('the instance Interface constructor arguments must be 2 length!'); }; this.name=name; this.methods=[]; //定義一個內置的空數組對象,等待接受methods裡的元素 (方法名字); for( var i=0; i<methods.length; ++i ){ if( typeof methods[i] !== 'string' ){ throw new Error('ths Interface method name is error'); }; this.methods.push( methods[i] ); }; }; //2 準備工作: 具體的實現類 //①實例化接口對象. var CompositeInterface=new Interface('CompositeInteface',['add','remove']); var FormIntemInterface=new Interface('FormIntemInterface',['update','select']); //CompositeImpl implements CompositeInterface,FormIntemInterface. //②具體的實現類 var CompositeImpl=function(){ } //③實現接口的方法 //implements methods CompositeImpl.prototype.add=function(){ alert('add'); } CompositeImpl.prototype.remove=function(){ alert('remove'); } CompositeImpl.prototype.update=function(){} // CompositeImpl.prototype.select=function(){} //3: 檢驗接口裡的方法. //檢驗通過, 不做任何操作, 代碼繼續執行. 不通過,拋出異常, Error. //這個方法的目的,就是檢測方法的 . Interface.ensureImplements=function( obj ){ //核心檢驗方法. if( arguments.length < 2 ){ //如果檢測的方法接受的參數小於2個, 參數傳遞失敗. throw new Error('Interface.ensureImplements 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]; //object[key]; if( !obj[methodName] || typeof obj[methodName] !== 'function' ){ //對象沒有這個方法. throw new Error('the method name "' + methodName + '" is not found!'); }; }; } } var c1=new CompositeImpl(); Interface.ensureImplements( c1,CompositeInterface,FormIntemInterface ); c1.add();
總結:接口是實現解耦。避免類和類之間,調用方法的衝突。


[sl_ivan ] JavaScript 接口原理與用法實例詳解已經有265次圍觀

http://coctec.com/docs/javascript/show-post-234300.html