jQuery参数的灵活运用----$.extend();

JavaScript函数中参数最常见的传送方式就是类似这种：

function parameters(age,name){
    console.log(age);
    console.log(name);
}

也就是说，方法体内需要什么参数，就直接传什么参数，要几个传几个。
这种方式的缺点：
1，参数的位子被限制，也就是说age参数必须摆在首位，name必须摆在第二位。
2，参数的个数只能多，不能少，也就是说上述parameters()的参数个数必须是大于或者等于两个的，少于两个，函数会发生错误。
3，如果参数需要默认值，这种方式明显就无法满足了。

这样的话，就失去了参数的灵活性。当然，一般情况下这样传参数是没有问题的，特殊情况下，就满足不了了，比如在构造函数的时候，参数个数无法确定，参数需要默认值…

参数的映射与扩展

什么是参数的映射呢？ 实际上就是把所有参数封装成一个json对象，将这个json对象当作参数进行传送。

什么是参数的扩展呢？实际上就是对json对象集合的扩展，扩展方法就使用$.extend()函数。

栗子：

HTML代码：

<h4>Eunt mollit anim id est laborum</h4>

JavaScript代码：

jQuery.fn.shadow_extend = function(options){
  //this 表示jQuery对象
  var obj = {
    slices :"" ,
    opacity : "",
    zIndex :"",
    offset:function(i){
      return {x:i,y:i}
    }
  }
  var option = $.extend(obj,options);//参数扩展，options对obj扩展之后得到option

  this.each(function(){
    $obj = $(this); //将遍历出来的DOM元素转换成jQuery对象
    for(var i=0;i<option.slices;i++){
      //获取回调函数对象
      var offset = option.offset(i);   //参数中的回调函数
      $obj.clone().css({
        position:'absolute',
        left:$obj.offset().left + offset.x,
        top:$obj.offset().top + offset.y,
        opacity:option.opacity,
        zIndex:option.zIndex,
        margin: 0
      }).appendTo("body");;
    }
  })
}

调用函数代码：

$("h4").shadow_extend({
    slices:20,
    opacity:0.2,
    zIndex:-1,
    offset:function(i){
      return {x:i,y:i*2}
    }
})

结果：

---