与上一篇有些类似之处，都是在处理前端页面不断增多，页面间不断的拼接与嵌套，页面与页面间的函数方法的命名和dom元素一样出现了命名头疼的问题，比如说在easyUI前端框架下就是如此，我的解决办法还是采用数据结构的方法，不同面板，不同页面间的函数均放在数据结构下进行维护和管理，采用闭包的方法防止众多的函数方法的重名，命名混乱，容易引起歧义等问题。
我建议，一个面板中的方法最好命名在一个闭包里，防止众多的函数方法的干扰，它的最大的特点是闭包外面的方法不能随意引用闭包内部的函数，这样假设在闭包A中有一个命名为aa的函数，那么在闭包B中同样可以使用aa为函数名，同样也不会引起函数冲突问题，同时我建议dom元素的事件函数直接采用id名称来命名，这样方便理解函数与dom节点之间的对应关系，降低命名难度的同时更加的方便与理解与使用。而闭包内的工具类直接独立出来，并提供给外部一个访问的接口，这样，方便于其它页面，其它函数对于工具类的调用。
我们仍以layout->dialog->tab->tab1->panel中的dom元素为例来说明，在layout中我们仍以eastUp面板区域为例在说明，此时我们创建的对象就不能使var eu=new Object()了，因为这是之前的dom节点初始化所采用的命名方式，此时我们为了区别，另起一个名为euf(eastUp Function)的对象，创建方式是var euf=new Object().
详细代码如下：
<!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> <a id="eu_dialog_tab_tab1_panel_1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮一</a> <a id="eu_dialog_tab_tab1_panel_2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮二</a> <a id="eu_dialog_tab_tab1_panel_3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮三</a> <a id="eu_dialog_tab_tab1_panel_4" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮四</a> <a id="eu_dialog_tab_tab1_panel_5" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮五</a> <a id="eu_dialog_tab_tab1_panel_6" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">按钮六</a> <input id="eu_dialog_tab_tab1_panel_7"> <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'} ] } } } } } //函数数据结构的创建 var euf=new Object(); euf={ dialog:{ tab:{ tab1:{ panel:{ } } } } } //函数的调用，采用闭包的方式 euf.dialog.tab.tab1.panel=(function(){ var obj=new Object(),util=new Object(); //按钮的定义 obj.eu_dialog_tab_tab1_panel_1=eu_dialog_tab_tab1_panel_1; obj.eu_dialog_tab_tab1_panel_2=eu_dialog_tab_tab1_panel_2; obj.eu_dialog_tab_tab1_panel_3=eu_dialog_tab_tab1_panel_3; obj.eu_dialog_tab_tab1_panel_4=eu_dialog_tab_tab1_panel_4; obj.eu_dialog_tab_tab1_panel_5=eu_dialog_tab_tab1_panel_5; obj.eu_dialog_tab_tab1_panel_6=eu_dialog_tab_tab1_panel_6; //工具类的定义 util.method1=method1; util.method2=method2; util.method3=method3; util.method4=method4; util.method5=method5; util.method6=method6; util.method7=method7; //函数的调用 obj.eu_dialog_tab_tab1_panel_1(); obj.eu_dialog_tab_tab1_panel_2(); obj.eu_dialog_tab_tab1_panel_3(); obj.eu_dialog_tab_tab1_panel_4(); obj.eu_dialog_tab_tab1_panel_5(); obj.eu_dialog_tab_tab1_panel_6(); function eu_dialog_tab_tab1_panel_1(){ $('#eu_dialog_tab_tab1_panel_1').click(function(){ util.method1(); }); } function eu_dialog_tab_tab1_panel_2(){ $('#eu_dialog_tab_tab1_panel_2').click(function(){ util.method2(); }); } function eu_dialog_tab_tab1_panel_3(){ $('#eu_dialog_tab_tab1_panel_3').click(function(){ util.method3(); }); } function eu_dialog_tab_tab1_panel_4(){ $('#eu_dialog_tab_tab1_panel_4').click(function(){ util.method4(); }); } function eu_dialog_tab_tab1_panel_5(){ $('#eu_dialog_tab_tab1_panel_5').click(function(){ util.method5(); }); } function eu_dialog_tab_tab1_panel_6(){ $('#eu_dialog_tab_tab1_panel_6').click(function(){ util.method6(); }); } function method1(){ $.messager.alert('按钮一','我被点击了！'); } function method2(){ $.messager.alert('按钮二','我被点击了！'); } function method3(){ $.messager.alert('按钮三','我被点击了！'); } function method4(){ $.messager.alert('按钮四','我被点击了！'); } function method5(){ $.messager.alert('按钮五','我被点击了！'); } function method6(){ $.messager.alert('按钮六','我被点击了！'); } /** * 初始化select下拉列表框工具类 * @param objId 入参为id */ function method7(objId){ $('#'+objId).combobox({ data:eu.dialog.tab.tab1.panel.eu_dialog_tab_tab1_panel_1, valueField: 'id', textField: 'text', editable:false, panelHeight:"auto" }) } return util; })() //外部引用闭包内的工具类 //初始化select下拉列表框 euf.dialog.tab.tab1.panel.method7('eu_dialog_tab_tab1_panel_7'); </script> </body> </html> 显示结果如下：
