很多人覺得Spring Security實現登錄驗證很難，我最開始學習的時候也這樣覺得。因為我好久都沒看懂我該怎麼樣將自己寫的用於接收用戶名密碼的Controller與Spring Security結合使用，這是一個先入為主的誤區。後來我搞懂了：根本不用你自己去寫Controller。你只需要告訴Spring Security用戶信息、角色信息、權限信息、登錄頁是什麼？登陸成功頁是什麼？或者其他有關登錄的一切信息。具體的登錄驗證邏輯它來幫你實現。

一、動態數據登錄驗證的基礎知識

在本號之前的文章中，已經介紹了Spring Security的formLogin登錄認證模式，RBAC的權限控制管理模型，並且針對Spring Security的登錄認證邏輯源碼進行了解析等等。我們所有的用戶、角色、權限信息都是在配置文件裏面寫死的，然而在實際的業務系統中，這些信息通常是存放在RBAC權限模型的數據庫表中的。下面我們來回顧一下其中的核心概念：

• RBAC的權限模型可以從用戶獲取為用戶分配的一個或多個角色，從用戶的角色又可以獲取該角色的多種權限。通過關聯查詢可以獲取某個用戶的角色信息和權限信息。
• 在源碼解析的文章中，我們知道如果我們不希望用戶、角色、權限信息寫死在配置裏面。我們應該實現UserDetails與UserDetailsService接口，從而從數據庫或者其他的存儲上動態的加載這些信息。

以上是對一些核心的基礎知識的總結，如果您對這些知識還不是很清晰，建議您先往下讀本文。如果看完本文仍然理解困難，建議您翻看本號之前的文章。

二、UserDetails與UserDetailsService接口

• UserDetailsService接口有一個方法叫做loadUserByUsername，我們實現動態加載用戶、角色、權限信息就是通過實現該方法。函數見名知義：通過用戶名加載用戶。該方法的返回值就是UserDetails。
• UserDetails就是用戶信息，即：用戶名、密碼、該用戶所具有的權限。

下面我們來看一下UserDetails接口都有哪些方法。

public interface UserDetails extends Serializable {
    //獲取用戶的權限集合
    Collection<? extends GrantedAuthority> getAuthorities();

    //獲取密碼
    String getPassword();

    //獲取用戶名
    String getUsername();

    //賬號是否沒過期
    boolean isAccountNonExpired();

    //賬號是否沒被鎖定
    boolean isAccountNonLocked();

    //密碼是否沒過期
    boolean isCredentialsNonExpired();

    //賬戶是否可用
    boolean isEnabled();
}

現在，我們明白了，只要我們把這些信息提供給Spring Security，Spring Security就知道怎麼做登錄驗證了，根本不需要我們自己寫Controller實現登錄驗證邏輯。

三、實現UserDetails 接口

public class SysUser implements UserDetails{
    
    String password();  //密碼
    String username();  //用戶名
    boolean accountNonExpired;   //是否沒過期
    boolean accountNonLocked;   //是否沒被鎖定
    boolean credentialsNonExpired;  //是否沒過期
    boolean enabled;  //賬號是否可用
    Collection<? extends GrantedAuthority> authorities;  //用戶的權限集合

    //省略構造方法
    //省略set方法
    //省略get方法（即接口UserDetails的方法）
}

我們就是寫了一個適應於UserDetails的java POJO類，所謂的 UserDetails接口實現就是一些get方法。get方法由Spring Security調用，我們通過set方法或構造函數為 Spring Security提供UserDetails數據。

四、實現UserDetailsService接口

@Component
public class MyUserDetailsService implements UserDetailsService{

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
            
       //這裏從數據庫sys_user表裡面查詢實體類對象。loadUser方法可使用Mybatis或JDBC或JPA自行實現。
       SysUser sysUser =  loadUser(username);   

        // 判斷用戶是否存在 
       if(user == null)  {  throw  new  UsernameNotFoundException("用戶名不存在");  }

       //從數據庫該用戶所有的角色信息，所有的權限標誌
       //遍歷所有的ROLE角色及所有的Authority權限（菜單、按鈕）。
       //用逗號分隔他們的唯一標誌，具體過程自行實現。
       sysUser.setAuthorities(
               AuthorityUtils.commaSeparatedStringToAuthorityList("ROLE_AMIN , system:user:delete"));
        
        //sysUser.setAccountNonLocked(true或false);
        return sysUser;
    }
}

• 通常數據庫表sys_user字段要和SysUser屬性一一對應，比如username、password、enabled。但是比如accountNonLocked字段用於登錄多次錯誤鎖定，但我們一般不會在表裡存是否鎖定，而是存一個鎖定時間字段。通過鎖定時間是否大於當前時間判斷賬號是否鎖定，所以實現過程中可以靈活做判斷並用好set方法，不必拘泥於一一對應的形式。
• 角色是一種特殊的權限，在Spring Security我們可以使用hasRole(角色標識)表達式判斷用戶是否具有某個角色，決定他是否可以做某個操作;通過hasAuthority(權限標識)表達式判斷是否具有某個操作權限。

五、最後說明

至此，我們將系統裏面的所有的用戶、角色、權限信息都通過UserDetailsService和UserDetails告知了Spring Security。但是多數朋友可能仍然不知道該怎樣實現登錄的功能，其實剩下的事情很簡單了：

• 寫一個登錄界面，寫一個登錄表單，表單使用post方法提交到默認的/login路徑
• 表單的用戶名、密碼字段名稱默認是username、password。
• 寫一個登錄成功之後的跳轉頁面，比如index.html

然後把這些信息通過配置方式告知Spring Security ，以上的配置信息名稱都可以靈活修改。如果您不知道如何配置請參考本號之前的文章《formLogin登錄認證模式》。

期待您的關注

• 向您推薦博主的系列文檔：
• 本文轉載註明出處（必須帶連接，不能只轉文字）：。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※高價收購3C產品,價格不怕你比較

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※3c收購,鏡頭 收購有可能以全新價回收嗎?

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

