適配器模式
適配器模式的應用
level01:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var googleMap = {
show: function(){
console.log( '開始渲染谷歌地圖' );
}
};
var baiduMap = {
show: function(){
console.log( '開始渲染百度地圖' );
}
};
var renderMap = function( map ){
if ( map.show instanceof Function ){
map.show();
}
};
renderMap( googleMap ); // 輸出：開始渲染谷歌地圖
renderMap( baiduMap ); // 輸出：開始渲染百度地圖
</script>
</body>
</html>level02:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var googleMap = {
show: function(){
console.log( '開始渲染谷歌地圖' );
}
};
var baiduMap = {
display: function(){
console.log( '開始渲染百度地圖' );
}
};
var renderMap = function( map ){
if ( map.show instanceof Function ){
map.show();
}
};
var baiduMapAdapter = {
show: function(){
return baiduMap.display();
}
};
renderMap( googleMap ); // 輸出：開始渲染谷歌地圖
renderMap( baiduMapAdapter ); // 輸出：開始渲染百度地圖
</script>
</body>
</html>level03:
數據結構和城市數量有變化->新增一個數據格式轉換的適配器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var getGuangdongCity = function(){
var guangdongCity = [
{
name: 'shenzhen',
id: 11,
}, {
name: 'guangzhou',
id: 12,
}
];
return guangdongCity;
};
var render = function( fn ){
console.log( '開始渲染廣東省地圖' );
document.write( JSON.stringify( fn() ) );
};
render( getGuangdongCity );
</script>
</body>
</html>level04:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*var guangdongCity = {//新的
shenzhen: 11,
guangzhou: 12,
zhuhai: 13
};*/
var getGuangdongCity = function(){
var guangdongCity = [//舊的
{
name: 'shenzhen',
id: 11,
}, {
name: 'guangzhou',
id: 12,
}
];
return guangdongCity;
};
var render = function( fn ){
console.log( '開始渲染廣東省地圖' );
document.write( JSON.stringify( fn() ) );
};
var addressAdapter = function( oldAddressfn ){
var address = {},
oldAddress = oldAddressfn();
for ( var i = 0, c; c = oldAddress[ i++ ]; ){
address[ c.name ] = c.id;
}
return function(){
return address;
}
};
render( addressAdapter( getGuangdongCity ) );
</script>
</body>
</html>小結
適配器模式是一對相對簡單的模式。在本書提到的設計模式中,有一些模式跟適配器模式的結構非常相似，比如裝飾者模式、代理模式和外觀模式。這幾種模式都屬於“包裝模式”，都是由一個對象來包裝另一個對象。區別它們的關鍵仍然是模式的意圖。
適配器模式主要用來解決兩個已有接口之間不匹配的問題，它不考慮這些接口是怎樣實現的，也不考慮它們將來可能會如何演化。適配器模式不需要改變已有的接口，就能夠使它們協同作用。
裝飾者模式和代理模式也不會改變原有對象的接口，但裝飾者模式的作用是爲了給對象增加功能。裝飾者模式常常形成一條長的裝飾鏈，而適配器模式通常只包裝一次。代理
模式是爲了控制對對象的訪問，通常也只包裝一次。
外觀模式的作用倒是和適配器比較相似，有人把外觀模式看成一組對象的適配器，但外觀模式最顯著的特點是定義了一個新的接口。