js---25桥模式
生活随笔
收集整理的這篇文章主要介紹了
js---25桥模式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
橋接模式是一種既能把兩個對象連接在一起,又能避免二者間的強耦合的方法。通過“橋”把彼此聯系起來,同時又允許他們各自獨立變化。
主要作用表現為將抽象與其實現隔離開來,以便二者獨立化。 <!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 src=../commons/CommonUtil.js ></script><script type=text/javascript charset=utf-8 src=../jquery/jquery-1.8.0.min.js ></script><script>// 橋接模式: 把2部分分離開來,使他們可以完全獨立使用,解耦,既能單獨變化又能組織在一起。//$( function(){} ) $函數執行,并傳入一個參數匿名function
$(function(){var inp = document.getElementById('inp');//在元素上注冊事件,inp.addEventListener(click,sendReq,false);
BH.EventUtil.addHandler(inp,'click',sendReq);//--------------------------------------------------// 后臺業務邏輯function sendReq(){// 處理 后臺的函數//$.post('URL',{msg:this.value},function(result){// CallBack....//});
alert('發送了指定的數據到后臺:' + this.value);}}); // 利用橋模式 分開倆個業務邏輯單元
$(function(){var inp = document.getElementById('inp');BH.EventUtil.addHandler(inp,'click',bridgeHadler);function bridgeHadler(){var msg = this.value;sendReq(msg);}function sendReq(msg){// 處理后臺的函數//$.post('URL',{msg:this.value},function(result){// CallBack....//});
alert('發送了指定的數據到后臺:' + msg);}//單元測試的時候,后臺可以直接做測試,不依賴于前臺的輸入,前面代碼強依賴于前臺的輸入才能執行測試,前后臺解耦。
sendReq('我也是數據..');}); </script></head><body><input id=inp type=button value="我是數據.." /></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>// 橋模式:var PublicClass = function(){var name = '張三';//private variable// getter 訪問私用成員變量 this.getName = function(){//原先變量只能在內部訪問,現在可以在外部訪問了,這就是橋模式return name ; };};var p1 = new PublicClass();alert(p1.getName());var PublicClass = function(){// 私用化的變量var privateMethod = function(){alert('執行了一個很復雜的操作...');};// 單元測試這個很復雜的函數//privateMethod();this.bridgeMethod = function(){return privateMethod();}};var p1 = new PublicClass();p1.bridgeMethod();// 橋模式: 使每個單元都能獨立運行,又能組織在一起var Class1 = function(a,b,c){this.a = a ; this.b = b ; this.c = c ;};var Class2 = function(d,e){this.d = d ; this.e = e ; };var BridgeCalss = function(a,b,c,d,e){this.class1 = new Class1(a,b,c);this.class2 = new Class2(d,e);};//橋模式,可以起到橋的作用就可以了。整體分開或者組合在一起。</script></head><body></body>
</html>
?
總結
以上是生活随笔為你收集整理的js---25桥模式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Powershell快速入门(二) Sh
- 下一篇: h5新增浏览器本地缓存localStor