jQuery 学习笔记（函数调用机制）

最近在学前端框架amazeui，之前用其中的CSS样式搭建了一个伪360网页，学会了点布局的东西，但是始终觉得有点无聊。所以这几天就开始研究jquery代码了。

对于我这样一个初学者来说，有很多东西都只能用懵逼来形容，比如我看到这么一段代码（复制自amazeui）：

var checkin = $myStart2.datepicker({
      onRender: function(date, viewMode) {
        // 默认 days 视图，与当前日期比较
        var viewDate = nowDay;

        switch (viewMode) {
          // moths 视图，与当前月份比较
          case 1:
            viewDate = nowMoth;
            break;
          // years 视图，与当前年份比较
          case 2:
            viewDate = nowYear;
            break;
        }

        return date.valueOf() < viewDate ? 'am-disabled' : '';
      }
    }).on('changeDate.datepicker.amui', function(ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
          var newDate = new Date(ev.date)
          newDate.setDate(newDate.getDate() + 1);
          checkout.setValue(newDate);
        }
        checkin.close();
        $('#my-end-2')[0].focus();
    }).data('amui.datepicker');

看这里面的写法，简单的来说就是：

var checkin = $mystart2.datapicker().on().data();

我一开始是以类调用方法来理解的，即datapicker()里面包含了on()这个方法，on()里面包含了data()这个方法。。。

后来想了一下，不太对呀，on()是一个监听事件，应该是对任意一个控件就可以使用的，哪来那么复杂的继承什么的。。。

那这莫非是 -- 同时调用多个方法？好吧，我把代码改了一下，效果是一样的：

datepicker1 = $myStart2.datepicker({  //设置日期
            // datepicker1生成了一份日历
            onRender: function(date, viewMode) {
                // onRender是一个方法，其在日历生成后触发，用以渲染
                // 传递所设定的日期，以及viewMode -- 0,1,2分别表示日月年
                // 默认 days 视图，与当前日期比较
                var viewDate = nowDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = nowMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = nowYear;
                        break;
                }

                return date.valueOf() < viewDate ? 'am-disabled' : '';
                // 对每一个日期都作判断，设定其状态是disable或者able
            }
        })
        datepicker1.on('changeDate.datepicker.amui', function(ev) {   /*设置日期结束赋值后的动作*/
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);   /*禁用日期必须比设置日期多一天*/
            }
            checkin.close();
            $('#my-end-2')[0].focus();   /*聚焦到禁用日期上*/
        })
        var checkin = datepicker1.data('amui.datepicker');  // 所设置的具体日期

也就是说，第一段代码干了三件事情：

1. 初始化了日历datapicker()；

2. 用了onRender来渲染了datapicker；

3. 把日历中选中的具体日期赋给了checkin。

也就是说，这三个方法，其实只是写在一起而已，没有什么血缘关系。。JS代码原来可以这么任性- -，好吧我一个初学者确实水平不够。

然后我还有第二个问题。。。。这个叫做datapicker的类中，写法是这样的：

XX.datapicker({
   onRender: function(data,  viewMode){
           ........
           return XX;
    }
})        

这种写法好猎奇，仔细一看的话会发现，如果onRender是datapicker中的一个方法，那么不应该写成：datapicker.onRender(data, viewMode)之类的吗？

后来我去看了一下jQuery UI关于datapicker的描述，发现里面有一些方法是这样的：

onClose : function(dateText, inst)
    当日期面板关闭后触发此事件（无论是否有选择日期），参数为选择的日期和当前日期插件的实例。
    初始：$('.selector').datepicker({ onClose: function(dateText, inst) { ... } });

原来如此，也就是说，上面的onRender也是一个触发事件，虽然AMUI官方没有讲，我的理解就是，当日历初始化后出发onRender事件，它会把日历上所有的日期都作为参数传递给function()，然后对每个日期进行判断，如果是禁止日期，则返回值“am-disabled”，从而将该日期变成不可选择，否则返回空，即该日期可以选择，这样就可以实现对部分日期的禁用。

至于这个返回值是怎么作用到datapicker上的，我现在也还没搞懂的说。。。。

另外还有关于绑定时间on('event', function(variable))这种jquery中最经典的用法，举个amazeui中的例子：

$('#my-start').datepicker().on('changeDate.datepicker.amui', function(event) {    /*'changeDate.datepicker.amui'触发返回event参数，内含date成员可提取日期信息*/
            if (event.date.valueOf() > endDate.valueOf()) {
                $alert.find('p').text('开始日期应小于结束日期！').end().show();
            } else {
                $alert.hide();
                startDate = new Date(event.date);
                $('#my-startDate').text($('#my-start').data('date'));  /*把日历控件选择的时间赋值到text中显示*/
            }
            $(this).datepicker('close');   /*日期选择完后关闭日历控件*/
        });

注释里面已经说明了，当日期改变时，这段代码就会被触发，然后会把时间参数，即event传递给function，这样就可以获取到事件发生时的相关信息。

今天还看了一下所谓的类创建方法（参考了http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html）

function People(name)
    {
        this.name=name;
//对象方法
        this.Introduce=function(){
            alert("My name is "+this.name);
        }
    }
    //类方法
    People.Run=function(){
        alert("I can run");
    }
    //原型方法
    People.prototype = {
        IntroduceChinese :function () {  /*增加IntroduceChinese这个方法*/
        /*        prototype本质上是对类的克隆，但是不会克隆同名函数
        若需要调用其克隆母体的同名函数，则需要实例化类后，用call函数来调用*/
            alert("我的名字是" + this.name);
        },

        IntroduceDirtyWord: function(){
            alert("在下坂本，有何贵干！");
        }
    }

    //测试

    var p1=new People("Windking");

    p1.Introduce();

    People.Run();

    p1.IntroduceChinese();

    p1.IntroduceDirtyWord();

这段代码其实说了很多问题：

1. 类方法与对象方法。如Run()是类方法，而IntroduceChinese()是对象方法。

2. prototype的用法，prototype返回的是对象原型类型的引用，也就是说 A.Prototype = new B() 是把B中的所有方法和属性都克隆给了A。在代码例子中，我们使用的是A.Prototype = {method1:function(){}, method2:function(){}}这样的语法，其实也就拓展了A的方法，因此People的实例p1中拥有了通过prototype定义的方法。