特斯拉上週發表了最新車種 Cybertruck，破格的外型與性能讓全球傻眼，本篇文章將告訴你 Cybertruck 設計成這樣的 6 個理由，以及 5 個它尚未說清楚的疑點。

老派科幻電影的線條、全車冷鑄不鏽鋼、跑得比保時捷還快、拉得比福特還給力，特斯拉 Cybertruck 一出場就奪走全世界目光，如同特斯拉執行長馬斯克（Elon Musk）說的，他要改變皮卡車一成不變的外觀。改變歸改變，改成這樣確實是有點誇張了，但 Cybertruck 在設計時，是遵循著以下 6 個原則，才會長成這樣。

1. 原則一：強悍外表
2. 原則二：將低風阻，提高效率
3. 原則三：內在舒適大空間
4. 原則四：適應不同路面駕駛
5. 原則五：大載貨量與拉力
6. 原則六：大電池容量

這些原則（或說是目標），部分來自於馬斯克個人的期待，一部分來自於市場調查的回饋，相信收到這個提案要求的專案，當下應該很想離職。但從發表會的成果來看，他們確實做到了。

為了看起來更強悍，Cybertruck 全車採用 301 不鏽鋼包覆。

皮卡車外表強悍，幾乎是一種固定形象，方方正正的大塊頭是百年傳統。但這樣的外表牴觸了原則二的低風阻要求，同時別忘了，低風阻的跑車，可不會配備原則三的車內大空間。

最終，結合這三項要求的最大公約數，原來就存在於 80 年代的科幻電影跟電玩中，當然這一切若沒有電動馬達是不可能達成的。燃油車的引擎通常配置於車頭，這是為了讓後方留出寬敞的乘坐空間，犧牲了車頭的流線設計，也在傳輸過程中浪費了部分動力。因此追求速度的跑車，通常將車頭壓低，引擎後置，這樣子減低了風阻，也讓動力傳導更直接，但是乘坐空間就非常狹窄，更別提燃油皮卡車後面的大型貨斗了。

Cybertruck 和目前越來越多的電動車一樣，將馬達、電池組整合在底盤，離輪胎更近，也讓上部空間更有彈性，Cybertruck 進一步運用了大眾對皮卡車車身較高的印象，讓它的底盤空間能塞進更多電池，還有其他黑科技，來滿足這些設計原則，像是適應性氣壓懸吊、龐大的電池容量以及可容納六人乘坐的車廂和一個可開閉的貨斗。

從試乘影片中，可以看到後座乘客（身高約 180 公分）在入座後，頭頂上仍然有兩個拳頭左右的空間，算是相當舒適，然而腿部空間似乎就比較侷促，後座寬度看起來和一般房車差不多，塞進兩位大漢剛剛好，整體來說，算是勉強達成了原則三的大空間要求。（官方數據，能容納 6 個成人）

但是，在完成這樣的設計之後，我們會發現，這種外觀線條看起來並不是那麼強悍，因為斜切的車頭讓人聯想到的是跑車，不是皮卡車或悍馬車這種硬漢風格。解決的辦法，就如同我們現在看到的，捨棄一般車輛的鈑金與烤漆，改用與姊妹公司 SpaceX 的太空船同樣材料的 301 不鏽鋼板，而且厚度達到 3 公厘，足以抵擋 9mm 口徑手槍的射擊。代價是，每一扇車門重達 27 公斤，萬一被車門夾到，後果可是不得了。

Cybertruck 內部空間比想像中寬闊，前方只有一塊 17 吋觸控螢幕作為主控台。

5 個等待揭開的疑問

發表會後隔天，馬斯克宣布訂單數量已經突破 14 萬，換句話說，這個發表會已經幫特斯拉賺進了 1,400 萬美元，然而這位愛做夢、愛說大話的老闆，心中也明白最後成交的數量可能不到一半，因為這台科幻裝甲車，仍然有幾個問題需要釐清。

問題一：後照鏡

許多人都發現了，發表會上的 Cybertruck 並沒有裝備車側後照鏡，官網上的影片與照片也都沒有看到，推測是使用攝影機來取代了傳統後照鏡，然而並非所有國家都開放電子後照鏡上路，包含美國跟台灣都還沒開放。在 Cybertruck 試乘的過程中，也沒看到螢幕上有播放左右後側的畫面，只有裝設數位正後方後照鏡，究竟 Cybertruck 怎麼解決車側後照鏡的問題，尚有待解答。

問題二：外觀塗裝

全不鏽鋼車身肯定會吸引到一部分的客群，但是正式販售時會不會提供不同款式的彩繪或是塗裝，並未說明，畢竟許多車主仍然希望自己的愛車能保有一些特殊性，至少花了 7 萬美元購買頂級款的車主，會希望自己的車看起來跟 4 萬美元的有些不同。

而提到外觀就不能不提那一整片乾乾淨淨的車頭，一般車輛會有車頭 Logo、進氣壩等，即使特斯拉其他車款，也都留有進氣孔，或許 Cybertruck 可以不用 Logo 來辨識，但是令人好奇的是它怎麼解決進氣的問題，又或者 Cybertruck 有了不同的方式來處理散熱和車內空氣流通問題

問題三：上下車

一般的皮卡車，車身都較高，對於家有老小的家庭來說，上下車會比較辛苦。從 Cybertruck 的照片中來看，底盤高度約在成年女子的膝蓋，算是有一點點難度。

在發表會上，Cybertruck 展示了它的適應性氣壓懸吊系統，在貨斗載重時，能夠自動調整車身高度；特斯拉官方也表示，當行駛於不同路面時，Cybertruck 會自動調整懸吊，在高速公路時會降低車身，在路面崎嶇時，會提高車身。這讓人不免想知道，當車主或乘客要上下車的時候，車身是否也會自動降低，方便進出呢？

