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定义的方法。