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