對select元件的封裝

引言:

在我們平時開發過程中，可能都會使用到下拉框這個元件，裡面的值要麼是動态的，要麼是靜态的，但是友善日後的維護，大多數都會将他配置成代碼項封裝成集合，通過周遊，生成動态的資料，這個資料都是從跳轉的控制器以集合的形式帶過來，這會導緻每寫一個select都要從背景把這個集合帶過來嗎，然後再去周遊，這從代碼的設計角度來看，非常的臃腫，很難實作低耦合，除非下拉框裡面的資料是業務中産生的資料，不得不這樣做。接下來就講述下我的簡單封裝:

引用方式:我隻需要使用select元件，然後再model屬性中添上我們對應代碼項中的編碼就可以了，

具體實作的邏輯

首先在所有的頁面引入以下的js,可以将這段js放在一個公用的js裡面，就不需要我們單獨的調用了，這裡面主要通過周遊頁面中所有class為model的元件，然後以此周遊，拿到model屬性對應的值也就就代碼項編碼，這裡是（"MKGL"），通過使用ajax請求到背景的controller裡拿到代碼項的集合，通過json傳回來之後，在進行解析周遊生成動态的下拉框值，由于這裡使用的是bootstrap select元件，在拼接好option之後需要進行元件的重新整理。這樣就可以了

主要的js片段

最後我們看看對應背景子產品，這個controller可以寫在通用的controller下,背景拿到model之後，直接去代碼項的表中尋找這個集合，由于我這裡是放在ehcache緩存裡面的，我直接從緩存中取出來的，不過邏輯都一樣的，然後以json格式傳回到前台進行解析。

selectcontroller

到這裡，小小的封裝就做好了，功能簡單，但很使用，希望大家能喜歡，雖然說不要重複造輪子，但是我覺得對自己做的東西進行小小的封裝，也是對日後的開發提供一種便利。

感謝大家能看到這裡，文中講的不正确的地方，歡迎在下方留言，我會及時修正。

歡迎大家關注我的公衆号，會不定時更新技術幹貨。