問題四：貨斗操縱方式

市面上的皮卡車，後方貨斗大都是開放式的，也有車主會加裝棚罩，除了保護行李外，最重要是不讓路人亂丟垃圾。Cybertruck 的貨斗是機械式的，在發表會中，可以看到機車騎士走到車尾按了一些隱藏的開關，開啟貨斗，接著再用手拉開尾門，放下斜板。

特斯拉是否會將貨斗開閉設計得更容易使用呢？

對於一般卡車司機來說，這些動作稀鬆平常，但對於標榜高科技的 Cybertruck 來說，似乎不太「性感」，因此我們不免好奇，正式上市後，特斯拉是否會將操作貨斗開閉的功能，放到他們的手機 App 裡，讓車主可以更輕鬆地開關？

問題五：交車時間

最後的問題，也是特斯拉在過去幾年最為人詬病的問題，真的能夠如期交車嗎？特斯拉官網上寫得非常保守，「生產日期接近 2021 年底」，最高規格的三馬達版本，更是標明「預計在 2022 年底開始生產」。這等於是在說，我沒有說什麼時候交車，我只說了什麼時候開始製造，從生產到交車要多久，沒有人知道。

（合作媒體：。圖片來源：）

延伸閱讀：

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※公開收購3c價格,不怕被賤賣!

※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

※不管是台北網頁設計公司、台中網頁設計公司，全省皆有專員為您服務

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※帶您來看台北網站建置，台北網頁設計，各種案例分享

一、摘要

在集合系列的第一章，咱們了解到，Map 的實現類有 HashMap、LinkedHashMap、TreeMap、IdentityHashMap、WeakHashMap、Hashtable、Properties 等等。

本文主要從數據結構和算法層面，探討 WeakHashMap 的實現。

二、簡介

剛剛咱們也介紹了，在 Map 家族中，WeakHashMap 是一個很特殊的成員，它的特殊之處在於 WeakHashMap 里的元素可能會被 GC 自動刪除，即使程序員沒有显示調用 remove() 或者 clear() 方法。

換言之，當向 WeakHashMap 中添加元素的時候，再次遍歷獲取元素，可能發現它已經不見了，我們來看看下面這個例子。

public static void main(String[] args) {
        Map weakHashMap = new WeakHashMap();
        
        //向weakHashMap中添加4個元素
        for (int i = 0; i < 3; i++) {
            weakHashMap.put("key-"+i, "value-"+ i);
        }
        //輸出添加的元素
        System.out.println("數組長度："+weakHashMap.size() + "，輸出結果：" + weakHashMap);
        
        //主動觸發一次GC
        System.gc();
        
        //再輸出添加的元素
        System.out.println("數組長度："+weakHashMap.size() + "，輸出結果：" + weakHashMap);
    }

輸出結果：

數組長度：3，輸出結果：{key-2=value-2, key-1=value-1, key-0=value-0}
數組長度：3，輸出結果：{}

當主動調用 GC 回收器的時候，再次查詢 WeakHashMap 裏面的數據的時候，內容為空。

更直觀的說，當使用 WeakHashMap 時，即使沒有顯式的添加或刪除任何元素，也可能發生如下情況：

• 調用兩次 size() 方法返回不同的值；
• 兩次調用 isEmpty() 方法，第一次返回 false，第二次返回 true；
• 兩次調用 containsKey() 方法，第一次返回 true，第二次返回 false，儘管兩次使用的是同一個key；
• 兩次調用 get() 方法，第一次返回一個 value，第二次返回 null，儘管兩次使用的是同一個對象。

要明白 WeekHashMap 的工作原理，還需要引入一個概念：弱引用。

我們都知道 Java 中內存是通過 GC 自動管理的，GC 會在程序運行過程中自動判斷哪些對象是可以被回收的，並在合適的時機進行內存釋放。

GC 判斷某個對象是否可被回收的依據是，是否有有效的引用指向該對象。如果沒有有效引用指向該對象（基本意味着不存在訪問該對象的方式），那麼該對象就是可回收的。

2.1、對象引用介紹

從 JDK1.2 版本開始，把對象的引用分為四種級別，從而使程序更加靈活的控制對象的生命周期。這四種級別由高到低依次為：強引用、軟引用、弱引用和虛引用。

用表格整理之後，各個引用類型的區別如下：

2.1.1、強引用

強引用是使用最普遍的引用，例如，我們創建一個對象：

//強引用類型
Object object=new Object();

如果一個對象具有強引用，那垃圾回收器絕不會回收它。當內存空間不足， Java 虛擬機寧願拋出 OutOfMemoryError 錯誤，使程序異常終止，也不會靠隨意回收具有強引用的對象來解決內存不足的問題。

如果不使用時，要手動通過如下方式來弱化引用，如下：

//將對象設置為null，幫助垃圾收集器回收此對象
object=null;

這個時候，GC 認為該對象不存在引用，就可以回收這個對象，具體什麼時候收集這要取決於 GC 的算法。

2.1.2、軟引用

被SoftReference指向的對象，屬於軟引用，如下：

String str=new String("abc");

//軟引用
SoftReference<String> softRef=new SoftReference<String>(str);

如果一個對象只具有軟引用，則內存空間足夠，垃圾回收器就不會回收它；如果內存空間不足了，就會進入垃圾回收器，Java 虛擬機就會把這個軟引用加入到與之關聯的引用隊列中，GC 進行回收處理。只要垃圾回收器沒有回收它，該對象就可以被程序使用。

當內存不足時，等價於：

If(JVM.內存不足()) {
   str = null;  // 轉換為軟引用
   System.gc(); // 垃圾回收器進行回收
}

軟引用的這種特性，比較適合內存敏感的場景，做高速緩存。在某些場景下，比如，系統內存不是很足的情況下，可以使用軟引用，GC 會自動回收，再次獲取對象的時候，可以對緩存對象進行重建，而又不影響使用。比如：

