12

require.js を使用して FB SDK をロードしたいと考えています。

私のテストケースは次のようなものです：

test.js :

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

FB SDK がロードされた後にのみ test.js を実行し、FB を準備したいと考えています。

これを達成する方法について何か考えはありますか？私のラッパー (libs/facebook/fb.js) には何が必要ですか?

4

4 に答える 4

10

FB API は AMD モジュールのようには見えないため、RequireJS が慣れている方法で自身を定義していません。require.config を使用して FB API をシムする必要があります。test.js は、RequireJS の data-main 値として指定したスクリプトであると想定しています。

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

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

require(['facebook'], function(FB){
    FB.api('/me', function(){});
});
于 2012-08-08T07:51:23.983 に答える
3

または、init コードをモジュールにラップします (サンプルでは 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;
    } 
);
于 2012-11-15T13:01:29.127 に答える
1

voidstateとDzulqarnain Nasir のAnswers に基づいて作成した、プロジェクトで最終的に使用したコードを次に示します。

私を最もつまずかせた部分は、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' } }
});

Facebook JS SDK を初期化する AMD モジュール

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(){});
     });
   }
);

これは、OP の元のコンセプトほどきれいではありませんが、私が把握できる最高のものです。誰かが何かを持っている場合は、私のアプローチを改善する方法についてのフィードバックやアドバイスが欲しい. 私はまだRequireJSに非常に慣れていません。

于 2013-04-09T16:05:32.450 に答える