1

MyNamespace.Facebook.coffee:

namespace 'MyNamespace', (exports) -> 
    exports.FacebookAPILoader = class 

        constructor: (@appId, @channelFileUrl) -> 
            @init()

        init: (fbAPILoadedCallback) -> 
            #FB triggers/calls window.fbAsyncInit() after the API javascript loads: 
            window.fbAsyncInit = () => 
                @initFb()
                fbAPILoadedCallback() if fbAPILoadedCallback?
                return
            @loadAPI()

        loadAPI: () -> 
            ((d) ->
                id = 'facebook-jssdk'
                ref = d.getElementsByTagName('script')[0]
                return if d.getElementById id

                js = d.createElement 'script'
                js.id = id
                js.async = true
                js.src = "//connect.facebook.net/en_US/all.js"
                ref.parentNode.insertBefore js, ref
            )(document)

        # Set app specific settings here: 
        initFb: () -> 
            fbConfig = 
                appId: @appId
                channelUrl: @channelFileUrl
                status: true
                cookie: true
                xfbml: true
            FB.init fbConfig

これは、ビューに API をロードする方法です: //MyView.cshtml:

@using (Script.Foot()) {
    var settingsReader = new System.Configuration.AppSettingsReader();
    var facebookAPIAppId = settingsReader.GetValue("Facebook_API_AppId", typeof(string));
    var hostName = settingsReader.GetValue("EnvHostname", typeof(string));

<script type="text/javascript">
    var myFb;
    $(document).ready(function () {
        myFb = new MyNamespace.FacebookAPILoader(
            '@Html.Raw(facebookAPIAppId)'
            , '//@Html.Raw(hostName)/modules/myapp/channel.html'
        );
    });
</script>
}

</body>Jquery は終了タグの直前にロードされます。2 つの質問があります。

  1. ここにロードする方法に何か問題がありますか? jquery がドキュメントの「ready」イベントを発生させた後、非同期でロードされると思いますが、それは正しいですか? パフォーマンスが向上する方法はありますか？

  2. fbAsyncInit() 内で実行される任意のコールバックを渡すことができるように、このモジュールをセットアップする最良の方法は何ですか? これを CMS (Orchard) 駆動の Web サイト内で使用しています。fbAsyncInit() の一部として実行する必要がある独自のカスタム コールバックを追加するために、同じ HTTP 要求に複数のビューを含めることができます。どうすればそれを達成できますか? コールバック配列を渡すだけでよいことはわかっていますが、特定のページのさまざまな機能すべてが、Facebook 関連のコードが何であるかを確認する方法と、 FacebookAPILoader.init() は、これらすべての FB ウィジェットのコールバックと DOM 要素の後にのみ実行され、すべてがそれと対話する準備ができています。

更新:_gaq Google アナリティクスの非同期トラッキングがグローバル名前空間の変数で 行うのと同じ方法でこれを行うと思います。Facebook API との対話が必要なコードは、コールバックを _gaq スタイルのキューにプッシュできます。準備ができたら、FacebookAPILoader モジュールがそのキューをプルします。これは素朴なアプローチですか？fbAPILoadedCallback() が既に呼び出された後に、私のコードが_gaqスタイルのキューに追加しようとする危険性はありますか?

4

1 に答える 1

0

私はこれを見つけました。これは、これまでこの問題に対して遭遇した最良の解決策だと思います。_gaqjQueryに依存することを気にしない限り、スタイルキューよりも実装が少し簡単です。

于 2012-10-17T01:22:41.680 に答える