การสร้างคอมโพเนนต์ที่กำหนดเอง

ภาพรวม

API ที่ฝังนั้นมาพร้อมกับคอมโพเนนต์ในตัวหลายรายการ และยังให้คุณสร้างคอมโพเนนต์ของคุณเองได้ง่ายๆ เอกสารนี้อธิบายวิธีสร้างคอมโพเนนต์ที่กำหนดเองใหม่และวิธีรวมคอมโพเนนต์ของบุคคลที่สามในแอปพลิเคชันของคุณ

การสร้างคอมโพเนนต์ที่กำหนดเอง

คอมโพเนนต์ Custom ฝัง API สร้างขึ้นโดยการเรียกใช้ gapi.analytics.createComponent และส่งออบเจ็กต์ชื่อคอมโพเนนต์และเมธอด

ชื่อที่ส่งไปยัง createComponent จะเป็นชื่อของฟังก์ชันตัวสร้างของคอมโพเนนต์ และจัดเก็บไว้ใน gapi.analytics.ext ออบเจ็กต์ Method ควรมีฟังก์ชันหรือคุณสมบัติที่คุณต้องการเพิ่มลงในต้นแบบของคอมโพเนนต์

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 จะทำให้คุณเข้าถึงต้นแบบของคอมโพเนนต์ได้ แต่ไม่ได้ให้สิทธิ์เข้าถึงตัวสร้างของคอมโพเนนต์

ในการแก้ปัญหานี้ เมื่อมีการสร้างคอมโพเนนต์ "ฝัง API" ใหม่ คอมโพเนนต์จะมองหาเมธอดที่เรียกว่า "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.
});

รอจนกว่าคลังจะพร้อมใช้งาน

ข้อมูลโค้ด API ที่ฝังจะโหลดไลบรารีและทรัพยากร Dependency ทั้งหมดแบบไม่พร้อมกัน ซึ่งหมายความว่าเมธอดอย่างเช่น createComponent จะใช้ไม่ได้ทันที และโค้ดที่เรียกใช้เมธอดดังกล่าวจะต้องถูกเลื่อนออกไปจนกว่าทุกอย่างจะโหลด

ฝัง API มีเมธอด 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() {
      // ...
    }
  });
});

การใช้คอมโพเนนต์ของบุคคลที่สาม

โดยทั่วไปคอมโพเนนต์ ฝัง API ของบุคคลที่สามจะมีการจัดแพ็กเกจเป็นไฟล์ JavaScript เดี่ยวๆ ที่คุณใส่ไว้ในหน้าเว็บได้โดยใช้แท็ก <script>

ลำดับการโหลดเป็นสิ่งสำคัญ คุณจึงต้องใส่ข้อมูลโค้ด ฝัง API ก่อน ตามด้วยสคริปต์คอมโพเนนต์และการอ้างอิงใดๆ ของโค้ดดังกล่าว

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

การจัดการทรัพยากร Dependency

คอมโพเนนต์อาจมีทรัพยากร Dependency เช่น ไลบรารีการสร้างแผนภูมิอย่าง d3.js หรือไลบรารีการจัดรูปแบบวันที่ เช่น moment.js ขึ้นอยู่กับผู้เขียนคอมโพเนนต์ที่จะบันทึกทรัพยากร Dependency เหล่านี้และไปยังผู้ใช้คอมโพเนนต์เพื่อให้เป็นไปตามการขึ้นต่อกันเหล่านี้