ภาพรวม
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 เหล่านี้