jQuery प्रोटोटाइप

Question

पर ES6 प्लगइन बढ़ाएं मैं कुछ मदद पूछना चाहूंगा क्योंकि मैं मॉड्यूल और कक्षा के साथ ES6 में अपनी क्लासिक jQuery (v2) प्लगइन को परिवर्तित नहीं कर सकता।

ECMAScript 5 में, हम jQuery प्लगइन jQuery प्रोटोटाइप में इस तरह संलग्न कर सकते हैं:

app.js - jQuery एचटीएमएल <script> टैग

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

के माध्यम से भरी हुई और यह काम करता है :)।

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

और अंत में, यह काम नहीं कर रहा ...
ES6 में, मैं कुछ इस तरह लिखते थे मैंने खोज की है और कोई भी व्यक्ति पहले इस प्रश्न से नहीं पूछता है।
मैं ईएस 5 में ईएस 6 को पार करने के लिए बेबेल का उपयोग करता हूं।

Answer 1

$.fn केवल एक वस्तु है। $ के प्रोटोटाइप में एक नई संपत्ति जोड़ने पर कोई जादू नहीं है। तो, कोड $.fn.myPlugin = function() {}$.prototype.myPlugin = function() {} के बराबर है।

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

एक मानक तरीका ($('div').func()) में $ वस्तु पर एक समारोह कॉल करने के लिए सक्षम होने के लिए, आपको $ वस्तु को यह समारोह जोड़ने की जरूरत है।

आप इसे अपने ईएस 6 कोड में नहीं जोड़ रहे हैं।

इस प्रकार,

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 ', और पहले उपयोग से पहले इसे कॉल करें: init($) { $.fn.myPlugin = myPlugin; }

और इसी तरह।

Answer 2

आप हमेशा के रूप में ईएस 6 में jQuery प्रोटोटाइप पर नए तरीके स्थापित करते हैं। उनके लिए कुछ भी नहीं बदला है। आप jQuery को उपclass नहीं जा रहे हैं, इसलिए class या extends का उपयोग करने का कोई मतलब नहीं है।

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

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

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

$('div').myPlugin();