Vraag Publieke functies vanuit een jQuery-plug-in


Ik ben dol op de jQuery plugin-architectuur, maar ik vind het frustrerend (waarschijnlijk vanwege een gebrek aan begrip van mijn kant) wanneer ik een verwijzing naar de plugin-instantie wil behouden om later toegang te krijgen tot eigenschappen of methoden in mijn code.

Bewerken: ik wil verduidelijken dat wat ik echt probeer te doen is een verwijzing naar de methoden en eigenschappen behouden die in de plug-in worden gebruikt, zodat ik ze later kan gebruiken

Laten we eens kijken naar een AJAX-laadpictogram. In een meer traditionele OOP-omgeving zou ik kunnen doen:

var myIcon = new AJAXIcon();
myIcon.start();
//some stuff
myIcon.stop();

De methoden en eigenschappen van mijn object worden opgeslagen op een variabele voor later gebruik. Als ik nu dezelfde functionaliteit in een jQuery-plug-in wil gebruiken, zou ik het vanuit mijn hoofdcode ongeveer zo noemen:

$("#myId").ajaxIcon()

Volgens afspraak moet mijn plug-in het oorspronkelijke jQuery-object dat is doorgegeven aan mijn plug-in retourneren, wat voor ketenbaarheid zorgt, maar als ik dat doe, verlies ik de mogelijkheid om toegang te krijgen tot methoden en eigenschappen van de plugin-instantie.

Nu weet ik dat je een openbare functie in mijn plug-in kunt aangeven, enigszins in de trant van

$.fn.ajaxIcon = function(options) {
    return this.each(function () {
        //do some stuff
    }
}

$.fn.ajaxIcon.stop = function() {
    //stop stuff
}

Echter, zonder de conventie van het retourneren van het oorspronkelijke jQuery-object te breken, kan ik geen verwijzing behouden naar het specifieke exemplaar van de plug-in waarnaar ik wil verwijzen.

Ik zou graag zoiets als dit kunnen doen:

var myIcon = $("myId").ajaxIcon(); //myIcon = a reference to the ajaxIcon 
myIcon.start();
//some stuff
myIcon.stop();

Nog ideeën?


31
2018-06-23 18:29


oorsprong


antwoorden:


Als u iets als het volgende doet:

(function($){

$.fn.myPlugin = function(options) {
    // support multiple elements
    if (this.length > 1){
        this.each(function() { $(this).myPlugin(options) });
        return this;
    }

    // private variables
    var pOne = '';
    var pTwo = '';
    // ...

    // private methods
    var foo = function() {
        // do something ...
    }
    // ...

    // public methods        
    this.initialize = function() {
        // do something ...
        return this;
    };

    this.bar = function() {
        // do something ...
    };
    return this.initialize();
}
})(jQuery);

Dan hebt u toegang tot al uw openbare methoden:

var myPlugin = $('#id').myPlugin();

myPlugin.bar();

Dit is hiervan overgenomen zeer nuttig artikel (Mei 2009) van trulyevil.com dat zelf een uitbreiding is Dit artikel (Okt 2007) van learningjquery.com.


89
2018-06-25 12:38



Ok, ik heb uitgezocht hoe dit te doen:

Plugin-code:

$.ajaxIcon.init = function(element, options) {
    //your initialization code

    this.start = function() {
         //start code
    }

    this.stop = function() {
         //stop code
    }
}

$.fn.ajaxIcon = function(options) {
    this.each(function () {
        //This is where the magic happens
        jQuery(this).data('ajaxIcon', new jQuery.ajaxIcon.init(this, opts));
    });

return this;
}

Gebruik het dan ergens anders in uw code:

var myIcon = $("#myId").ajaxIcon.data('ajaxIcon') 
// myIcon: a reference to the 'init' object specific to this plugin instance
myIcon.start();
myIcon.stop();

voila, antwoordde mijn eigen vraag :)


2
2018-06-23 19:33



Ik denk dat je zou kunnen bereiken wat je zoekt met zoiets als dit:

var myIcon = $("myId").ajaxIcon(); //myIcon = a reference to the ajaxIcon 
$.ajaxIcon.start(myIcon);//some stuff
$.ajaxIcon.stop(myIcon);

Ik heb het echter nog niet getest - ik heb geen toegang tot een omgeving waar ik die ATM kan doen


0
2018-06-23 19:07



De meeste jQuery-plug-ins die ik hier probeer te zien, gebruiken een anonieme scope en sluitingen om te verwijzen naar functies en variabelen die uniek zijn voor die instantie. Gebruik bijvoorbeeld het volgende patroon:

;(function ($) {
    // your code
})(jQuery);

Tussen het begin en het einde van de module kunt u alle gewenste functies declareren. Je vervuilt de globale naamruimte niet en je kunt toegang houden tot lokale variabelen via sluitingen, die veel van je problemen zouden kunnen oplossen. Wees ook niet bang om het te gebruiken $.data functies.


-1
2018-06-23 18:37