//創建一個緩存內容cache
String cache = new String("abc");

//進行軟引用處理
SoftReference<String> softRef=new SoftReference<String>(cache);

//判斷是否被垃圾回收器回收
if(softRef.get()!=null){
    //還沒有被回收器回收，直接獲取
    cache = (String) softRef.get();
}else{
    //由於內存吃緊，所以對軟引用的對象回收了
    //重建緩存對象
    cache = new String("abc");
    SoftReference<String> softRef = new SoftReference<String>(cache);
}

2.1.3、弱引用

被WeakReference指向的對象，屬於弱引用，如下：

String str=new String("abc");

//弱引用
WeakReference<String> abcWeakRef = new WeakReference<String>(str);

弱引用與軟引用的區別在於：具有弱引用的對象擁有更短暫的生命周期。

在垃圾回收器線程掃描它所管轄的內存區域的過程中，一旦發現了只具有弱引用的對象，不管當前內存空間足夠與否，都會回收它的內存。不過，由於垃圾回收器是一個優先級很低的線程，因此不一定會很快發現那些只具有弱引用的對象。

當垃圾回收器進行掃描回收時，等價於：

str = null;
System.gc();

如果這個對象是偶爾的使用，並且希望在使用時隨時就能獲取到，但又不想影響此對象的垃圾收集，那麼你應該用 WeakReference 來記住此對象。

同樣的，弱引用對象進入垃圾回收器，Java虛擬機就會把這個弱引用加入到與之關聯的引用隊列中，GC 進行回收處理。

2.1.4、虛引用

被PhantomReference指向的對象，屬於虛引用。

虛引用與軟引用和弱引用的一個區別在於：虛引用必須和引用隊列聯合使用，如下：

String str=new String("abc");

//創建引用隊列
ReferenceQueue<String> queue = new ReferenceQueue<String>();

//創建虛引用
PhantomReference<String> phantomReference = new PhantomReference<String>(str, queue);

虛引用，顧名思義，就是形同虛設，與其他幾種引用都不同，虛引用並不會決定對象的生命周期。如果一個對象僅持有虛引用，那麼它就和沒有任何引用一樣，在任何時候都可能被垃圾回收器回收。

當垃圾回收器準備回收一個對象時，如果發現它是虛引用，就會在回收對象的內存之前，把這個虛引用加入到與之關聯的引用隊列中，GC 進行回收處理。

2.1.5、總結

Java 4中引用的級別由高到低依次為：強引用 > 軟引用 > 弱引用 > 虛引用。

用一張圖來看一下他們之間在垃圾回收時的區別：

再次回到本文要講的 WeakHashMap！

WeakHashMap 內部是通過弱引用來管理 entry 的，弱引用的特性對應到 WeakHashMap 上意味着什麼呢？將一對 key, value 放入到 WeakHashMap 里，隨時都有可能被 GC 回收。

下面，咱們一起來看看 WeakHashMap 的具體實現。

三、常用方法介紹

3.1、put方法

put 方法是將指定的 key, value 對添加到 map 里，存儲結構類似於 HashMap；
不同的是，WeakHashMap 中存儲的 Entry 繼承自 WeakReference，實現了弱引用。

打開源碼如下：

public V put(K key, V value) {
        Object k = maskNull(key);
        int h = hash(k);
        Entry<K,V>[] tab = getTable();
        int i = indexFor(h, tab.length);

        for (Entry<K,V> e = tab[i]; e != null; e = e.next) {
            if (h == e.hash && eq(k, e.get())) {
                V oldValue = e.value;
                if (value != oldValue)
                    e.value = value;
                return oldValue;
            }
        }

        modCount++;
        Entry<K,V> e = tab[i];
        tab[i] = new Entry<>(k, value, queue, h, e);
        if (++size >= threshold)
            resize(tab.length * 2);
        return null;
}

WeakHashMap 中存儲的 Entry，源碼如下：

private static class Entry<K,V> extends WeakReference<Object> implements Map.Entry<K,V> {
        V value;
        final int hash;
        Entry<K,V> next;

        Entry(Object key, V value,
              ReferenceQueue<Object> queue,
              int hash, Entry<K,V> next) {
              
            //將key進行弱引用處理
            super(key, queue);
            this.value = value;
            this.hash  = hash;
            this.next  = next;
        }
        ......
}

需要注意的是，Entry 中super(key, queue)，傳入的是key，因此key才是進行弱引用的，value是直接強引用關聯在this.value中，System.gc()時，對key進行了回收，而value依然保持。

那value是何時被清除的呢？

閱讀源碼，可以看到，調用getTable()函數，對調用expungeStaleEntries()函數，該方法對 jvm 要回收的的 entry(quene 中) 進行遍歷，並將 entry 的 value 設置為空，進行內存回收。

private Entry<K,V>[] getTable() {
        expungeStaleEntries();
        return table;
}

expungeStaleEntries()函數，源碼如下：

private void expungeStaleEntries() {
        for (Object x; (x = queue.poll()) != null; ) {
            synchronized (queue) {
                    Entry<K,V> e = (Entry<K,V>) x;
                int i = indexFor(e.hash, table.length);

                Entry<K,V> prev = table[i];
                Entry<K,V> p = prev;
                while (p != null) {
                    Entry<K,V> next = p.next;
                    if (p == e) {
                        if (prev == e)
                            table[i] = next;
                        else
                            prev.next = next;
                        //將value設置為null，方便GC回收
                        e.value = null; // Help GC
                        size--;
                        break;
                    }
                    prev = p;
                    p = next;
                }
            }
        }
}

所以效果是 key 在 GC 的時候被清除，value 在 key 清除后，訪問數組內容的時候進行清除！

3.2、get方法

get 方法根據指定的 key 值返回對應的 value。

源碼如下：

public V get(Object key) {
        Object k = maskNull(key);
        int h = hash(k);
        //訪問數組內容
        Entry<K,V>[] tab = getTable();
        int index = indexFor(h, tab.length);
        Entry<K,V> e = tab[index];
        while (e != null) {
            //通過key，進行hash值和equals判斷
            if (e.hash == h && eq(k, e.get()))
                return e.value;
            e = e.next;
        }
        return null;
}

同樣的，get 方法在判斷對象之前，也調用了getTable()函數，同時，也調用了expungeStaleEntries()函數，所以，可能通過 key 獲取元素的時候，得到空值；如果 key 沒有被 GC 回收，那麼就返回對應的 value。

3.3、remove方法

remove 的作用是通過 key 刪除對應的元素。

源碼如下：

public V remove(Object key) {
        Object k = maskNull(key);
        int h = hash(k);
        
        //訪問數組內容
        Entry<K,V>[] tab = getTable();
        int i = indexFor(h, tab.length);
        Entry<K,V> prev = tab[i];
        Entry<K,V> e = prev;
        
        //循環鏈表，通過key，進行hash值和equals判斷
        while (e != null) {
            Entry<K,V> next = e.next;
            if (h == e.hash && eq(k, e.get())) {
                modCount++;
                size--;
                //找到之後，將鏈表後節點向前移動
                if (prev == e)
                    tab[i] = next;
                else
                    prev.next = next;
                return e.value;
            }
            prev = e;
            e = next;
        }

        return null;
}

同樣的，remove 方法在判斷對象之前，也調用了getTable()函數，同時，也調用了expungeStaleEntries()函數，所以，可能通過 key 獲取元素的時候，可能被垃圾回收器回收，得到空值。

四、總結

WeakHashMap 跟普通的 HashMap 不同，在存儲數據時，key被設置為弱引用類型，而弱引用類型在 java 中，可能隨時被 jvm 的 gc 回收，所以再次通過獲取對象時，可能得到空值，而value是在訪問數組內容的時候，進行清除。

可能很多人覺得這樣做很奇葩，其實不然，WeekHashMap 的這個特點特別適用於需要緩存的場景。

在緩存場景下，由於系統內存是有限的，不能緩存所有對象，可以使用 WeekHashMap 進行緩存對象，即使緩存丟失，也可以通過重新計算得到，不會造成系統錯誤。

五、參考

1、JDK1.7&JDK1.8 源碼

2、

3、

4、

作者：炸雞可樂
出處：

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※高價收購3C產品,價格不怕你比較

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※3c收購,鏡頭 收購有可能以全新價回收嗎?

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

上一章說了如何製作一個線路圖，當然上一章是手寫的JSON數據，當然手寫的json數據有非常多的好處，例如可以應對客戶的各種BT需求，但是大多數情況下我們都是使用地鐵公司現成的JSON文件,話不多說我們先看一下。

就是這樣的，今天我們就來完成它的大部分需求，以及地鐵公司爸爸提出來的需求。

需求如下：
1.按照不同顏色显示地鐵各線路，显示對應站點。
2.用戶可以點擊手勢縮放和平移（此項目為安卓開發）。
3.用戶在線路menu里點擊線路，對應線路平移值屏幕中心並高亮。
4.根據後台數據，渲染問題路段。
5.點擊問題路段站點，显示問題詳情。

大致需求就是這些，下面看看看代碼

1.定義一些常量和變量

const dataset = subwayData; //線路圖數據源
let subway = new Subway(dataset); //線路圖的類文件
let baseScale = 2; //基礎縮放倍率
let deviceScale = 1400 / 2640; //設備與畫布寬度比率
let width = 2640; //畫布寬
let height = 1760; //畫布高
let transX = 1320 + 260; //地圖X軸平移（將畫布原點X軸平移）
let transY = 580; //地圖X軸平移（將畫布原點Y軸平移）
let scaleExtent = [0.8, 4]; //縮放倍率限制
let currentScale = 2; //當前縮放值
let currentX = 0; //當前畫布X軸平移量
let currentY = 0; //當前畫布Y軸平移量
let selected = false; //線路是否被選中（在右上角的線路菜單被選中）
let scaleStep = 0.5; //點擊縮放按鈕縮放步長默認0.5倍
let tooltip = d3.select('#tooltip'); //提示框
let bugArray = []; //問題路段數組
let svg = d3.select('#sw').append('svg'); //畫布
let group = svg.append('g').attr('transform', `translate(${transX}, ${transY}) scale(1)`);//定義組並平移
let whole = group.append('g').attr('class', 'whole-line') //虛擬線路（用於點擊右上角響應線路可以定位當視野中心，方法不唯一）
let path = group.append('g').attr('class', 'path'); //定義線路
let point = group.append('g').attr('class', 'point'); //定義站點
const zoom = d3.zoom().scaleExtent(scaleExtent).on("zoom", zoomed); //定義縮放事件

這就是我們需要使用的一些常量和變量。注意transX不是寬度的一半，是因為北京地鐵線路網西線更密集。

2.讀官方JSON

使用d3.js數據必不可少，然而官方的數據並不通俗易懂，我們先解讀一下官方JSON數據。

每條線路對象都有一個l_xmlattr屬性和一個p屬性，l_xmlattr是整條線路的屬性，p是站點數組，我們看一下站點中我們需要的屬性。ex是否是中轉站，lb是站名，sid是站的id，rx、ry是文字偏移量，st是是否為站點（因為有的點不是站點而是為了渲染貝塞爾曲線用的），x、y是站點坐標。

3.構造自己的類方法

官方給了我們數據，但是並不是我們能直接使用的，所以我們需要構造自己的方法類

class Subway {
    constructor(data) {
        this.data = data;
        this.bugLineArray = [];
    }
    getInvent() {} //獲取虛擬線路數據
    getPathArray() {} //獲取路徑數據
    getPointArray() {} //獲取站點數組
    getCurrentPathArray() {} //獲取被選中線路的路徑數組
    getCurrentPointArray() {} //獲取被選中線路的站點數組
    getLineNameArray() {} // 獲取線路名稱數組
    getBugLineArray() {} //獲取問題路段數組
}

