Rozszerzenie wtyczki ES6 na prototyp jQuery

Question

Chciałbym poprosić o pomoc, ponieważ nie mogę przekonwertować mojej klasycznej wtyczki jQuery (v2) w ES6 z modułem i klasą.

W ECMAScript 5, możemy dołączyć jQuery plugin do jQuery prototyp tak:

app.js - jQuery ładowane poprzez znacznik HTML <script>

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

I to działa :). W ES6, chciałbym napisać coś takiego:

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(); 

I wreszcie, to nie działa ...
Szukałem i nikt nie zadał już tego pytania.
Używam Babel do transpozycji ES6 do ES5.

Answer 1

$.fn to tylko obiekt. Nie ma żadnej magii po dodaniu nowej właściwości do prototypu $. Zatem kod $.fn.myPlugin = function() {} jest równy $.prototype.myPlugin = function() {}.

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

Aby móc wywołać funkcję na obiekcie $ w standardowy sposób ($('div').func()), trzeba dodać tę funkcję do obiektu $.

Nie dodajesz go do swojego kodu es6.

Zatem

import $ from 'jquery'; 

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

środki (prawie)

var myPlugin = function() {}; 

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

return { default: myPlugin }; 

Nie jestem pewien, należy przedłużyć $ .fn, ale być może jest to potrzebne.

I z

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

Oznacza to

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

Dlatego nie ma połączenia między $.fn przedmiotu i myPlugin funkcji.

Powinieneś utworzyć połączenie gdzieś. To może być w specjalny moduł jak plugins gdzie można wprowadzić wszystkie niezbędne wtyczki do obiektu $.fn:

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); 

Albo można dodać „zainicjować” metodę do eksportowanego obiektu w „myPlugin.es6 'i wywołaj go przed pierwszym użyciem: init($) { $.fn.myPlugin = myPlugin; }

I tak dalej.

Answer 2

Instalujesz nowe metody na prototypie jQuery w ES6, tak jak zawsze. Nic się dla nich nie zmieniło. Nie użyjesz podklasy jQuery, więc nie ma sensu używać class lub extends.

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

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

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

$('div').myPlugin();