jq插件的封装 | 易学教程

jquery插件一般有三种开发方式：

{
1. 通过$.extend()来扩展jQuery---------------------$.extend()添加的函数时直接通过$符号调用，而不需要选中DOM元素（相当于给jQuery身上添加了一个静态方法）
2. 通过$.fn 向jQuery添加新的方法-----------------能处理DOM元素以及将插件更好地运用于所选择的元素身上
3. 通过$.widget()应用jQuery UI的部件工厂方式创建
}

具体用法如下：

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'Dude') + '!');
    }
})
$.sayHello(); //调用
$.sayHello('test'); //带参调用

2.形式如下：

$.fn.pluginName = function() {
    //your code
}

例子：

var testObj= function(el, opt) {
    this.$element = el,
    this.defaults = {
        'color': 'red',
        'fontSize': '12px',
        'textDecoration':'none'
    },
    this.options = $.extend({}, this.defaults, opt);//$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象，保留对象的默认值。
}
//定义testObj的方法
testObj.prototype = {
    changecss: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize,
            'textDecoration': this.options.textDecoration
        });
    }
}
$.fn.myPlugin = function(options) {
    //创建haorooms的实体
    var testIndividual= new testObj(this, options);
    //调用其方法
    return testIndividual.changecss();
}
//调用这个插件直接如下就可以
$(function() {
    $('a').myPlugin({
        'color': '#2C9929',
        'fontSize': '20px'
    });
});
//由于定义了全局变量testObj，为了兼容性，建议用自调用匿名函数包裹，即：
(function(){

})()

为了避免jquery和zeptojs冲突，将jquery的前缀“$”,修改为“jQuery”，有人将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行，那么我们的做法是，把代码包裹在如下里面：

;(function($,window,document,undefined){
    //我们的代码。。
})(jQuery,window,document);

补充

JQ插件标准的封装---闭包

<script type="text/javascript">
    (function ($) {
        //这里放入插件代码
    })(jQuery);
</script>

这是jQuery官方的插件开发规范，这样写是作用是：

避免全局依赖。
避免第三方破坏。
兼容jQuery操作符’$’和’jQuery’

这段代码在被解析时会形同如下代码：

var jq = function($) {
    // Code goes here
}; 
jq(jQuery);

-------------------------编写插件------------------------

$(function () {
    $.fn.插件名称 = function (options) {
        var defaults = {
            Event : "click", //触发响应事件
            msg : "Holle word!" //显示内容
        };
        var options = $.extend(defaults, options);
        var $this = $(this); //当然响应事件对象
        //功能代码部分
        //绑定事件
        $this.live(options.Event, function (e) {
            alert(options.msg);
        });
    }
});

-------------------------调用插件------------------------

$(function () {
    //绑定元素事件
    $("#test").插件名称({
        Event : "click", //触发响应事件
        msg : "插件原来就是这么简单!" //显示内容
    });
});

----------------------------布局------------------------------
<input type = "button" id = "test" value = "这是一个简单的插件调用" / >

原创：https://blog.csdn.net/u598975767/article/details/75543012

来源：https://www.cnblogs.com/cherishnow/p/10694718.html

标签

jquery

jquery事件

函数封装