下面是我們方法內容，裏面的操作不是很優雅（大家將就看啦）

getInvent() {
    let lineArray = [];
    this.data.forEach(d => {
        let { loop, lc, lbx, lby, lb, lid} = d.l_xmlattr;
        let allPoints = d.p.slice(0);
        loop && allPoints.push(allPoints[0]);
        let path = this.formatPath(allPoints, 0, allPoints.length - 1);
        lineArray.push({
            lid: lid,
            path: path,
        })
    })
    return lineArray;
}
getPathArray() {
    let pathArray = [];
    this.data.forEach(d => {
        let { loop, lc, lbx, lby, lb, lid} = d.l_xmlattr;
        let allPoints = d.p.slice(0);
        loop && allPoints.push(allPoints[0])
        let allStations = [];
        allPoints.forEach((item, index) => item.p_xmlattr.st && allStations.push({...item.p_xmlattr, index}))
        let arr = [];
        for(let i = 0; i < allStations.length - 1; i++) {
            let path = this.formatPath(allPoints, allStations[i].index, allStations[i + 1].index);
            arr.push({
                lid: lid,
                id: `${allStations[i].sid}_${allStations[i + 1].sid}`,
                path: path,
                color: lc.replace(/0x/, '#')
            })
        }
        pathArray.push({
            path: arr,
            lc: lc.replace(/0x/, '#'),
            lb,lbx,lby,lid
        })
    })
    return pathArray;
}
getPointArray() {
    let pointArray = [];
    let tempPointsArray = [];
    this.data.forEach(d => {
        let {lid,lc,lb} = d.l_xmlattr;
        let allPoints = d.p;
        let allStations = [];
        allPoints.forEach(item => {
            if(item.p_xmlattr.st && !item.p_xmlattr.ex) {
                allStations.push({...item.p_xmlattr, lid, pn: lb, lc: lc.replace(/0x/, '#')})
            } else if (item.p_xmlattr.ex) {
                if(tempPointsArray.indexOf(item.p_xmlattr.sid) == -1) {
                    allStations.push({...item.p_xmlattr, lid, pn: lb, lc: lc.replace(/0x/, '#')})
                    tempPointsArray.push(item.p_xmlattr.sid);
                }
            }
        });
        pointArray.push(allStations);
    })
    return pointArray;
}
getCurrentPathArray(name) {
    let d = this.data.filter(d => d.l_xmlattr.lid == name)[0];
    let { loop, lc, lbx, lby, lb, lid} = d.l_xmlattr;
    let allPoints = d.p.slice(0);
    loop && allPoints.push(allPoints[0])
    let allStations = [];
    allPoints.forEach((item, index) => item.p_xmlattr.st && allStations.push({...item.p_xmlattr, index}))
    let arr = [];
    for(let i = 0; i < allStations.length - 1; i++) {
        let path = this.formatPath(allPoints, allStations[i].index, allStations[i + 1].index);
        arr.push({
            lid: lid,
            id: `${allStations[i].sid}_${allStations[i + 1].sid}`,
            path: path,
            color: lc.replace(/0x/, '#')
        })
    }
    return {
        path: arr,
        lc: lc.replace(/0x/, '#'),
        lb,lbx,lby,lid
    }
}
getCurrentPointArray(name) {
    let d = this.data.filter(d => d.l_xmlattr.lid == name)[0];
    let {lid,lc,lb} = d.l_xmlattr;
    let allPoints = d.p;
    let allStations = [];
    allPoints.forEach(item => {
        if(item.p_xmlattr.st && !item.p_xmlattr.ex) {
            allStations.push({...item.p_xmlattr, lid, pn: lb, lc: lc.replace(/0x/, '#')})
        } else if (item.p_xmlattr.ex) {
            allStations.push({...item.p_xmlattr, lid, pn: lb, lc: lc.replace(/0x/, '#')})
        }
    });
    return allStations;
}
getLineNameArray() {
    let nameArray = this.data.map(d => {
        return {
            lb: d.l_xmlattr.lb,
            lid: d.l_xmlattr.lid,
            lc: d.l_xmlattr.lc.replace(/0x/, '#')
        }
    })
    return nameArray;
}
getBugLineArray(arr) {
    if(!arr || !arr.length) return [];
    this.bugLineArray = [];
    arr.forEach(item => {
        let { start, end, cause, duration, lid, lb } = item;
        let lines = [];
        let points = [];
        let tempObj = this.data.filter(d => d.l_xmlattr.lid == lid)[0];
        let loop = tempObj.l_xmlattr.loop;
        let lc = tempObj.l_xmlattr.lc;
        let allPoints = tempObj.p;
        let allStations = [];
        allPoints.forEach(item => {
            if(item.p_xmlattr.st) {
                allStations.push(item.p_xmlattr.sid)
            }
        });
        loop && allStations.push(allStations[0]);
        for(let i=allStations.indexOf(start); i<=allStations.lastIndexOf(end); i++) {
            points.push(allStations[i])
        }
        for(let i=allStations.indexOf(start); i<allStations.lastIndexOf(end); i++) {
            lines.push(`${allStations[i]}_${allStations[i+1]}`)
        }
        this.bugLineArray.push({cause,duration,lid,lb,lines,points,lc: lc.replace(/0x/, '#'),start: points[0],end:points[points.length - 1]});
    })
    return this.bugLineArray;

這種方法大家也不必看懂，知道傳入了什麼，輸入了什麼即可，這就是我們的方法類。

4.d3渲染畫布並添加方法

這裡是js的核心代碼，既然class文件都寫完了，這裏的操作就方便了很多，主要就是下面幾個人方法，

renderInventLine(); //渲染虛擬新路
renderAllStation(); //渲染所有的線路名稱（右上角）
renderBugLine(); //渲染問題路段
renderAllLine(); //渲染所有線路
renderAllPoint(); //渲染所有點
renderCurrentLine() //渲染當前選中的線路
renderCurrentPoint() //渲染當前選中的站點
zoomed() //縮放時執行的方法
getCenter() //獲取虛擬線中心點的坐標
scale() //點擊縮放按鈕時執行的方法

下面是對應的方法體

svg.call(zoom);
svg.call(zoom.transform, d3.zoomIdentity.translate((1 - baseScale) * transX, (1 - baseScale) * transY).scale(baseScale));

let pathArray = subway.getPathArray();
let pointArray = subway.getPointArray();

renderInventLine();
renderAllStation();
renderBugLine();

function renderInventLine() {
    let arr = subway.getInvent();
    whole.selectAll('path')
    .data(arr)
    .enter()
    .append('path')
    .attr('d', d => d.path)
    .attr('class', d => d.lid)
    .attr('stroke', 'none')
    .attr('fill', 'none')
}

function renderAllLine() {
    for (let i = 0; i < pathArray.length; i++) {
        path.append('g')
        .selectAll('path')
        .data(pathArray[i].path)
        .enter()
        .append('path')
        .attr('d', d => d.path)
        .attr('lid', d => d.lid)
        .attr('id', d => d.id)
        .attr('class', 'lines origin')
        .attr('stroke', d => d.color)
        .attr('stroke-width', 7)
        .attr('stroke-linecap', 'round')
        .attr('fill', 'none')
        path.append('text')
        .attr('x', pathArray[i].lbx)
        .attr('y', pathArray[i].lby)
        .attr('dy', '1em')
        .attr('dx', '-0.3em')
        .attr('fill', pathArray[i].lc)
        .attr('lid', pathArray[i].lid)
        .attr('class', 'line-text origin')
        .attr('font-size', 14)
        .attr('font-weight', 'bold')
        .text(pathArray[i].lb)
    }
}

function renderAllPoint() {
    for (let i = 0; i < pointArray.length; i++) {
        for (let j = 0; j < pointArray[i].length; j++) {
            let item = pointArray[i][j];
            let box = point.append('g');
            if (item.ex) {
                box.append('image')
                .attr('href', './trans.png')
                .attr('class', 'points origin')
                .attr('id', item.sid)
                .attr('x', item.x - 8)
                .attr('y', item.y - 8)
                .attr('width', 16)
                .attr('height', 16)
            } else {
                box.append('circle')
                .attr('cx', item.x)
                .attr('cy', item.y)
                .attr('r', 5)
                .attr('class', 'points origin')
                .attr('id', item.sid)
                .attr('stroke', item.lc)
                .attr('stroke-width', 1.5)
                .attr('fill', '#ffffff')
            }
            box.append('text')
            .attr('x', item.x + item.rx)
            .attr('y', item.y + item.ry)
            .attr('dx', '0.3em')
            .attr('dy', '1.1em')
            .attr('font-size', 11)
            .attr('class', 'point-text origin')
            .attr('lid', item.lid)
            .attr('id', item.sid)
            .text(item.lb)
        }
    }
}

function renderCurrentLine(name) {
    let arr = subway.getCurrentPathArray(name);
    path.append('g')
    .attr('class', 'temp')
    .selectAll('path')
    .data(arr.path)
    .enter()
    .append('path')
    .attr('d', d => d.path)
    .attr('lid', d => d.lid)
    .attr('id', d => d.id)
    .attr('stroke', d => d.color)
    .attr('stroke-width', 7)
    .attr('stroke-linecap', 'round')
    .attr('fill', 'none')
    path.append('text')
    .attr('class', 'temp')
    .attr('x', arr.lbx)
    .attr('y', arr.lby)
    .attr('dy', '1em')
    .attr('dx', '-0.3em')
    .attr('fill', arr.lc)
    .attr('lid', arr.lid)
    .attr('font-size', 14)
    .attr('font-weight', 'bold')
    .text(arr.lb)
}

function renderCurrentPoint(name) {
    let arr = subway.getCurrentPointArray(name);
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        let box = point.append('g').attr('class', 'temp');
        if (item.ex) {
            box.append('image')
            .attr('href', './trans.png')
            .attr('x', item.x - 8)
            .attr('y', item.y - 8)
            .attr('width', 16)
            .attr('height', 16)
            .attr('id', item.sid)
        } else {
            box.append('circle')
            .attr('cx', item.x)
            .attr('cy', item.y)
            .attr('r', 5)
            .attr('id', item.sid)
            .attr('stroke', item.lc)
            .attr('stroke-width', 1.5)
            .attr('fill', '#ffffff')
        }
        box.append('text')
        .attr('class', 'temp')
        .attr('x', item.x + item.rx)
        .attr('y', item.y + item.ry)
        .attr('dx', '0.3em')
        .attr('dy', '1.1em')
        .attr('font-size', 11)
        .attr('lid', item.lid)
        .attr('id', item.sid)
        .text(item.lb)
    }
}

