jQuery extend 实现代码封装

Posted 2020-08-14

jQuery 有两种方式封装代码 $.extend 和 $.fn.extend，我们也称为封装插件

$.extend DEMO

// 封装
$.extend({
  say:function(options){ // options 也可以是多个参数 a, b, c
    var name= options.name|| ‘‘;
    var words = options.words || ‘‘;
    document.write(name + ‘ say: ‘ + words);
  }
})

// 调用
$.say({ // options 是多个参数时，$.say(a, b, c);
  name:‘Tom‘,
  words:‘hello‘
});
// 输出 Tom say: hello

$.fn.extend DEMO

<div id="man">man</div>
// 封装
$.fn.extend({
  talk:function(options){
    var defaults = {
        words:‘something‘
    }
    var opts = $.extend(defaults, options);
    var obj = $(this);
    obj.html(defaults.words);
  }
})

// 调用
$(‘#man‘).talk({ words:‘hi‘ });

由此可见，$.extend 可以直接调用，$.fn.extend 需要基于对象来调用