国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

聽飛狐聊JavaScript設計模式系列10

yexiaobai / 1558人閱讀

摘要：本回內容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式，用一個新的接口對現有類的接口進行包裝，處理類與的不匹配。這一回，主要聊了適配器模式，圖片預加載，主要還是理解下一回，聊一聊橋接模式，順便做一做計算題。

本回內容介紹

上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式（Adapter），用一個新的接口對現有類的接口進行包裝，處理類與API的不匹配。使用這種模式的對象又叫做包裝器（wrapper）。先看個簡單的例子，先理解再深入，走你：

1.適配器模式

先定義一個接口（接收3個參數），再定義一個對象，如何銜接二者呢，如下：

// 定義一個接口方法，傳3個參數
function interfaceMethod(a1,a2,a3){
    // 隨便寫個彈出框
    alert(a1+a2+a3+"");
}
    
// 定義一個對象
var o = {
    s1:"飛狐就是帥",
    s2:"，擼壕，",
    s3:"大衛"
}
    
// 適配器函數，把傳遞的對象參數轉換為interfaceMethod函數需要的形式
function adapter(o){
    interfaceMethod(o.s1,o.s2,o.s3);
}
adapter(o);    //飛狐就是帥，擼壕，大衛

這是模擬JS設計模式書上例子，適配器的作用主要是對現有的接口進行包裝，從而實現現有的接口和不兼容的類進行匹配。
這里很多盆友會疑惑適配器模式與門面模式的區別：
1，門面模式是為了簡化一個接口，并不提供額外的選擇；
2，適配器則要把一個接口轉換為另一個接口，并不會濾除某些能力，也不會簡化接口；
網上最多的一個例子，就是適配不同的庫，如下：

2. 適配不同庫

Prototype庫的$函數到YUI的get方法的轉換，網上最多的一個適配器模式的講解，看例子：

飛狐



帥狐

    

主要看氣質
// 模擬Prototype，根據id獲取DOM元素，不需要傳遞任何的形參，一個id寫一個參數，多個id多個參數
function $(){
    // 定義一個結果數組
    var elements = [];
    // 遍歷傳入參數
    for(var i=0;i

這個例子在網上太多了，隨便找了一個來改，目的在于模擬不同庫直接的匹配，靈活的轉換，解決與現有API提供的接口不兼容的沖突。



裝逼時刻了，老片新看，推薦《重慶森林》，文藝范兒的調調~~


這一回聊適配器模式，就倆例子，內容不多，主要是理解。
下面的內容來一個圖片預加載，跟上一回的懶加載湊一對兄弟篇。

JS圖片預加載

圖片預加載是web開發中一種應用相當廣泛的技術，比如圖片翻轉顯示等特效的時候，為了讓圖片在轉換的時候不出現等待，先讓圖片下載到本地，再繼續執行后續的操作：


//要加載的圖片地址,這里可以隨便在網上搜點兒圖片測試
var imgs=[
    "xxx.jpg",
    "yyy.jpg",
    "zzz.jpg"
    ];
    
var preload=function(imgs,callback){
    // 判斷傳入的imgs是否為數組（typeof操作符檢測數組的時候也是object），若不是數組則用[imgs]轉為數組
    var imgs=(typeof imgs!="object")? [imgs] : imgs;
    // 定義一個圖片數組
    var img = [];
    for(var i=0,len=imgs.length;i

這里只是簡單的模擬，代碼量少，應該可以很容易看懂，預加載減去了等待時間提高用戶體驗，很多web應用中廣泛運用。


這一回，主要聊了適配器模式，圖片預加載，主要還是理解~~
下一回，聊一聊橋接模式，順便做一做計算題。


客觀看完點個贊，推薦推薦唄，嘿嘿~~



注：此系飛狐原創，轉載請注明出處

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78290.html

相關文章

  • 聽飛狐聊JavaScript設計模式系列06

    本回內容介紹 上一回聊到JS中模擬接口，裝飾者模式，摻元類，分析了backbone的繼承源碼，感覺還好吧！ 介一回，偶們來聊一下在JS單例模式(singleton)，單例模式其實運用很廣泛，比如：jquery，AngularJS，underscore吖蝦米的都是單例模式，來吧，直接開始咯： 1. 單例模式 保證一個類只有一個實例，從全局命名空間里提供一個唯一的訪問點來訪問該對象。其實之前寫過的對象...

    hiYoHoo 評論0 收藏0

  • 聽飛狐聊JavaScript設計模式系列02

    摘要：本回內容介紹上一回聊到數據類型，簡單的過了一遍，包括個數組新特性等，這一回來聊聊對象，結合數組來實戰一些例子，在做題中成長，記憶會更深刻，來吧，開始咯創建實例的方式有兩種使用操作符后跟構造函數飛狐使用對象字面量表示法飛狐也可以飛狐這種寫法與 本回內容介紹 上一回聊到JS數據類型，簡單的過了一遍，包括9個數組新特性等，這一回來聊聊Object對象，結合數組來實戰一些例子，在做題中成長，記...

    tangr206 評論0 收藏0

  • 聽飛狐聊JavaScript設計模式系列11

    摘要：橋接模式之特權函數特權函數，用一些具有特權的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列。連續自然數分組，計算最多組的個數將至這個連續自然數分成組使每組相加的值相等。個數組中數字最多的一組有個此時的和為。 本回內容介紹 上一回，聊了適配器模式，圖片預加載，介一回，聊橋接模式（Bridge），跟之前一樣，難度比較小，橋接模式將抽象部分與它的實現部分分離，通過橋接模式聯系彼此，同時...

    wanglu1209 評論0 收藏0

  • 聽飛狐聊JavaScript設計模式系列14

    摘要：本回內容介紹上一回，聊了聊狀態模式，并介紹了一下介一回，聊鏈式編程，模擬一下，再模擬一下封裝一個庫。這一回，主要聊了鏈式調用，模擬了，尤其是，希望大家能喜歡這次代碼分享。下一回，聊一聊的策略模式。 本回內容介紹 上一回，聊了聊狀態模式（State），并介紹了一下vue.js；介一回，聊鏈式編程，模擬一下jQuery，再模擬一下underscore.js,封裝一個庫。 1. 鏈式調用 (...

    fox_soyoung 評論0 收藏0

  • 聽飛狐聊JavaScript設計模式系列03

    摘要：閉包與柯里化閉包有權訪問另一個函數作用域中變量的函數。柯里化把接受多個參數的函數變換成接受一個單一參數最初函數的第一個參數的函數，并且返回接受余下的參數而且返回結果的新函數的技術。 本回內容介紹 上一回聊到JS的Object類型，簡單模擬了一下Java的Map，介一講，偶們來聊一下函數好唔好，介可系JS世界的一等公民喲。從函數開始，我們就將逐步過渡到設計模式，來吧，帥狐帶你裝逼帶你飛：...

    levy9527 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<