對select組件的封裝

引言:

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

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

具體實現的邏輯

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

主要的js片段

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

selectcontroller

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

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

歡迎大家關注我的簡書賬號，會不定時更新技術乾貨。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！