序

經常上網的人都會很熟悉今天的這個主題，怎麼說呢，使用者資料，是在我們註冊一個網站的時候，需要註冊人填寫的一些個人資訊，這些個人資訊會經過加密處理後儲存到不同的伺服器。那麼完整度是什麼呢？顯而易見，完整度就是網站列出的條目，以及註冊人填寫的資料的條目的對比度，使用者填寫了幾條，還有幾條沒有填寫（這裡只是有效資料）。可以通過這個完整度讓使用者一目瞭然，完善自己的使用者資料。

背景

簡單說一下背景，近幾天，公司的設計部給提了幾個新的需求，當然，這就是其中的一個（要不也就不在這廢話了(*^__^*) 嘻嘻）。剛開始經理讓找一找有沒有這方面的開源元件，可以直接用上的。通過在網上調研之後，發現現在並沒有什麼現成的開源元件，不過倒是有不少簡單的實現思路。這篇文章就簡單的討論一下這幾個思路，下一篇文章再寫詳細的實現。

正文

使用者資料完整度的前端顯示問題，一般有兩種解決思路，其中第一種就是請求後臺伺服器，查詢某一使用者的資料資訊，根據查詢到的資訊進行判斷，當然還要加上相應的權重，這個根據公司的需要，某個屬性的具體權重進行相應的設定。需要注意的是，各個屬性的總和必須是100%。否則，使用者資料完整度就不夠真實了。 而第二種解決思路是，不用請求後臺伺服器，直接在頁面上查詢使用者已經填寫的資訊，當然，這種思路會受一些因素的影響。比如，使用者的主要資訊沒有全部顯示在頁面上，或者是，頁面是使用框架載入的，需要顯示的頁面和需要查詢的頁面不是同一個，這種情況也是受限制的。 那麼，下面就詳細的說說這兩種方案。 方案一 首先需要把查詢的屬性、以及屬性相應的權重加以確定，當然，這個是需要設計部給出的。考慮到將來的變化，我們可以把它單獨的抽象出來，放到配置檔案中，如果以後的權重需要修改，這也是很方便的。 對於前端的頁面顯示，其實這個有很多種方案，就看公司裡怎麼要求了。我這裡採用的是進度條，Bootstrap 的進度條元件，不僅方便簡單，而且也不失美觀。簡單的說一下實現原理，通過請求後臺伺服器，後臺伺服器計算出該登入使用者的資料完整度，比如說計算後的結果是 50%，那麼將這 50% 返回給前端的 Ajax 函式。前端的 Ajax 函式通過設定 Div 的寬度，以及樣式來改變進度條的顯示。 前端說完了，那麼該說說後臺伺服器了，後臺伺服器通過查詢登入使用者的使用者資訊，當然可能會涉及到多張表，然後查詢使用者資訊對應的權重，並與之進行匹配，將匹配好的權值進行計算，並把結果以 Json 的形式返回給前端。 方案二 第二種方案其實很簡單，就是查詢載入到頁面的使用者資訊，然後讀取各資訊屬性的權重，並計算資訊的完整度，最終通過改變 Div 的寬度和樣式來顯示進度條。 很顯然，這種方法雖然簡單，而且不用請求後臺伺服器，但是，這種方法有很大的限制，那就是頁面如果沒有顯示全部的資訊屬性的話，資訊完整度的計算還是要請求伺服器的。還有就是如果前端用的是框架載入的區域性頁面，那麼顯示使用者資訊的頁面與顯示資訊完整度的頁面沒有在一塊的話，那麼就無法進行查詢，這也是一大限制。

我的方案

通過對比以上兩種方案，以及現有系統的特點，我還是選擇了第一種方案，採用靈活的方式設定屬性的權重，通過讀取配置檔案獲取權重。然後，前端用的是 Bootstrap 的進度條元件。

結束語

很多時候，我們都是想著怎樣方便、怎樣省事怎麼做，孰不知，這些看似省事的元件其實也是一把雙刃劍，固然我們用上了，功能也實現了，但它的原理你還是不知道，你只能去依賴他做的元件。因此，在用這些開源元件的時候，我們也要多問一句，到底他是怎麼實現的，如果是我，我應該怎麼去實現。 當然，如果沒有現成的元件的時候，那我們不得不去自己寫了，其實這也是一種好事，雖然在某種程度上麻煩了點，但是搞明白了原理，就簡單多了。 好了，理論說了一大堆，枯都枯死了。下一篇文章就來真的。。。