javascript - 将 require.js 与 FB SDK 一起使用

Question

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

我的测试用例是这样的：

测试.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

这是来自 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);
  });
});

Answer 3

或者将初始化代码包装在一个模块中（示例使用 Dojo）：

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 4

基于voidstate和Dzulqarnain Nasir 的答案，这是我最终在我的项目中使用的代码。

最让我失望的部分FB.init()显然是异步的。在尝试调用callback()（不带FB.getLoginStatus）时，FB尚未初始化，并且出现“ An active access token must be used to query information about the current user.”错误。

RequireJS Shim 配置

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 还是很陌生。