前端多頁面情況下id的命名與初始化
阿新 • • 發佈：2018-12-26
id的命名，貌似就是給dom節點隨便起個名字的事，只要不重複了就行，這個看似簡單，實際上有時候卻比較的麻煩。
在編寫前端頁面時，隨著頁面的不斷增多，頁面間不斷巢狀，不斷拼接的前提下，由於dom元素的不斷增多，各頁面dom元素的id命名和dom元素的初始化就變得更加的棘手了，尤其是在當引入比如說easyUI等的前端框架時更是如此。
由於前端框架，比如說easyUI會將眾多的頁面拼接在同一個頁面上，這樣的好處是方便於dom元素的操作，比如說取值與賦值操作；同時也省去了多頁面間傳值的麻煩，但是它的缺點就是由於眾多的頁面被拼接在了同一個頁面上，這樣就容易造成id衝突，如果要避免這些頁面的id衝突，要給眾多的頁面都取一個全域性的唯一的名字，那光是命名就已經是非常讓人頭疼的事情了。而解決辦法就是採用資料結構的方法，讓所有的id都採取某一種特定的規範，這樣的好處是方便於dom節點的操作與管理。
示例如下：
假如說有一個layout佈局，佈局上的按鈕彈出dialog對話方塊，對話方塊中又有tab選項卡，在tab1中又有panel面板，在該面板上我們要初始化一個select下拉列表框的資料，我們的id命名應該是：元件名稱_元件名稱。。。_序號。比如說我們這裡的就是這樣這種情況：eu.dialog.tab.tab1.panel.eu_dialog_tab_tab1_panel_1，其中eu代表的就是layout佈局的右上角（eastUp），下面是完整的程式碼結構：
顯示的結果：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../../js/jquery-easyui-1.5.1/themes/default/easyui.css"> <link rel="stylesheet" href="../../js/jquery-easyui-1.5.1/themes/icon.css"> <link rel="stylesheet" href="../../js/jquery-easyui-1.5.1/demo/demo.css"> <script src="../../js/jquery-easyui-1.5.1/jquery.min.js"></script> <script src="../../js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script> </head> <body> <input id="eu_dialog_tab_tab1_panel_1"> <script type="text/javascript"> var eu=new Object(); eu={ dialog:{ tab:{ tab1:{ panel:{ eu_dialog_tab_tab1_panel_1:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_tab_tab1_panel_2:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_tab_tab1_panel_3:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ] } }, tab2:{ panel:{ eu_dialog_tab_tab2_panel_1:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_tab_tab2_panel_2:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_tab_tab2_panel_3:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ] } }, tab3:{ panel:{ eu_dialog_tab_tab3_panel_1:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_tab_tab3_panel_2:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_tab_tab3_panel_3:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ] } } }, buttom:{ eu_dialog_buttom_1:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_buttom_2:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ], eu_dialog_buttom_3:[ {id:0,text:'node1'}, {id:1,text:'node2'}, {id:2,text:'node3'} ] } } }; //初始化 $('#eu_dialog_tab_tab1_panel_1').combobox({ data:eu.dialog.tab.tab1.panel.eu_dialog_tab_tab1_panel_1, valueField: 'id', textField: 'text', editable:false, panelHeight:"auto" }) </script> </body> </html>
