Özel Bileşen oluşturma

Genel bakış

Yerleşik API'nin birkaç yerleşik bileşeni vardır ve kendi bileşeninizi oluşturmanın kolay bir yolunu sunar. Bu dokümanda, yeni bir özel bileşenin nasıl oluşturulacağı ve üçüncü taraf bileşenlerinin uygulamanıza nasıl dahil edileceği açıklanmaktadır.

Özel bileşen oluşturma

Özel Yerleştirme API'si bileşenleri, gapi.analytics.createComponent çağrılıp bir bileşen adı ve yöntem nesnesi iletilerek oluşturulur.

createComponent öğesine iletilen ad, bileşen oluşturucu işlevinin adı olacak ve gapi.analytics.ext üzerinde saklanacaktır. Yöntemler nesnesi, bileşenin prototipine eklenmesini istediğiniz tüm işlevleri veya özellikleri içermelidir.

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

Bileşen oluşturulduktan sonra, bileşen oluşturucuyla new operatörü çağrılarak kullanılabilir.

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

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

İlk kullanıma hazırlama yöntemi

createComponent adlı yönteme nesne aktarmak, bileşeninizin prototipine erişmenizi sağlar ancak bileşeninizin oluşturucusuna erişmenizi sağlamaz.

Bu sorunu düzeltmek için yeni Yerleştirme API'si bileşenleri oluşturulduğunda, initialize adlı bir yöntemin varlığı otomatik olarak aranır. Bulunması halinde, oluşturucuya aynı arguments ile çağrılır. Normalde bir oluşturucuya koyduğunuz tüm mantık, bunun yerine ilk kullanıma hazırlama yöntemine yerleştirilmelidir.

Yeni MyComponent örnekleri oluşturulduğunda bazı varsayılan özellikleri ayarlayan bir örneği aşağıda bulabilirsiniz.

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

Devralınan yöntemler

createComponent yöntemiyle oluşturulan bileşenler, tüm yerleşik bileşenlerin (get, set, on, once, off, emit) paylaştığı temel yöntemleri otomatik olarak devralır. Bu da tüm bileşenlerin tutarlı ve tahmin edilebilir bir şekilde çalışmasını sağlar.

Örneğin, bileşeniniz kullanıcının yetkilendirilmesini gerektiriyorsa bu, devralınan etkinlik işleme yöntemleri kullanılarak gerçekleştirilebilir.

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

Kitaplık hazır olana kadar bekliyor

Yerleştirme API'si snippet'i, kitaplığı ve tüm bağımlılarını eşzamanlı olmadan yükler. Diğer bir deyişle, createComponent gibi yöntemler hemen kullanılamaz ve bu yöntemleri çağıran kodun her şey yüklenene kadar ertelenmesi gerekir.

Yerleştirme API'si, kitaplık tam olarak yüklendiğinde çağrılması için bir geri çağırmayı kabul eden gapi.analytics.ready yöntemini sağlar. Özel bileşenler oluştururken, kodunuzu tüm gerekli yöntemler varken çalıştırılmaması için her zaman ready işlevi içine sarmalamanız gerekir.

gapi.analytics.ready(function() {

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

Üçüncü taraf bileşenleri kullanma

Üçüncü taraf Yerleştirme API'si bileşenleri genellikle sayfanıza <script> etiketi kullanarak ekleyebileceğiniz bağımsız JavaScript dosyaları olarak paketlenir.

Yükleme sırası önemlidir, bu nedenle öncelikle Yerleştirme API'si snippet'ini ekleyip bileşen komut dosyalarınızı ve bağımlılıklarını takip etmeniz önemlidir.

<!-- 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>

Bağımlıları yönetme

Bir bileşen, d3.js gibi bir grafik kitaplığı veya moment.js gibi bir tarih biçimlendirme kitaplığı gibi bağımlılıklara sahip olabilir. Bu bağımlılıkların belgelenmesi bileşen bileşenine ve bu bağımlıların karşılandığından emin olmak için bileşen kullanıcısına bağlıdır.