Android web桥接,桥接（bridge）形式

桥接(bridge)模式

3桥接(bridge)模式

asdasf

点击开始加载ajax

/*

* 桥梁模式可以用来弱化它与使用它的类和对象之间的耦合，就是将抽象与其实现隔离开来，以便二者独立变化；

* 这种模式对于JavaScript中常见的时间驱动的编程有很大益处，桥梁模式最常见和实际的应用场合之一是时间监听器回调函数。先分析一个不好的示例：

*/

var element = document.getElementById('div1');

element.onclick = function(){

new setLogFunc();

}

/*

* 为什么说这个示例不好，因为从这段代码中无法看出那个LogFunc方法要显示在什么地方，它有什么可配置的选项以及应该怎么去修改它。

* 换一种说法就是，桥梁模式的要诀就是让接口“可桥梁”，实际上也就是可配置。把页面中一个个功能都想象成模块，接口可以使得模块之间的耦合降低。

* 掌握桥梁模式的正确使用收益的不只是你，还有那些负责维护你代码的人。把抽象于其实现隔离开，可独立地管理软件的各个部分，bug也因此更容易查找。

* 桥梁模式目的就是让API更加健壮，提高组件的模块化程度，促成更简洁的实现，并提高抽象的灵活性。一个好的示例：

*/

element.onclick = function(){　　//API可控制性提高了，使得这个API更加健壮

new someFunction(element,param,callback);

}

/*

* 注：桥梁模式还可以用于连接公开的API代码和私有的实现代码，还可以把多个类连接在一起。

* 在文章封装介绍的部分提到过特权方法，也是桥梁模式的一种特例。《JS设计模式》上找的示例，加深大家对这个模式的理解：

* 1 　　//错误的方式

2 　　//这个API根据事件监听器回调函数的工作机制，事件对象被作为参数传递给这个函数。本例中并没有使用这个参数，而只是从this对象获取ID。

3 　　addEvent(element,'click',getBeerById);

4 　　function getBeerById(e){

5 　　var id = this.id;

6 　　asyncRequest('GET','beer.url?id=' + id,function(resp){

7 　　//Callback response

8 　　 console.log('Requested Beer: ' + resp.responseText);

9 　　});

10 　}

*/

//补全stz+：

var XMLHttpFactory = function(){};

XMLHttpFactory.prototype = {

createFactory:function(){

throw new Error('This is an abstract class');

}

}

var XHRHandler = function(){

XMLHttpFactory.call(this);

}

XHRHandler.prototype = new XMLHttpFactory();

XHRHandler.prototype.constructor = XHRHandler;

XHRHandler.prototype.createFactory = function(){

var XMLHttp = null;

if (window.XMLHttpRequest){

XMLHttp = new XMLHttpRequest();

}else if (window.ActiveXObject){

XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

return XMLHttp;

}

XHRHandler.prototype.successful = function(req){

if(req.readystate==4){//请求状态为4表示成功

if(req.status == 200)//http状态200表示OK

{

alert("返回成功： "+req.statusText);

Dispaly();

handle(req);

//所有状态成功，执行此函数，显示数据

} else //http返回状态失败

{

alert("服务端返回状态" + req.statusText);

}

}

else //请求状态还没有成功，页面等待

{

document.getElementById("myTime").innerHTML ="数据加载中";

}

}

var asyncRequest = function(method, url, callback) {

var insXHRHandler = new XHRHandler();

var req = new XMLHttpRequest(); //insXHRHandler.createFactory();

req.open(method, url+ '&_dc=' + new Date().getTime(), true); // + '&_dc=' + new Date().getTime():去ajax缓存

req.onreadystatechange = function(){

if(req.readyState==4){//请求状态为4表示成功 // 居然错在 readyState。 s是大写！！！！！！！！

if(req.status == 200)//http状态200表示OK

{

//alert("返回成功： "+req.statusText);

Dispaly(req);

callback(req.responseText);

console.log("返回成功： "+req.responseText);

console.log("eval(req.responseText).responseText1： "+ eval(req.responseText).responseText1);

//所有状态成功，执行此函数，显示数据

} else //http返回状态失败

{

alert("服务端返回状态" + req.statusText);

}

}

else //请求状态还没有成功，页面等待

{

document.getElementById("myTime").innerHTML ="数据加载中";

}

}

req.send(null); //发送请求

}

function Dispaly(req) //接受服务端返回的数据，对其进行显示

{

document.getElementById("myTime").innerHTML = req.responseText;

}

var addEvent = function(el,method,handle,bubble){

if(el.addEvent){

el.addEvent('on'+method, handle);

}else{

el.addEventListener(method, handle, !bubble?false:true);

}

}

//好的方式

//从逻辑上分析，把id传给getBeerById函数式合情理的，且回应结果总是通过一个回调函数返回。这么理解，我们现在做的是针对接口而不是实现进行编程，用桥梁模式把抽象隔离开来。

// var xhr = new Ajax('response.js', 'GET', '', function(resp) {

// document.getElementById('myTime').innerHTML = eval(resp).responseText1; //typeof(eval(resp));

// });

// xhr.callServer();

function getBeerById(id,callback){

asyncRequest('GET','http://localhost:8082/jsTest2/designMode/response.js?id=' + id,function(resp1){

console.log('resp1 in getBeerById: ' + resp1);

callback(resp1);

});

}

addEvent(document.getElementById('myTime'),'click',getBeerByIdBridge);

function getBeerByIdBridge(e){

getBeerById(this.id,function(beer){

console.log('Requested Beer: ' + beer);

console.log('Requested Beer2: ' + eval(beer).responseText1);

});

}

/*

* 自己总结： getBeerByIdBridge就是接口，通过这个接口作为桥梁，调用真正的实现：getBeerById

* 且传入回调函数，这函数还有个特点：参数就是真正实现函数里的返回结果的一个封装resp.responseText

* 不难看出 asyncRequest也是个真正的实现函数，这时getBeerById就是桥了。。。桥接。

* 为了补全上面的例子：补全stz+：

*/

//

response.js:

({responseText1:"测试1234adwf........."})

参考：

http://download.csdn.net/detail/nanlinfeixue/4203989#comment

http://blog.csdn.net/andy_sue/article/details/6739068

http://blog.csdn.net/sunxing007/article/category/534077

计划修改：

ajax改成jsonp跨域的。