function renderBugLine(modal) {
    let bugLineArray = subway.getBugLineArray(modal);
    d3.selectAll('.origin').remove();
    renderAllLine();
    renderAllPoint();
    bugLineArray.forEach(d => {
        console.log(d)
        d.lines.forEach(dd => {
            d3.selectAll(`path#${dd}`).attr('stroke', '#eee');
        })
        d.points.forEach(dd => {
            d3.selectAll(`circle#${dd}`).attr('stroke', '#ddd')
            d3.selectAll(`text#${dd}`).attr('fill', '#aaa')
        })
    })
    d3.selectAll('.points').on('click', function () {
        let id = d3.select(this).attr('id');
        let bool = judgeBugPoint(bugLineArray, id);
        if (bool) {
            let x, y;
            if (d3.select(this).attr('href')) {
                x = parseFloat(d3.select(this).attr('x')) + 8;
                y = parseFloat(d3.select(this).attr('y')) + 8;
            } else {
                x = d3.select(this).attr('cx');
                y = d3.select(this).attr('cy');
            }
            let toolX = (x * currentScale + transX - ((1 - currentScale) * transX - currentX)) * deviceScale;
            let toolY = (y * currentScale + transY - ((1 - currentScale) * transY - currentY)) * deviceScale;
            let toolH = document.getElementById('tooltip').offsetHeight;
            let toolW = 110;
            if (toolY < 935 / 2) {
                tooltip.style('left', `${toolX - toolW}px`).style('top', `${toolY + 5}px`);
            } else {
                tooltip.style('left', `${toolX - toolW}px`).style('top', `${toolY - toolH - 5}px`);
            }
        }
    });
}

