JavaScript 接口原理與用法實(shí)例詳解
本文實(shí)例講述了JavaScript 接口原理與用法。分享給大家供大家參考,具體如下:
js接口
意義:
提供一種以說(shuō)明一個(gè)對(duì)象應(yīng)該有哪些方法的手段。
接口是面向?qū)ο骿avascript程序員的工具箱中最有用的工具之一
接口的利弊:
-
對(duì)于一些中小型程序來(lái)說(shuō) 使用接口很顯然是不明智的,對(duì)項(xiàng)目來(lái)說(shuō)接口的好處也不明顯,只是徒增其復(fù)雜度而已。
-
對(duì)于接口的好處,那么顯而易見(jiàn) 首先促進(jìn)代碼的重用,對(duì)于開(kāi)發(fā)來(lái)講,還可以告訴程序員那些類(lèi)都使用了什么方法,如果你事先知道接口那么就減少了你在編碼的時(shí)候?qū)︻?lèi)與類(lèi)之間沖突,實(shí)現(xiàn)解耦。對(duì)于測(cè)試和調(diào)試也會(huì)變得輕松,用于javascript的弱類(lèi)型語(yǔ)言,類(lèi)型不匹配經(jīng)常出現(xiàn),那么使用接口,這一點(diǎn)會(huì)變得容易一些。
注釋接口描述
優(yōu)點(diǎn):程序員可以有一個(gè)參考
缺點(diǎn):屬于文檔的范疇 ,這種方式過(guò)于松散, 沒(méi)有檢查接口的方法是否完全被實(shí)現(xiàn)
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();
屬性檢測(cè)
判斷接口是否存在
/*interface Composite{ function add (obj) ; function remove (obj) ; function update ( obj ) ; } interface FormItem { function select (obj) ; } */ //CompositeImp1 implements Composite , FormItem var CompositeImpl = function () { //顯式在類(lèi)的內(nèi)部, 接受所實(shí)現(xiàn)的接口 //一般來(lái)說(shuō), 在類(lèi)的內(nèi)部,定義一個(gè)數(shù)組(數(shù)組變量名字固定) this.implementsInterfaces = ['Composite', 'FormItem']; //利用 implementsInterfaces 后續(xù)的判斷使用 } CompositeImpl.prototype.remove = function ( obj ) { // do something ... } CompositeImpl.prototype.update = function ( obj ) { } CompositeImpl.prototype.add = function (obj) { alert('add'); } CompositeImpl.prototype.select = function (obj) { } //檢測(cè) CompositeImpl 類(lèi) 的對(duì)象 function CheckCompositeImpl ( instance ) {//實(shí)例對(duì)象作為參數(shù),檢測(cè)是否存在 //判斷當(dāng)前對(duì)象是否實(shí)現(xiàn)了所有的接口。 if ( !IsImplements(instance,'Composite','FormItem') ) { throw new Error('Object does not implement a requried interface'); } } //公用的具體的檢測(cè)方法(核心方法) //return boolean function IsImplements ( obj ) { //判斷實(shí)例對(duì)象,有沒(méi)有實(shí)現(xiàn)相關(guān)的接口. //arguments 對(duì)象 獲得函數(shù)的實(shí)際參數(shù) for ( var i=1; i<arguments.length; i++ ) { //接收所實(shí)現(xiàn)接口的名字 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; }
鴨式辯型法
核心: 一個(gè)類(lèi)實(shí)現(xiàn)接口的主要目的:把接口里的方法都實(shí)現(xiàn)。(檢測(cè)實(shí)現(xiàn)方法)
完全面向?qū)ο?,代碼實(shí)現(xiàn)統(tǒng)一, 也解耦
//1 ,接口類(lèi)。 //定義一個(gè)類(lèi),作為借口的基類(lèi),通過(guò)類(lèi)實(shí)例化N多個(gè)接口實(shí)例。// Class Interface 接口類(lèi)所需要的2個(gè)參數(shù) 參數(shù)1:接口的名字 (string) 參數(shù)2:接收方法名稱(chēng)的集合 methods, 是一個(gè)數(shù)組 (array) //實(shí)現(xiàn)抽象方法 var Interface=function( name,methods ){ //methods 的名字必須是String類(lèi)型的可以. if( arguments.length != 2 ){ throw new Error('the instance Interface constructor arguments must be 2 length!'); }; this.name=name; this.methods=[]; //定義一個(gè)內(nèi)置的空數(shù)組對(duì)象,等待接受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 準(zhǔn)備工作: 具體的實(shí)現(xiàn)類(lèi) //①實(shí)例化接口對(duì)象. var CompositeInterface=new Interface('CompositeInteface',['add','remove']); var FormIntemInterface=new Interface('FormIntemInterface',['update','select']); //CompositeImpl implements CompositeInterface,FormIntemInterface. //②具體的實(shí)現(xiàn)類(lèi) var CompositeImpl=function(){ } //③實(shí)現(xiàn)接口的方法 //implements methods CompositeImpl.prototype.add=function(){ alert('add'); } CompositeImpl.prototype.remove=function(){ alert('remove'); } CompositeImpl.prototype.update=function(){} // CompositeImpl.prototype.select=function(){} //3: 檢驗(yàn)接口里的方法. //檢驗(yàn)通過(guò), 不做任何操作, 代碼繼續(xù)執(zhí)行. 不通過(guò),拋出異常, Error. //這個(gè)方法的目的,就是檢測(cè)方法的 . Interface.ensureImplements=function( obj ){ //核心檢驗(yàn)方法. if( arguments.length < 2 ){ //如果檢測(cè)的方法接受的參數(shù)小于2個(gè), 參數(shù)傳遞失敗. throw new Error('Interface.ensureImplements method constructor arguments must be >= 2!'); }; //獲得接口實(shí)例對(duì)象,通過(guò)接口實(shí)例對(duì)象, 得到接口實(shí)例對(duì)象里的方法. for( var i=1; i<arguments.length; ++i ){ var instanceInterface=arguments[i]; //判斷參數(shù) 是否是接口類(lèi)的 類(lèi)型. 是否是 接口類(lèi)的構(gòu)造函數(shù). if( instanceInterface.constructor != Interface ){ throw new Error('the arguments constructor not be Interface Class'); }; //循環(huán)接口實(shí)例對(duì)象的每一個(gè)方法 . for( var j=0; j<instanceInterface.methods.length; ++j ){ //用一個(gè)臨時(shí)變量接收每一個(gè)方法的名字,注意是字符,并不是函數(shù). var methodName=instanceInterface.methods[j]; //object[key]; if( !obj[methodName] || typeof obj[methodName] !== 'function' ){ //對(duì)象沒(méi)有這個(gè)方法. throw new Error('the method name "' + methodName + '" is not found!'); }; }; } } var c1=new CompositeImpl(); Interface.ensureImplements( c1,CompositeInterface,FormIntemInterface ); c1.add();
總結(jié):接口是實(shí)現(xiàn)解耦。避免類(lèi)和類(lèi)之間,調(diào)用方法的沖突。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript單線程和任務(wù)隊(duì)列原理解析
這篇文章主要介紹了JavaScript單線程和任務(wù)隊(duì)列原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02利用404錯(cuò)誤頁(yè)面實(shí)現(xiàn)UrlRewrite的實(shí)現(xiàn)代碼
要求:網(wǎng)站編碼為utf-8,不適用于GB2312; 替換字符的正則可以自己增加和修改,以適合自己的網(wǎng)站;2008-08-08JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之?dāng)?shù)組的表示方法,從數(shù)據(jù)結(jié)構(gòu)線性表的角度分析了數(shù)組的原理并結(jié)合實(shí)例形式分析了javascript數(shù)組的定義與使用方法,需要的朋友可以參考下2017-04-04javascript function、指針及內(nèi)置對(duì)象
該文摘自于匿名教程總結(jié),希望對(duì)初學(xué)js的同學(xué)有幫助,因?yàn)樗鉀Q了我學(xué)習(xí)js的眾多迷惑。。。2009-02-02JavaScript?Canvas實(shí)現(xiàn)圖片局部放大鏡效果
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript?Canvas實(shí)現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03JavaScript正則表達(dá)式驗(yàn)證登錄實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript正則表達(dá)式驗(yàn)證登錄實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互
這篇文章主要介紹了用JavaScript腳本實(shí)現(xiàn)Web頁(yè)面信息交互2006-10-10JavaScript Window 打開(kāi)新窗口(window.location.href、windo
本文主要介紹了JavaScript Window 打開(kāi)新窗口的三種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05