不明之处，为什么多处用客户端事件，也不提供服务端方法

szjazz

看了示例和Appbox源代码，有多处还继续使用script 脚本来设置某些控件的事件OnClientClick，比如：FineUI的示例首页中的下拉菜单中的”展开、折叠“

1. <x:MenuButton ID="btnExpandAll" IconUrl="~/images/expand-all.gif" Text="展开菜单" EnablePostBack="false"  runat="server">
   
2.                                     </x:MenuButton>
   
3.                                     <x:MenuButton ID="btnCollapseAll" IconUrl="~/images/collapse-all.gif" Text="折叠菜单"
   
4.                                         EnablePostBack="false" runat="server">
   
5.                                     </x:MenuButton>

复制代码

1.     <script src="./js/default.js" type="text/javascript"></script>

复制代码

1. function onReady() {
   
2.     var btnExpandAll = Ext.getCmp(IDS.btnExpandAll);
   
3.     var btnCollapseAll = Ext.getCmp(IDS.btnCollapseAll);
   
4.     var mainMenu = Ext.getCmp(IDS.mainMenu);
   
5.     var mainTabStrip = Ext.getCmp(IDS.mainTabStrip);
   
6.     var windowSourceCode = Ext.getCmp(IDS.windowSourceCode);
   
7. 
   
8.     function getExpandedPanel() {
   
9.         var panel = null;
   
10.         mainMenu.items.each(function (item) {
    
11.             if (!item.collapsed) {
    
12.                 panel = item;
    
13.             }
    
14.         });
    
15.         return panel;
    
16.     }
    
17. 
    
18.     // 点击全部展开按钮
    
19.     btnExpandAll.on('click', function () {
    
20.         if (IDS.menuType == "menu") {
    
21.             mainMenu.expandAll();
    
22.         } else {
    
23.             var expandedPanel = getExpandedPanel();
    
24.             if (expandedPanel) {
    
25.                 expandedPanel.items.itemAt(0).expandAll();
    
26.             }
    
27.         }
    
28.     });
    
29. 
    
30.     // 点击全部折叠按钮
    
31.     btnCollapseAll.on('click', function () {
    
32.         if (IDS.menuType == "menu") {
    
33.             mainMenu.collapseAll();
    
34.         } else {
    
35.             var expandedPanel = getExpandedPanel();
    
36.             if (expandedPanel) {
    
37.                 expandedPanel.items.itemAt(0).collapseAll();
    
38.             }
    
39.         }
    
40.     });
    
41. 
    
42.     function createToolbar() {
    
43. 
    
44.         // 由工具栏上按钮获得当前标签页中的iframe节点
    
45.         function getCurrentIframeNode(button) {
    
46.             // 注意：button.ownerCt 是工具栏，button.ownerCt.ownerCt 就是当前激活的标签页。
    
47.             return Ext.DomQuery.selectNode('iframe', button.ownerCt.ownerCt.el.dom);
    
48.         }
    
49. 
    
50.         // 动态创建按钮
    
51.         var sourcecodeButton = new Ext.Button({
    
52.             text: "源代码",
    
53.             type: "button",
    
54.             cls: "x-btn-text-icon",
    
55.             icon: "./res.axd?icon=PageWhiteCode",
    
56.             listeners: {
    
57.                 click: function (button, e) {
    
58.                     windowSourceCode.box_show('./source.aspx?files=' + getCurrentIframeNode(button).attributes['src'].value, '源代码');
    
59.                     e.stopEvent();
    
60.                 }
    
61.             }
    
62.         });
    
63. 
    
64.         var openNewWindowButton = new Ext.Button({
    
65.             text: '新标签页中打开',
    
66.             type: "button",
    
67.             cls: "x-btn-text-icon",
    
68.             icon: "./res.axd?icon=TabGo",
    
69.             listeners: {
    
70.                 click: function (button, e) {
    
71.                     window.open(getCurrentIframeNode(button).src, "_blank");
    
72.                     e.stopEvent();
    
73.                 }
    
74.             }
    
75.         });
    
76. 
    
77.         var refreshButton = new Ext.Button({
    
78.             text: '刷新',
    
79.             type: "button",
    
80.             cls: "x-btn-text-icon",
    
81.             icon: "./res.axd?icon=Reload",
    
82.             listeners: {
    
83.                 click: function (button, e) {
    
84.                     getCurrentIframeNode(button).contentWindow.location.reload(); //.replace(href);
    
85.                     e.stopEvent();
    
86.                 }
    
87.             }
    
88.         });
    
89. 
    
90.         return new Ext.Toolbar({
    
91.             items: ['->', sourcecodeButton, '-', refreshButton, '-', openNewWindowButton]
    
92.         });
    
93.     }
    
94. 
    
95. 
    
96.     // 初始化主框架中的树(或者Accordion+Tree)和选项卡互动，以及地址栏的更新
    
97.     X.util.initTreeTabStrip(mainMenu, mainTabStrip, createToolbar);
    
98. 
    
99. 
    
100.     // 公开添加示例标签页的方法
     
101.     window.addExampleTab = function (id, url, text, icon) {
     
102.         X.util.addMainTab(mainTabStrip, id, url, text, icon);
     
103.     };
     
104. 
     
105. }
     

复制代码

甚至还有通过服务端来添加按钮的事件，比如Appbox的用户管理的新增按钮：

1. <ext:Button ID="btnNew" runat="server" Icon="Add" EnablePostBack="false" Text="新增用户">

复制代码

而在页面初始化过程里，代码设置控件的客户端事件

1. btnNew.OnClientClick = Window1.GetShowReference("~/admin/user_new.aspx", "新增用户");

复制代码

所有的这些，为什么不能直接用服务端的控件事件来呢，难道OnClick暂时还不能担当完成功能所需？

故而这些，有时看不明白代码或者说规划设计为什么要如此？，还请大师们、始祖们释疑！

swtseaman

这个我个人理解很简单，FineUI的确做的非常不错，绝大多数功能，如你说的这些客户端执行的功能服务端不是不可以完成，但三石这样做的目的（把代码写在客户端），就是为了尽量减少服务端压力，减少客户端和服务端的交互次数，所以尽可能的让能在客户端完成的事情都交给客户端。项目做多自然会明白这样做的好处了！