Erweitern ES6-Plugin zu jQuery-Prototyp

Question

Ich möchte etwas Hilfe bitten, weil ich mein klassisches jQuery (v2) -Plugin in ES6 mit Modul und Klasse nicht konvertieren kann.

In ECMAScript 5, können wir jQuery-Plugin in jQuery Prototyp wie folgt anhängen:

app.js - jQuery geladen via HTML <script> Tag

$.fn.myPlugin = function() {}; 
$('div').myPlugin(); 

Und es funktioniert :). In ES6, würde ich so etwas schreiben:

myPlugin.es6:

import $ from 'jquery'; 

export default class myPlugin extends $ { 
// Could i use constructor() method ??? 
} 

app.es6:

import $ from 'jquery'; 
import myPlugin from 'myPlugin.es6'; 

$('div').myPlugin(); 

Und schließlich ist es nicht funktioniert ...
Ich habe gesucht und keine Leute fragen diese Frage vorher.
Ich benutze Babel, um ES6 in ES5 zu transponieren.

Answer 1

$.fn ist nur ein Objekt. Es gibt keine Magie beim Hinzufügen einer neuen Eigenschaft zu dem Prototyp $. Also ist der Code $.fn.myPlugin = function() {} gleich $.prototype.myPlugin = function() {}.

$.fn === $.prototype; // true

der Lage sein, eine Funktion auf das $ Objekt in einem Standardverfahren zu nennen ($('div').func()), müssen Sie diese Funktion auf das $ Objekt hinzuzufügen.

Sie fügen es nicht in Ihrem es6-Code hinzu.

So

import $ from 'jquery'; 

export default class myPlugin extends $ { 
// Could i use constructor() method ??? 
} 

Mittel (fast)

var myPlugin = function() {}; 

myPlugin.prototype = Object.create($.prototype); 

return { default: myPlugin }; 

Ich bin nicht sicher, dass Sie .FN $ verlängern sollte, aber vielleicht müssen Sie es.

Und mit

import $ from 'jquery'; 
import myPlugin from 'myPlugin.es6'; 

bedeutet es

var $ = require('jquery'); 
var myPlugin = require('myPlugin'); // a reference to the 'export.default' object from 'myPlugin.es6' 

Daher besteht keine Verbindung zwischen $.fn Objekt ist und myPlugin Funktion.

Sie sollten die Verbindung irgendwo erstellen. Es könnte wie plugins in einem speziellen Modul, wo Sie alle benötigten Plugins in das $.fn Objekt injizieren werden:

import $ from 'jquery'; 
import plugin1 from 'plugin1.es6'; // should contain 'name' 
import plugin2 from 'plugin2.es6'; 
... 
import plugin10 from 'plugin10.es6'; 

[plugin1, plugin2, ..., plugin10].forEach(plugin => $.fn[plugin.name] = plugin); 

Oder Sie könnten eine ‚initialisieren‘ Methode, um das exportierte Objekt in ‚myplugin hinzuzufügen.es6 ', und rufen Sie es vor der ersten Verwendung: init($) { $.fn.myPlugin = myPlugin; }

Und so weiter.

Answer 2

Sie installieren neue Methoden auf dem jQuery-Prototyp in ES6, wie Sie es immer getan haben. Nichts hat sich für sie verändert. Sie werden jQuery nicht von der Unterklasse ableiten, daher macht es keinen Sinn, class oder extends zu verwenden.

// myPlugin.es6: 
import $ from 'jquery'; 

$.fn.myPlugin = function() { 
    … 
}; 

// app.es6: 
import $ from 'jquery'; 
import 'myPlugin.es6'; 

$('div').myPlugin();