【提问】封装JS

Question

<script type="text/javascript">
        function PickerFrom_OnDateChange(sender, eventArgs) {
            var fromDate = PickerFrom.getSelectedDate();
            var toDate = PickerTo.getSelectedDate();
            CalendarFrom.setSelectedDate(fromDate);
            if (fromDate > toDate) {
                PickerTo.setSelectedDate(fromDate);
                CalendarTo.setSelectedDate(fromDate);
            }
        }
        function PickerTo_OnDateChange(sender, eventArgs) {
            var fromDate = PickerFrom.getSelectedDate();
            var toDate = PickerTo.getSelectedDate();
            CalendarTo.setSelectedDate(toDate);
            if (fromDate > toDate) {
                PickerFrom.setSelectedDate(toDate);
                CalendarFrom.setSelectedDate(toDate);
            }
        }
        function CalendarFrom_OnChange(sender, eventArgs) {
            var fromDate = CalendarFrom.getSelectedDate();
            var toDate = PickerTo.getSelectedDate();
            PickerFrom.setSelectedDate(fromDate);
            if (fromDate > toDate) {
                PickerTo.setSelectedDate(fromDate);
                CalendarTo.setSelectedDate(fromDate);
            }
        }
        function CalendarTo_OnChange(sender, eventArgs) {
            var fromDate = PickerFrom.getSelectedDate();
            var toDate = CalendarTo.getSelectedDate();
            PickerTo.setSelectedDate(toDate);
            if (fromDate > toDate) {
                PickerFrom.setSelectedDate(toDate);
                CalendarFrom.setSelectedDate(toDate);
            }
        }
        function ButtonFrom_OnClick(event) {
            if (CalendarFrom.get_popUpShowing()) {
                CalendarFrom.hide();
            }
            else {
                CalendarFrom.setSelectedDate(PickerFrom.getSelectedDate());
                CalendarFrom.show();
            }
        }
        function ButtonTo_OnClick(event) {
            if (CalendarTo.get_popUpShowing()) {
                CalendarTo.hide();
            }
            else {
                CalendarTo.setSelectedDate(PickerTo.getSelectedDate());
                CalendarTo.show();
            }
        }
        function ButtonFrom_OnMouseUp(event) {
            if (CalendarFrom.get_popUpShowing()) {
                event.cancelBubble = true;
                event.returnValue = false;
                return false;
            }
            else {
                return true;
            }
        }
        function ButtonTo_OnMouseUp(event) {
            if (CalendarTo.get_popUpShowing()) {
                event.cancelBubble = true;
                event.returnValue = false;
                return false;
            }
            else {
                return true;
            }
        }
    </script>
<div>
        Start Date:
        <table cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td onmouseup="ButtonFrom_OnMouseUp(event)">
                    <ComponentArt:Calendar ID="PickerFrom" runat="server" PickerFormat="Custom" PickerCustomFormat="yyyy MM d , H:mm:ss"
                        ControlType="Picker" SelectedDate="" PickerCssClass="picker" TitleType="VisibleDateText"
                        AMDesignator="AM" PMDesignator="PM">
                        <ClientEvents>
                            <SelectionChanged EventHandler="PickerFrom_OnDateChange" />
                        </ClientEvents>
                    </ComponentArt:Calendar>
                </td>
                <td style="font-size: 10px;">
                    &nbsp;
                </td>
                <td>
                    <img id="calendar_from_button" alt="" onclick="ButtonFrom_OnClick(event)" onmouseup="ButtonFrom_OnMouseUp(event)"
                        class="calendar_button" src="images/btn_calendar.gif" />
                </td>
            </tr>
        </table>
        <ComponentArt:Calendar runat="server" ID="CalendarFrom" AllowMultipleSelection="false"
            AllowWeekSelection="false" AllowMonthSelection="false" ControlType="Calendar"
            PopUp="Custom" PopUpExpandControlId="calendar_from_button" AutoTheming="true"
            Width="170" Height="100" DayNameFormat="Full" DayNames="Sun,Mon,Tue,Wen,Thu,Fri,Sat"
            MonthNames="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec," SelectedDate="">
            <ClientEvents>
                <SelectionChanged EventHandler="CalendarFrom_OnChange" />
            </ClientEvents>
        </ComponentArt:Calendar>
        <br />
        <br />
        Finish Date:
        <table cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td onmouseup="ButtonTo_OnMouseUp(event)">
                    <ComponentArt:Calendar ID="PickerTo" runat="server" PickerFormat="Custom" PickerCustomFormat="yyyy MM d , H:mm:ss"
                        ControlType="Picker" SelectedDate="" PickerCssClass="picker">
                        <ClientEvents>
                            <SelectionChanged EventHandler="PickerTo_OnDateChange" />
                        </ClientEvents>
                    </ComponentArt:Calendar>
                </td>
                <td style="font-size: 10px;">
                    &nbsp;
                </td>
                <td>
                    <img id="calendar_to_button" alt="" onclick="ButtonTo_OnClick(event)" onmouseup="ButtonTo_OnMouseUp(event)"
                        class="calendar_button" src="images/btn_calendar.gif" />
                </td>
            </tr>
        </table>
        <ComponentArt:Calendar runat="server" ID="CalendarTo" AllowMultipleSelection="false"
            AllowWeekSelection="false" AllowMonthSelection="false" ControlType="Calendar"
            PopUp="Custom" PopUpExpandControlId="calendar_to_button" AutoTheming="true" Width="170"
            Height="100" DayNameFormat="Full" DayNames="Sun,Mon,Tue,Wen,Thu,Fri,Sat" MonthNames="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,"
            PickerCustomFormat="yyyy d MM hh:mm:ss">
            <ClientEvents>
                <SelectionChanged EventHandler="CalendarTo_OnChange" />
            </ClientEvents>
        </ComponentArt:Calendar>
        <br />
        <br />
        <hr />
        <asp:Label ID="lblResult" runat="server"></asp:Label><br />
        <asp:Button ID="submit" runat="server" OnClick="submit_Click" Text="显示" />
    </div>这段代码四个CA控件(calendar控件)，选择日期时间的。
