資訊專欄INFORMATION COLUMN
摘要：適配器模式的一大特點就是庫多，更新快現(xiàn)在前端程序猿使用上了之后，哪個不是了十幾個包就得，個吧，針對這個背景，適配器模式對于來說就特別重要為甚么怎么說呢之前公司用了自己寫的操作庫，后來吊炸天，性能好的一比，那我們現(xiàn)在想要使用的話，但是已經(jīng)有很
適配器模式
JavaScript的一大特點就是庫多，更新快！現(xiàn)在前端程序猿使用上了npm之后，哪個不是install了十幾個包（devDependencies就得5，6個吧，grunt/gulp）.
針對這個背景，適配器模式對于JSer來說就特別重要！為甚么怎么說呢？之前公司用了自己寫的DOM操作庫，后來JQuery吊炸天，性能好的一比，那我們現(xiàn)在想要使用JQuery的話，但是已經(jīng)有很多程序都基于原來的庫了，那寫個適配器吧！
更重要的是js的庫一般火了之后，更新特別快，有時候難免api就會改動，所以在使用較新的庫時，你最好寫個適配器，你的代碼基于自己的api，如果后面庫更新的話，你只需要修改適配器就可以了。這種還有一個好處，就是通過適配器，更改某些api的默認設(shè)置，以后更新庫，也不會影響！反正一句話：適配器算是前端開發(fā)比較常用的吧！
寫個適配器原來公司用的DOM操作庫A
A(function(){
A("button").on("click",function(e){
...
});
});
Boss說引入JQuery,我試著寫了下面的代碼
window.A = A = jQuery;
居然大部分代碼能正常運行，好吧！這個例子告訴我們適配器寫的不要太離譜，名稱和調(diào)用方式盡量要和目標庫相同，不是方便很多嗎？新人也容易上手，適配器更改也方便！
異類框架的適配上面的例子是我意淫的！事實上公司的框架是這樣
A = (function(){
var version = "v2.2.12";
function select(id){
return document.getElementById(id);
}
funcion on(id,type,fn){
var dom = typeof id==="string"?this.select(id):id;
if(dom.addEventListener({
dom.addEventListener(type,fn,false);
}
else if(dom.attachEvent){
dom.attachEvent("on"+type,fn);
}
else
{
dom["on"+type] = fn;
}
}
return {
select:select,
on:on,
version:version
}
})();
好吧，這個差別很大吧？其實也不難，因為邏輯操作是相似的，只是api名字不同，參數(shù)不同而已！這個例子告訴我們，即使api無法設(shè)計一致，但邏輯不要太奇葩！
A = (function(){
return{
select:function(id){
return $(id).get(0);
},
on:function(id,type,fn){
var dom = typeof id === "string"?$("#"+id):$(id);
dom.on(type,fn);
}
}
})();
加入自己邏輯的適配器
以前寫的一些庫，現(xiàn)在需要添加一些特有的邏輯，不建議直接更改,先寫個適配器，調(diào)用自己的適配器
select:function(id){
doSomething(id);
return $(id).get(0);
},
參數(shù)適配器
api不要超過3個參數(shù)，如果有的必須很多呢，讓用戶傳遞一個obj吧，不僅參數(shù)變少了，可以設(shè)置默認值哦
function doSomething(obj){
var defaults = {
name:"雨夜清河",
title:"設(shè)計模式",
...
}
for(var i in defaults){
defaults[i] = obj[i] || defaults[i];
}
// do thing
}
服務(wù)器數(shù)據(jù)適配
前后端數(shù)據(jù)分離，當后端數(shù)據(jù)接口發(fā)生變化，前端寫個適配器就好了
function ajaxAdapter(data){
return [data["name"],data["title"],data["age"]];
}
$.ajax({
url:"..",
success:function(data,status){
if(data){
doSomething(ajaxAdapter(data));
}
}
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79271.html
摘要：什么是適配器模式適配器模式將一個類的接口轉(zhuǎn)換成客戶希望的另外一個接口，使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。中的適配器模式在前端項目中，適配器模式的使用場景一般有以下三種情況庫的適配參數(shù)的適配和數(shù)據(jù)的適配。 1 什么是適配器模式 適配器模式(Adapter)：將一個類的接口轉(zhuǎn)換成客戶希望的另外一個接口，使得原本由于接口不兼容而不能一起工作的那些類可以一起工作。 在...
摘要：舊接口格式和使用者不兼容，中間加一個適配器轉(zhuǎn)換接口。模式作用使用一個已經(jīng)存在的對象，但其方法或接口不符合你的要求。 原文博客地址：https://finget.github.io/2018/11/22/adapter/ 適配器模式 適配器模式(Adapter)是將一個類(對象)的接口(方法或?qū)傩?轉(zhuǎn)換成客戶希望的另外一個接口(方法或?qū)傩?,適配器模式使得原本由于接口不兼容而不能一起工作...
摘要：概述用久了，深受其約定大于配置的便利性毒害之后，我想回歸到時代，看看開發(fā)模式中用戶是如何參與的。備注當然本文所使用的全是非注解的配置方法，即需要在中進行配置并且需要遵循各種實現(xiàn)原則。而更加通用主流的基于注解的配置方法將在后續(xù)文章中詳述。 showImg(https://segmentfault.com/img/remote/1460000015244684); 概述 用久了Sprin...
閱讀 1988·2021-11-19 09:40
閱讀 1931·2021-09-28 09:36
閱讀 2279·2021-09-22 10:02
閱讀 2724·2019-08-30 14:00
閱讀 1948·2019-08-29 15:31
閱讀 2893·2019-08-29 15:11
閱讀 2905·2019-08-29 13:04
閱讀 1080·2019-08-27 10:55
