在使用Facebook所提供的前端Javascript Libraries之前, 必須先載入
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
千萬記得不要寫在<head></head>之間, 要寫在<body>之內. 當完成了FeatureLoader.js.php的載入之後, 其實只有最小化的Facebook API被載入, 也就是說, 目前為止, 開發者只能使用FB.Bootstrap(經過測試, FB等同於FB.Bootstrap)命名空間下的方法而已.
接下來就是要利用載入FB.Bootstrap去繼續進行接下來的初始化步驟, 那就是指定API Key與"跨網域存取頻道"的相對路徑, 如下行程式所示, 如果有搭配jQuery的話, 可以將他寫在
$.ready(function(){
FB.Bootstrap.init('{API Key}','/xd_receiver.htm');
});
FB.Bootstrap.init會動態載入下列的內容到<head></head> Tag裡面
<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US/js/Api/CanvasUtil/Connect/XFBML"></script>
<link rel="stylesheet" type="text/css" href="http://static.ak.connect.facebook.com/connect.php/en_US/css/connect-button-css/share-button-css/FB.Connect-css/connect-css">
根據文件說明, XFBML (dependencies" => "CanvasUtil", "Api", "Connect") XFBML相依於上述三個javascript函式庫, 而該三個函式庫又相依於其他的函式庫. 簡言之, 透過FB.Bootstrap.init會將所有的Javascript客戶端函式庫都進行載入, 用Firebug觀察發現大小為59KB
文件中還提到如果效能是第一考量的話, 可以嘗試改用FB.Bootstrap.requireFeatures去動態載入必要的Javascript, 像是XdComm, Connect, Common, CanvasUtil, Base, Base, Api等等.
FB.Bootstrap.requireFeatures(["Connect"], function() {
FB.Facebook.init("{API Key}","{跨網域通道檔的URL}");
API Call Here …
});
雖然我發現儘管採用這樣個別載入的方式, FB.Bootstrap仍然會將所有的Javascript進行載入, 因為用Firebux觀察載入的Javascript仍然為59KB
另外要注意的是, FB.Bootstrap.requireFeatures可以執行任意多次, 當被指定載入的Javascript已經於前方的程式進行載入過的話, FB.Bootstrap.requireFeatures會立即執行Callback函數的內容, 而不會發生重複載入的問題.
除此之外, 仔細看了一下<body>的內容, 我們還可以發現多了以下被動態載入的內容, 姑且先跳過這些詭異的東西, 我先講完整個初始化過程在回頭來剖析這一個部分
<div id="FB_HiddenContainer" style="position: absolute; top: -10000px; width: 0px; height: 0px;"> <div>
<iframe class="FB_SERVER_IFRAME" scrolling="no" frameborder="0" src="http://api.connect.facebook.com/static/v0.4/client_restserver.php?r=163033" name="fb_api_server"></iframe>
</div>
<div>
<iframe class="FB_SERVER_IFRAME" scrolling="no" frameborder="0" src="http://www.facebook.com/extern/login_status.php?api_key=75b90556f1c53bb965bf83a9cf4acfac&extern=2&channel=http%3A%2F%2Fwww.6yeah.com%2Fxd_receiver.htm&locale=en_US" name="loginStatus"></iframe>
</div>
</div>
特別要注意的是, FB.Bootstrap.init是採用非同步的方式去載入外部javascript, 所以為了確保在程式完全載入客戶端瀏覽器之後才允許程式進行後續的Facebook API操作, 開發者必須將API Call的程式放在FB.Bootstrap.ensureInit之內, 透過將API呼叫放置在Callback function內的方式, 可以確保發出Facebook API操作的請求之前就已經完成必要Javascript的載入.
FB.Bootstrap.ensureInit(function(){
My_FB.friends_getLists();
});
No comments:
Post a Comment