Welche Methoden gibt es zum Erstellen eines JQuery-Plug-Ins? So erstellen Sie ein JQuery-Plug-In

In diesem Artikel erfahren Sie, welche Methoden zum Erstellen von JQuery-Plug-Ins gelten. Die Methode zum Erstellen eines JQuery-Plug-Ins hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

1. Es gibt drei Möglichkeiten, ein jQuery-Plugin zu erstellen

1. Erweitern Sie jQuery durch $.extend()

2 .fn-Methode

3. Verwenden Sie die Widget-Factory-Methode der jQuery-Benutzeroberfläche, um

über $.widget() zu erstellen. Sie wird nach der Erstellung über $.myfunction() aufgerufen kann für das angegebene Element nicht aufgerufen werden.

Methode 3 ist im Vergleich zu Methode 2 zu kompliziert.

Methode 2 ist die häufig verwendete Methode zum Erstellen von JQ-Plug-Ins. Kann bestimmte Elemente bearbeiten. Zum Beispiel $('#title').myfunction();

2. jQuery-Plug-in-Erstellungsformat

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}

Wenn Sie Kettenaufrufe unterstützen möchten, geben Sie es einfach zurück.

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    return this.css('color', 'red');
}

3. Lassen Sie das JQuery-Plugin Parameter akzeptieren und verwenden Sie die $.extend-Methode

$.fn.myPlugin = function(options) {
    var defaults = {//设置默认值
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改，为了保持变量defaults的值不变应该使用以下代码
    //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

4. Objektorientierte JQuery-Plugin-Entwicklung

Für zukünftigen Code Wartung und Lesbarkeit, wir Plug-ins können mit einem objektorientierten Ansatz entwickelt werden.

var Beautifier = function(ele, opt) {
    this.$element = ele,  //获取当前选中的jq对象。
    this.defaults = {
        'color': 'red',
        'fontSize': '12px'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize
        });
    }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}

Verwandte Empfehlungen:

jQuery einfaches Scroll-Plug-in

Code-Analyse des jQuery-Erstellungs-Plug-ins_jquery

Detaillierte Erläuterung der jQuery-Plug-in-Entwicklungsmethoden

10 Vorschläge, die Ihnen helfen, bessere jQuery-plug-ins_jquery zu erstellen

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Erstellen eines JQuery-Plug-Ins? So erstellen Sie ein JQuery-Plug-In. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!