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

ภาพรวม

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

วิธีแก้ไขปัญหานี้คือเมื่อสร้างคอมโพเนนต์"ฝัง 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 การฝังก่อน ตามด้วยสคริปต์คอมโพเนนต์และทรัพยากร Dependency ของคอมโพเนนต์

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

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