使用require.js和FB SDK

Question

我想使用require.js加載FB SDK。

我的測試情況是這樣的：

test.js：

require([   
    'libs/facebook/fb' 
    ], function(FB){ 
    FB.api("/me", function(){}); 
)); 

我想有test.js FB SDK只加載後運行，並有FB準備它。

有關如何實現這一點的任何想法？我的包裝（libs/facebook/fb.js）有什麼？

Answer 1

它似乎並不像FB API是一個AMD模塊，所以它沒有以RequireJS習慣的方式定義自己。您將需要使用require.config填充FB API。我假設test.js是您作爲RequireJS的數據主要值提供的腳本。

require.config({ 
    shim: { 
     'facebook' : { 
      exports: 'FB' 
     } 
    }, 

    paths: { 
     'facebook' : 'libs/facebook/fb' 
    } 
}); 

require(['facebook'], function(FB){ 
    FB.api('/me', function(){}); 
}); 

Answer 2

或包裹在一個模塊中的初始化代碼（該示例使用道場）：

define('facebook', 
    [ 'dojo/dom-construct', 
     'dojo/_base/window', 
     'https://connect.facebook.net/en_US/all/debug.js' ], // remove "/debug" in live env 
    function(domConstruct, win) 
    { 

     // add Facebook div 
     domConstruct.create('div', { id:'fb-root' }, win.body(), 'first'); 

     // init the Facebook JS SDK 
     FB.init({ 
      appId: '1234567890', // App ID from the App Dashboard 
      channelUrl: '//' + window.location.hostname + '/facebook-channel.html', // Channel File for x-domain communication 
      status: true, // check the login status upon init? 
      cookie: true, // set sessions cookies to allow your server to access the session? 
      xfbml: true // parse XFBML tags on this page? 
     }); 


     // Additional initialization code such as adding Event Listeners goes here 
     console.log('Facebook ready'); 

     return FB; 
    } 
); 

Answer 3

大廈voidstate's和Dzulqarnain Nasir's答案，這裏是我最終使用在我的項目中的代碼。

絆倒我最多的部分是FB.init()顯然是異步的。在試圖啓動callback()（沒有FB.getLoginStatus）時，FB尚未初始化，並且出現「An active access token must be used to query information about the current user.」錯誤。

RequireJS沉配置

require.config({ 
    // paths: { 'facebookSDK': '//connect.facebook.net/en_US/all/debug' }, // development 
    paths: { 'facebookSDK': '//connect.facebook.net/en_US/all' }, // production 
    shim: { 'facebookSDK': { exports: 'FB' } } 
}); 

AMD模塊初始化Facebook的JS SDK

define(['facebookSDK'], function (FB) { 
    'use strict'; 

    return function (settings, callback) { 
     var args = { 
      appId: settings.appId, 
      channelUrl: settings.channelUrl, 
      status: true, 
      cookie: true, 
      xfbml: true 
     }; 

     console.log('Calling FB.init:', args); 
     FB.init(args); 

     if (callback && typeof (callback) === "function") { 
      // callback() // does not work, FB.init() is not yet finished 
      FB.getLoginStatus(callback); 
     }    
    }; 

}); 

這仍然沒有解決相當原來的問題的期望使用。

OP的代碼也許可以被改寫爲：

require(['libs/facebook/fb'], // where fb.js holds my above Module 
    function(FBinit){ 
    FBinit({ 
     appId: appId, 
     channelUrl: channelUrl 
    }, function(){ 
     FB.api("/me", function(){}); 
    }); 
    } 
); 

這是不是很cleanas OP的原始概念，但它的我能想出的最好。如果有人有任何問題，我很樂意提供一些關於如何改進我的方法的反饋或建議。 RequireJS我還是很新的。

Answer 4

下面是來自Facebook的一個文件： https://developers.facebook.com/docs/javascript/howto/requirejs/

require.config({ 
    shim: { 
    'facebook' : { 
     export: 'FB' 
    } 
    }, 
    paths: { 
    'facebook': '//connect.facebook.net/en_US/all' 
    } 
}) 
require(['fb']); 

然後添加模塊是這樣的：

define(['facebook'], function(){ 
    FB.init({ 
    appId  : 'YOUR_APP_ID', 
    channelUrl : '//yourdomain.com/channel.html' 
    }); 
    FB.getLoginStatus(function(response) { 
    console.log(response); 
    }); 
});