Question

我想请一些帮助，因为我无法使用模块和类转换ES6中的经典jQuery（v2）插件。

在ECMAScript 5中，我们可以将jQuery插件附加到jQuery原型中，如下所示：

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

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

或者您可以添加＆＃39;初始化＆＃39;在＆＃39; myPlugin.es6＆＃39;中导出对象的方法，并在首次使用前调用它：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原型

2 个答案: