Mở rộng plugin ES6 sang nguyên mẫu jQuery

Question

Tôi muốn hỏi một số trợ giúp vì tôi không thể chuyển đổi plugin jQuery (v2) cổ điển của mình trong ES6 bằng mô-đun và lớp học.

Trong ECMAScript 5, chúng tôi có thể đính kèm jQuery plugin vào jQuery nguyên mẫu như thế này:

app.js - jQuery nạp qua HTML <script> thẻ

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

Và nó hoạt động :). Trong ES6, tôi sẽ viết một cái gì đó như thế này:

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

Và cuối cùng, nó không làm việc ...
Tôi đã tìm kiếm và không có ai hỏi câu hỏi này trước đây.
Tôi sử dụng Babel để chuyển ES6 thành ES5.

Answer 1

$.fn chỉ là một đối tượng. Không có phép thuật khi thêm thuộc tính mới vào mẫu thử nghiệm của $. Vì vậy, mã số $.fn.myPlugin = function() {} bằng $.prototype.myPlugin = function() {}.

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

Để có thể gọi một hàm trên đối tượng $ trong một cách tiêu chuẩn ($('div').func()), bạn cần phải thêm chức năng này để đối tượng $.

Bạn không thêm mã này vào mã es6 của mình.

Như vậy,

import $ from 'jquery'; 

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

Phương tiện (gần như)

var myPlugin = function() {}; 

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

return { default: myPlugin }; 

Tôi không chắc chắn, bạn nên mở rộng $ .fn, nhưng có lẽ bạn cần nó.

Và với

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

nó có nghĩa là

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

Vì vậy, không có mối liên hệ giữa đối tượng và $.fnmyPlugin chức năng.

Bạn nên tạo kết nối ở đâu đó. Nó có thể là trong một module đặc biệt như plugins nơi bạn sẽ tiêm tất cả các plugin cần thiết vào đối tượng $.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); 

Hoặc bạn có thể thêm một phương pháp 'khởi tạo' cho đối tượng xuất khẩu trong 'myPlugin.es6 ', và gọi nó trước khi sử dụng lần đầu tiên: init($) { $.fn.myPlugin = myPlugin; }

Và cứ tiếp tục như vậy.

Answer 2

Bạn cài đặt các phương pháp mới trên nguyên mẫu jQuery trong ES6 giống như bạn thường làm. Không có gì thay đổi cho họ. Bạn sẽ không phân lớp jQuery, do đó, không có ý nghĩa gì khi sử dụng class hoặc extends.

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

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

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

$('div').myPlugin();