将 ES6 插件扩展到 jQuery 原型

Question

我想寻求一些帮助，因为我无法在 ES6 中使用模块和 class.

转换我的 classic jQuery (v2) 插件

在 ECMAScript 5 中，我们可以像这样将 jQuery 插件附加到 jQuery 原型中：

app.js - jQuery 通过 HTML <script> 标签加载

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

而且有效:)。在 ES6 中，我会这样写：

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

最后，它不起作用...
我搜索了一下，之前没有人问过这个问题。
我使用 Babel 将 ES6 转译为 ES5。

Answer 1

$.fn 只是一个对象。向 $ 的原型添加新的属性并没有什么神奇之处。所以，代码 $.fn.myPlugin = function() {} 等于 $.prototype.myPlugin = function() {}.

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

为了能够以标准方式调用 $ 对象上的函数 ($('div').func())，您需要将此函数添加到 $ 对象。

你没有在你的 es6 代码中添加它。

因此，

import $ from 'jquery';

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

平均（差不多）

var myPlugin = function() {};

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

return { default: myPlugin };

我不确定您是否应该扩展 $.fn，但也许您需要它。

与

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

意思是

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

因此，$.fn对象和myPlugin函数之间没有联系。

您应该在某处创建连接。它可以在像 plugins 这样的特殊模块中，您可以在其中将所有需要的插件注入 $.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);

或者您可以在 'myPlugin.es6' 中的导出对象中添加一个 'initialize' 方法，并在首次使用前调用它：init($) { $.fn.myPlugin = myPlugin; }

以此类推

Answer 2

您像往常一样在 ES6 中的 jQuery 原型上安装新方法。对他们来说，一切都没有改变。您不会继承 jQuery，因此使用 class 或 extends.

没有任何意义

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

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

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

$('div').myPlugin();

将 ES6 插件扩展到 jQuery 原型

Extend ES6 plugin to jQuery prototype

javascript

jquery

extend

ecmascript-6

babeljs