ภาพรวม
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 เหล่านี้และไปยังผู้ใช้คอมโพเนนต์เพื่อให้เป็นไปตามการขึ้นต่อกันเหล่านี้