function judgeBugPoint(arr, id) {
    if (!arr || !arr.length || !id) return false;
    let bugLine = arr.filter(d => {
        return d.points.indexOf(id) > -1
    });
    if (bugLine.length) {
        removeTooltip()
        tooltip.select('#tool-head').html(`<span>${id}</span><div class="deletes" onclick="removeTooltip()">×</div>`);
        bugLine.forEach(d => {
            let item = tooltip.select('#tool-body').append('div').attr('class', 'tool-item');
            item.html(`
                <div class="tool-content">
                    <div style="color: #ffffff;border-bottom: 2px solid ${d.lc};">
                        <span style="background: ${d.lc};padding: 4px 6px;">${d.lb}</span>
                    </div>
                    <div>
                        <div class="content-left">封路時間</div><div class="content-right">${d.duration}</div>
                    </div>
                    <div>
                        <div class="content-left">封路原因</div><div class="content-right">${d.cause}</div>
                    </div>
                    <div>
                        <div class="content-left">封路路段</div><div class="content-right">${d.start}-${d.end}</div>
                    </div>
                </div>
            `)
        })
        d3.select('#tooltip').style('display', 'block');
        return true;
    } else {
        return false;
    }
}

function removeTooltip() {
    d3.selectAll('.tool-item').remove();
    d3.select('#tooltip').style('display', 'none');
}

function zoomed() {
    removeTooltip();
    let {x, y, k} = d3.event.transform;
    currentScale = k;
    currentX = x;
    currentY = y;
    group.transition().duration(50).ease(d3.easeLinear).attr("transform", () => `translate(${x + transX * k}, ${y + transY * k}) scale(${k})`)
}

function getCenter(str) {
    if (!str) return null;
    let x, y;
    let tempArr = [];
    let tempX = [];
    let tempY = [];
    str.split(' ').forEach(d => {
        if (!isNaN(d)) {
            tempArr.push(d)
        }
    })

    tempArr.forEach((d, i) => {
        if (i % 2 == 0) {
            tempX.push(parseFloat(d))
        } else {
            tempY.push(parseFloat(d))
        }
    })
    x = (d3.min(tempX) + d3.max(tempX)) / 2;
    y = (d3.min(tempY) + d3.max(tempY)) / 2;
    return [x, y]
}

function renderAllStation() {
    let nameArray = subway.getLineNameArray();
    let len = Math.ceil(nameArray.length / 5);
    let box = d3.select('#menu').append('div')
    .attr('class', 'name-box')
    for (let i = 0; i < len; i++) {
        let subwayCol = box.append('div')
        .attr('class', 'subway-col')
        let item = subwayCol.selectAll('div')
        .data(nameArray.slice(i * 5, (i + 1) * 5))
        .enter()
        .append('div')
        .attr('id', d => d.lid)
        .attr('class', 'name-item')
        item.each(function (d) {
            d3.select(this).append('span').attr('class', 'p_mark').style('background', d.lc);
            d3.select(this).append('span').attr('class', 'p_name').text(d.lb);
            d3.select(this).on('click', d => {
                selected = true;
                d3.selectAll('.origin').style('opacity', 0.1);
                d3.selectAll('.temp').remove();
                renderCurrentLine(d.lid);
                renderCurrentPoint(d.lid);
                let arr = getCenter(d3.select(`path.${d.lid}`).attr('d'));
                svg.call(zoom.transform, d3.zoomIdentity.translate((width / 2 - transX) - arr[0] - (arr[0] + transX) * (currentScale - 1), (height / 2 - transY) - arr[1] - (arr[1] + transY) * (currentScale - 1)).scale(currentScale));
            })
        })
    }
}

function scale(type) {
    if (type && currentScale + scaleStep <= scaleExtent[1]) {
        svg.call(zoom.transform, d3.zoomIdentity.translate((1 - currentScale - scaleStep) * transX - ((1 - currentScale) * transX - currentX) * (currentScale + scaleStep) / currentScale, (1 - currentScale - scaleStep) * transY - ((1 - currentScale) * transY - currentY) * (currentScale + scaleStep) / currentScale).scale(currentScale + scaleStep));
    } else if (!type && currentScale - scaleStep >= scaleExtent[0]) {
        svg.call(zoom.transform, d3.zoomIdentity.translate((1 - (currentScale - scaleStep)) * transX - ((1 - currentScale) * transX - currentX) * (currentScale - scaleStep) / currentScale, (1 - (currentScale - scaleStep)) * transY - ((1 - currentScale) * transY - currentY) * (currentScale - scaleStep) / currentScale).scale(currentScale - scaleStep));
    }
}

上面是大部分代碼，想看全部的可以查看demo。

原文鏈接

大家轉載請註明一下原文 謝謝大家

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

※公開收購3c價格,不怕被賤賣!

※想知道網站建置、網站改版該如何進行嗎?將由專業工程師為您規劃客製化網頁設計及後台網頁設計

※不管是台北網頁設計公司、台中網頁設計公司，全省皆有專員為您服務

※Google地圖已可更新顯示潭子電動車充電站設置地點!!

※帶您來看台北網站建置，台北網頁設計，各種案例分享