class 类封装jq的标准写法

jQuery插件开发模式

说到jQuery插件的编写，起初我把它当做封装一个方法那样简单，这显然是错的，因为这让我一开始完全不知道如何下手去编写一个插件。所以要先了解一下jQuery插件的三种开发方式：

1. 通过$.extend()来扩展jQuery

2. 通过$.fn 向jQuery添加新的方法

3. 通过$.widget()应用jQuery UI的部件工厂方式创建

第三种方法是用来开发更高级的jQuery部件的。

第一种方法过于简单，仅仅是在jQuery命名空间或者可以理解为在jQuery身上添加了一个静态方法而已，调用时直接通过$.myfunction()调用，而不需要选中DOM元素，这种方法比较适用于定义一些辅助方法，比如定义一个console来输出特定格式的信息，然后再任何需要的地方调用这个方法。比如下面的例子：

$.extend({
    logTime: function(){
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth()+1,
            d = now.getDate();
        console.log(y +'-'+ m +'-'+ d);
    }
});
/*调用*/
$.logTime();

通过$.fn 向jQuery添加新的方法(插件开发)

基本方法$.fn.extend(obj) （为什么这里是$.fn.extend()而不是$.fn呢） 首先先来看看$.fn是什么意思

jQuery.fn = jQuery.prototype = {
    init:function(selector,context){...};
};

完整写法：

// jquery插件 class类写法
;(function($){
    class Banner{
        constructor(ele, opts){
            this.$element = ele;
            this.defaults = {}
            this.options = $.extend(this.defaults,opts)
        }
        init(){
            console.log($(this.$element))
        }
    }
    $.fn.mybanner = function(opts) {
       let ban = new Banner(this,opts);
       return ban.init();
    }
})(window.jQuery)
$("div").mybanner();