Heim >Web-Frontend >js-Tutorial >Welche Methoden gibt es zum Erstellen eines JQuery-Plug-Ins? So erstellen Sie ein JQuery-Plug-In

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

不言
不言Original
2018-08-15 10:33:042596Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn