JS設計モードのアダプターモード

6237 ワード

javascript

アダプタモードは、既存のインターフェースと互換性のないクラスとインターフェースとの間で適応されます.別のオブジェクトを新しいコネクタで包装します.
アダプターは二つの異なるインターフェースを調整するために使用されます.見栄パターンとの違い:
外観パターンは簡単なインターフェースであり、コードとインターフェースだけが簡略化された役割を果たし、追加の選択は提供されない.
アダプターモードは一つのインターフェースを別のインターフェースに変換し、インターフェースを完全に保持し、インタフェースを簡単にしない必要があります.

var clientObject={
    string1:'foo',
	string2:'bar',
	string3:'baz'
};
function interfaceMethod(str1,str2,str3){
    ...
}

function clientToInterfaceAdapter(o){
    interfaceMethod(o.str1,o.str2,o.str3);
}
clientToInterfaceAdapter(clientObject);

clientObjectをパラメータとしてinterfaceMethodに渡すには、アダプターが必要です.
例:

function $(){
    var elements=[];
	for(var i=0;i

$関数のパラメータは1つ以上とすることができますが、get関数は1つしかなく、文字列、HTML要素、または文字列とHTML要素からなる配列とすることができます.この二つの方法は以下の通りです.

function $ToGet(){
	    return get(arguments);
	}
    function GetTo$(el){
	    return $.apply(window,el instanceof Array?el:[el]);
	}

例:電子メールAPIに適合する




function $(id){
    return typeof id == 'string'?document.getElementById(id):id;
}
function getElementsByClass(){
    var ele = [];
    function getClassElement(className,el){
	    var ob = [];
		el = el||document;
	    var nodes = el.getElementsByTagName('*');
        for(var i=0, len=nodes.length; i < len; i++){
		    if(nodes[i].className == className)
			    ob.push(nodes[i]);
		}
        return ob; 		
	}
    if(arguments.length == 1){
	    return getClassElement(arguments[0]);
	}else{
	    var prev = getClassElement(arguments[0]),next = [];
		for(var j = 0, length = prev.length; j < length; j++){
		    var r = getClassElement(arguments[1], prev[j]);
			next=next.concat(r);
		}
		return next;
	}
}
function addEvent(node, type, fn){
     if(node.addEventListener){
	    node.addEventListener(type, fn, false);
	 }else if(node.attachEvent){
	    node.attachEvent('on'+type,fn)
	 }else{
	    node['on'+type] = fn;
	 }
}
var DED = {};
DED.util = {
    substitute:function (s, o){
	    return s.replace(/{([^{}]*)}/g,function (a, b){
		    var r = o[b];
			return typeof r == 'string' ||typeof r == 'number' ? r : a;
		});
	},
	asyncRequest:(function(){
	    function handleReadyState(o, callback) {
		    var poll = window.setInterval(function(){
			    if(o&&o.readyState == 4){
				    window.clearInterval(poll);
					if(callback)
					    callback(o);
				}
			},50);
		}
		var getXHR = function(){
		    var http;
			try {
			    http = new XMLHttpRequest;
				getXHR = function(){
				    return new XMLHttpRequest;
				};
			}
			catch(e) {
			    var msxml = [
				    'MSXML2.XMLHTTP.3.0',
					'MSXML2.XMLHTTP',
					'Microsoft.XMLHTTP'
				];
				for(var i = 0, len = msxml.length; i < len; ++i){
				    try{
					    http = new ActiveXObject(msxml[i]);
						getXHR = function() {
						    return new ActiveXObject(msxml[i]);
						};
						break;
					}
					catch(e){}
				}
			}
			return http;
		};
		return function(method, uri, callback, postData){
		    var http = getXHR();
			http.open(method, uri, true);
			handleReadyState(http, callback);
			http.send(postData || null);
			return http;
		};
	})()	
};
var dedMail = (function(){
    function request(id, type, callback){
	    DED.util.asyncRequest(
		    'GET',
			'new/index',
			function(o) {
			    callback(o.responseText);
			}
		);
	}
	return {	
	    getMail: function(id, callback){
		    request(id, 'all', callback);
		},
		sendMail: function(body, recipient){
				
		},
		save: function(id) {
		
		},
		move: function(id, destination){
		
		},
		archive: function(id) {
		 
		},
		trash: function(id) {
		
		},
		reportSpam: function(id) {
		
		},
		formatMessage: function(e) {
		    var e = e || window.event;
			try {
			    e.preventDefault();
			}
			catch(ex) {
			    e.returnValue = false;
			}
			var targetEl = e.target || e.srcElement;
			var id = targetEl.id.toString().split('-')[1];
			dedMail.getMail(id, function(msgObject) {
			     var resp = eval('('+msgObject+')');
				 var details = '<p><strong>From:</strong>{from}<br>';
				 details += '<strong>Sent:</strong>{date}</p>';
				 details += '<p><strong>Message</strong><br>';
				 details += '{message}</p>';
				 $('message-pane').innerHTML = DED.util.substitute(details, resp);
			});
		}
	};
})();
addEvent(window, 'load', function(){
    var threads = getElementsByClass('thread', 'a');
	for(var i = 0, len=threads.length; i<len; i++){
	    addEvent(threads[i], 'click', dedMail.formatMessage);
	}
});
var fooMail = {}
//fooMail.getMail           ID                  
//function(text){ $('message-pane').innerHTML =text;}
var dedMailToFoolMail = {};
dedMailToFoolMail.getMail = function(id, callback){
    dedMail.getMail(id, function(msgObject) {
			     var resp = eval('('+msgObject+')');
				 var details = '<p><strong>From:</strong>{from}<br>';
				 details += '<strong>Sent:</strong>{date}</p>';
				 details += '<p><strong>Message</strong><br>';
				 details += '{message}</p>';
				 callback(DED.util.substitute(details, resp));
			});
};
fooMail = dedMailToFoolMail;
fooMail.getMail("a",function(text){$('message-pane').innerHTML=text;});


		Email Application Interface
		
			ロード
Message Sister Sonya
			ロード
Message Lindsey Simon
			ロード
Message Magaret Storart

この例は,インターフェースタイプが異なる場合,インターフェースの汎用性を達成することにより,コードの多重量を増加させることを明らかに示している.
アダプターは現在の条件の下で、フレームが次々と現れて、また統一していない情況の下で、大規模なコードを書き換えることを免れて、新しいインターフェイスで不適当なインターフェースを包装して、文法の違いを調整します.

JavaScriptのeval JSON oject問題