将ES6插件扩展到jQuery原型 [英] Extend ES6 plugin to jQuery prototype

问题描述

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

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

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

  $。fn.myPlugin = function（）{}; 
 $（'div'）。myPlugin（）; 
  

它的工作原理:)。在ES6中，我会写这样的东西：

myPlugin.es6：

  import'from'jquery'; 
 
导出默认类myPlugin扩展$ {
 //可以使用constructor（）方法吗？ 
} 
  

app.es6：

  import'from'jquery'; 
从'myPlugin.es6'导入myPlugin; 
 
 $（'div'）。myPlugin（）; 
  

最后，它不工作...

我搜索和没有人会问这个问题。

我使用Babel将ES6转化为ES5。

解决方案

$。fn 只是一个对象。在 $ 的原型中添加新属性时，没有任何魔法。所以，代码 $。fn.myPlugin = function（）{} 等于 $。prototype.myPlugin = function（）{} code>。

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

为了能够调用 $ 对象的函数一个标准的方法（ $（'div'）。func（）），你需要将这个函数添加到 $ 对象

您不是将其添加到您的es6代码中。

因此，

  import'from'jquery'; 
 
导出默认类myPlugin扩展$ {
 //可以使用constructor（）方法吗？ 
} 
  

（几乎）

  var myPlugin = function（）{}; 
 
 myPlugin.prototype = Object.create（$。prototype）; 
 
 return {default：myPlugin}; 
  

我不知道你应该扩展$ .fn，但也许你需要它。 >

与

  import'from'jquery'; 
从'myPlugin.es6'导入myPlugin; 
  

这意味着

 code> var $ = require（'jquery'）; 
 var myPlugin = require（'myPlugin'）; //从'myPlugin.es6'引用'export.default'对象
  

因此，那里在 $。fn 对象和 myPlugin 函数之间没有连接。

你应该在某个地方创建连接。它可以在一个特殊的模块，如 plugins ，您将在 $。fn 对象中注入所有需要的插件：

  import'from'jquery'; 
从plugin1.es6导入​​plugin1; //应该包含'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; }

等等。

I would like ask some help because i can't convert my classic jQuery (v2) plugin in ES6 with module and class.

In ECMAScript 5, we can attach jQuery plugin into jQuery prototype like this :

app.js - jQuery loaded via HTML <script> tag

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

And it works :) . In ES6, I would write something like this:

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

And finally, it's not working ...
I've search and no people ask this question before.
I use Babel to transpile ES6 into ES5.

解决方案

$.fn is just an object. There is no magic upon adding a new property to the prototype of $. So, the code $.fn.myPlugin = function() {} is equal to $.prototype.myPlugin = function() {}.

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

To be able to call a function on the $ object in a standard way ($('div').func()), you need to add this function to the $ object.

You're not adding it in your es6 code.

Thus,

import $ from 'jquery';

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

Means (almost)

var myPlugin = function() {};

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

return { default: myPlugin };

I'm not sure you should extend $.fn, but maybe you need it.

And with

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

it means

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

Therefore, there is no connection between $.fn object and myPlugin function.

You should create the connection somewhere. It could be in a special module like plugins where you'll inject all needed plugins into the $.fn object:

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

Or you could add an 'initialize' method to the exported object in 'myPlugin.es6', and call it before first use: init($) { $.fn.myPlugin = myPlugin; }

And so on.

这篇关于将ES6插件扩展到jQuery原型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！