เดี่ยวนี้มี mush up api มาให้ใช้เยอะครับ ทั้งที่เกี่ยวกับแผนที่อย่างเดียวหรือจะเป็น api ที่เกี่ยวข้องกับ application ต่างๆ api บางส่วนเช่น google map, yahoo map ก็จะอยู่ในรูปแบบของ javascript ขนาดใหญ่ซึ่งแน่นอนว่ามีผลต่อการโหลดของ webpage วันนี้ผมขอนำเสนอเทคนิคที่เรียกว่า on demand javascript

        อธิบายง่ายก็คือการเรียกโหลดไฟล์ javascript มาเฉพาะที่ต้องการใช้งาน เหมาะกับ webapplication ที่ต้องใช้ javascript หลายๆส่วนในการประมวลผล

<script type=”http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1″></script>
<script type=”http://maps.google.com/maps?file=api&v=2.x&key=apikey”></script>

ตัวอย่าง javascript library ที่ embed ลงใน web กรณีนี้ application ผมใช้ทั้ง yahoo map และ Google Map เทคนิคที่ว่าก็การสร้าง fuction สำหรับ API โดยให้ทำการ load เฉพาะเวลาที่เราต้องการ หรือเมื่อ user ทำ event ที่กำหนด เขียน code สั้นๆดังนี้ครับ

function LazyGoogleMaps() {
var script = document.createElement(’script’);

script.setAttribute(’src’, ‘http://maps.google.com/maps?file=api&v=2.x&key=apikey&async=2&callback=’ + callback);

script.setAttribute(’type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
}

สำหรับ callback ก็เป็น fuction เริ่มต้นหลังจาก load javascript library

function callback() {
//Run started code
}

สำหรับท่านที่ใช้ jquery อยู้แล้วก็เขียน code สั้นๆได้ดังนี้เลย

$(document).ready(function(){
$.requireJs(’http://maps.google.com/maps?file=api&v=2.x&key=apiky&async=2′,
function(){
//code to be executed immediately after script loads
}
);
});

เทคนิคนี้ผมนำมาจาก ajax pattern นำมาใช้แก้ปัญหาการ initialize page ให้เร็วขึ้นซึ่งสามารถอ่านรายละเอียดเพิ่มเติมได้ที่ http://ajaxpatterns.org/On-Demand_Javascript