关于拓展jQuery功能插件的写法

Posted 2020-09-07

有两种方法：

　　1.jQuery.fn.extend()

　　　　用于将一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法

　　　　　　例子：

<span id="test">测试文字</span>　　　　　　//需要控制的节点
<input type="color" id="color">　　　　　　//获取color色值
<script>
;(function($){　　　　　　　　　　　　　　//利用闭包特性 ，$表示形参。　　形参是“形式参数”，不实际存在变量，在定义函数体中用来接收参数
  $.fn.extend({　　　　　　　　　　　　　　　　//jQuery.fn.extend
    "color":function(value){　　　　　　　　　　//拓展color实例方法　　value是形参
      return this.css("color",value);      　　//返回颜色设定
    }             
  }); 
})(jQuery);　　　　　　　　　　　　　　　　//传入了jQuery实参，　　　　实参是在调用函数时传入的参数，要有确定的值
$(‘#color‘).on(‘change‘,function(){　　　　　　//对节点绑定change
  $(‘#test‘).color($(this).val());　　　　　　//调用color实例方法，$(this).val()是实参，有实际值。
})
</script> 

　　2.jQuery.extend()

　　　　jQuery.extend()方法用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象

　　　　　　例子

function foo(options){
           return options=jQuery.extend({　　　　　　　　//options内的值与默认参数进行比对，如果冲突，options的值会替代默认参数
                name:"old",
                age:18,
                sex:"man"
            },options)
    }
    console.log(foo({name:‘new‘,age:25}));