कस्टम कॉम्पोनेंट बनाना

खास जानकारी

'एम्बेड करें' API (एपीआई) कई बिल्ट-इन कॉम्पोनेंट के साथ आता है और यह आपको खुद का बनाने का आसान तरीका भी देता है. इस दस्तावेज़ में नए कस्टम कॉम्पोनेंट बनाने और अपने ऐप्लिकेशन में तीसरे पक्ष के कॉम्पोनेंट को शामिल करने का तरीका बताया गया है.

कस्टम कॉम्पोनेंट बनाना

कस्टम एम्बेड API घटक gapi.analytics.createComponent को कॉल करके और कॉम्पोनेंट नाम और मेथड ऑब्जेक्ट पास करके बनाए जाते हैं.

createComponent को दिया गया नाम, कॉम्पोनेंट के #कंस्ट्रक्टर फ़ंक्शन का नाम होगा और इसे gapi.analytics.ext पर सेव किया जाएगा. मेथड ऑब्जेक्ट में, ऐसे सभी फ़ंक्शन या प्रॉपर्टी होनी चाहिए जिन्हें आपको कॉम्पोनेंट के प्रोटोटाइप में जोड़ना है.

gapi.analytics.createComponent('MyComponent', {
  execute: function() {
    alert('I have been executed!');
  }
});

कॉम्पोनेंट बनाने के बाद, इसका इस्तेमाल कॉम्पोनेंट कंस्ट्रक्टर वाले new ऑपरेटर को कॉल करके किया जा सकता है.

// Create a new instance of MyComponent.
var myComponentInstance = new gapi.analytics.ext.MyComponent();

// Invoke the `execute` method.
myComponentInstance.execute() // Alerts "I have been executed!"

शुरू करने का तरीका

मैथड ऑब्जेक्ट को createComponent में पास करने से, आपको अपने कॉम्पोनेंट के प्रोटोटाइप का ऐक्सेस मिलता है. हालांकि, इससे आपको अपने कॉम्पोनेंट और कंस्ट्रक्टर का ऐक्सेस नहीं मिलता.

इस समस्या को हल करने के लिए, जब एम्बेड किए गए नए एपीआई कॉम्पोनेंट बनाए जाते हैं, तो वे initialize नाम के किसी तरीके का इस्तेमाल करके, अपने-आप ढूंढें जाते हैं. अगर कहा जाता है, तो इसे उसी arguments के साथ शुरू किया जाएगा जो कंस्ट्रक्टर को पास किया गया है. आपके पास आम तौर पर कंस्ट्रक्टर में डाला गया सभी लॉजिक ही होना चाहिए.

यहां एक उदाहरण दिया गया है, जो नए MyComponent इंस्टेंस बनाए जाने पर कुछ डिफ़ॉल्ट प्रॉपर्टी सेट करता है.

gapi.analytics.createComponent('MyComponent', {
  initialize: function(options) {
    this.name = options.name;
    this.isRendered = false;
  }
});

var myComponentInstance = new gapi.analytics.ext.MyComponent({name: 'John'});
alert(myComponentInstance.name); // Alerts "John"
alert(myComponentInstance.isRendered); // Alerts false

इनहेरिट किए गए तरीके

createComponent तरीके से बनाए गए कॉम्पोनेंट, पहले से मौजूद सभी कॉम्पोनेंट (get,set, on, once, off, औरemit के ज़रिए शेयर किए गए बेस तरीके को अपने-आप इनहेरिट कर लेंगे. इससे सभी कॉम्पोनेंट एक जैसे और अनुमानित तरीके से काम करते हैं.

उदाहरण के लिए, अगर आपके कॉम्पोनेंट के लिए उपयोगकर्ता की अनुमति लेना ज़रूरी है, तो इनहेरिट किए गए इवेंट हैंडलिंग के तरीके का इस्तेमाल करके ऐसा किया जा सकता है.

gapi.analytics.createComponent('MyComponent', {
  initialize: function() {
    this.isRendered = false;
  },
  execute: function() {
    if (gapi.analytics.auth.isAuthorized()) {
      this.render();
    }
    else {
      gapi.analytics.auth.once('success', this.render.bind(this));
    }
  },
  render: function() {
    if (this.isRendered == false) {

      // Render this component...

      this.isRendered = true;
      this.emit('render');
    }
  }
});

var myComponentInstance = new gapi.analytics.ext.MyComponent();

// Calling execute here will delay rendering until after
// the user has been successfully authorized.
myComponentInstance.execute();
myComponentInstance.on('render', function() {
  // Do something when the component renders.
});

लाइब्रेरी तैयार होने का इंतज़ार किया जा रहा है

एम्बेड एपीआई स्निपेट, लाइब्रेरी और इसकी सभी डिपेंडेंसी साथ-साथ लोड करता है. इसका मतलब है कि createComponent जैसे मेथड तुरंत उपलब्ध नहीं होंगे. जब तक सब कुछ लोड नहीं हो जाता, तब तक ऐसे मेथड को शुरू करने से रोका जाना ज़रूरी है.

एम्बेड एपीआई, gapi.analytics.ready का ऐसा तरीका देता है जो लाइब्रेरी के पूरी तरह लोड होने पर कॉलबैक को शुरू करता है. कस्टम कॉम्पोनेंट बनाते समय, आपको हमेशा अपने कोड को ready फ़ंक्शन में रैप करना चाहिए, ताकि यह सभी ज़रूरी तरीकों के मौजूद होने से पहले न चले.

gapi.analytics.ready(function() {

  // This code will not run until the Embed API is fully loaded.
  gapi.analytics.createComponent('MyComponent', {
    execute: function() {
      // ...
    }
  });
});

तीसरे पक्ष के कॉम्पोनेंट का इस्तेमाल करना

आम तौर पर, तीसरे पक्ष के एम्बेड किए गए एपीआई कॉम्पोनेंट को अलग-अलग JavaScript फ़ाइलों के तौर पर पैकेज किया जाता है. इन फ़ाइलों को <script> टैग का इस्तेमाल करके, अपने पेज पर शामिल किया जा सकता है.

लोड ऑर्डर मायने रखता है. इसलिए, सबसे पहले एंबेड एपीआई स्निपेट को शामिल करना ज़रूरी है. इसके लिए, अपने कॉम्पोनेंट स्क्रिप्ट और उनकी डिपेंडेंसी को फ़ॉलो करें.

<!-- Include the Embed API snippet first. -->
<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<!-- Then include your components. -->
<script src="path/to/component.js"></script>
<script src="path/to/another-component.js"></script>

डिपेंडेंसी मैनेज करना

कॉम्पोनेंट में डिपेंडेंसी हो सकती हैं, जैसे कि चार्टिंग लाइब्रेरी जैसे कि d3.js या तारीख की फ़ॉर्मैटिंग लाइब्रेरी, जैसे कि moment.js. इन डिपेंडेंसी को दस्तावेज़ में शामिल करना कॉम्पोनेंट पर निर्भर करता है. साथ ही, यह पक्का करना कि कॉम्पोनेंट डिपेंडेंसी पूरी होती हैं या नहीं.