他里面客户端JS都是每一个动作就需要一个处理函数。
我想封装下。可是做不好。谁帮我看下。

Answer 1

发现那些如onchnage onDatechange onMouseUP之类的这个处理函数
里面做的事情都是一些控件的显示或者赋值之类的
我想想把这些ondatechange 之类的级封装起来。传个控件ID过去，然后根据传的ID生成名字不同的处理函数
然后做的事情呢，其实都是样，也就是根据ID不同来做事情。

Answer 2

http://www.builder.com.cn/2007/0830/478209.shtml看看这个，不抢分了，- -~

Answer 3

 我不是想把JS和CSS封装到控件里
而是想把那些凌乱的JS给封装起来
根据传递的控件ID生成不同的处理函数

Answer 4

引用12#我不是想把JS和CSS封装到控件里
而是想把那些凌乱的JS给封装起来
根据传递的控件ID生成不同的处理函数
下载去参考下...
asp.net开发常用javascript函数封装（c#）版
http://download.csdn.net/source/1539125

Answer 5

你用 sender.id应该就可以的现在的你改写下就行，不用封装

Answer 6

sender 就是具体的事件源你将多个控件 绑定同一事件 通过 sender 就可以区分出具体控件了

Answer 7

恩，可是在我这个例子里好像不能这么用。
看这一个处理函数function PickerFrom_OnDateChange(sender, eventArgs) {
            var fromDate = PickerFrom.getSelectedDate();
            
            CalendarFrom.setSelectedDate(fromDate);
          
        }
这里要是我用sender 这属性的话在函数里面也只能判断一个控件出来
就变成下面这样的代码。
var fromDate = sender.getSelectedDate();
而下面这句CalendarFrom.setSelectedDate(fromDate);
这个CalendarFrom还是要静态的去写。这样还是达不到我想要的。
用sender这两个处理函数都没办法组成一个。function PickerFrom_OnDateChange(sender, eventArgs) {
            var fromDate = PickerFrom.getSelectedDate();
            
            CalendarFrom.setSelectedDate(fromDate);
          
        }
和下面这个
function PickerTo_OnDateChange(sender, eventArgs) {
           
            var toDate = PickerTo.getSelectedDate();
            CalendarTo.setSelectedDate(toDate);
         
        }
///////CalendarTo和CalendarFrom是两个控件。
/* 不知道能不能看懂，感觉说的不太好。*/

Answer 8

这两个处理函数还有可能用sender去做。
不过这两个函数都没有用sender参数，就用了一个event function ButtonFrom_OnClick(event) {
            if (CalendarFrom.get_popUpShowing()) {
                CalendarFrom.hide();
            }
            else {
                CalendarFrom.setSelectedDate(PickerFrom.getSelectedDate());
                CalendarFrom.show();
            }
        }
        function ButtonTo_OnClick(event) {
            if (CalendarTo.get_popUpShowing()) {
                CalendarTo.hide();
            }
            else {
                CalendarTo.setSelectedDate(PickerTo.getSelectedDate());
                CalendarTo.show();
            }
        }
我把这两个去试试看

Answer 9

你通过 sender 来获知 究竟是谁触发了事件从而分别执行不同的代码将相同的代码放在 判断外执行

Answer 10

囧，发现傻了，在里面可以判断的。
如果是pickerfrom 就调用calendarfrom
如果是pickerto就调用calendarto

Answer 11

你的代码 可能连判断都不需要var fromDate = (sender as ComponentArt:Calendar).getSelectedDate();就可以了ComponentArt:Calendar 只是意思，具体类型你自己看下

Answer 12

可能还是需要判断，因为下面还有别的一些判断操作。判断calendar是否显示了
显示就隐藏，隐藏就显示