5

RequireJS モジュールを定義しました (以下を参照)。サイトのすべてのページに必要な機能の集まりです。

返されたオブジェクト内の関数の 1 つである initTwitter() は、同じオブジェクト内の別の関数 shortURL() を呼び出す必要があります。「TypeError: this.shortenURL は関数ではありません」というコンソール エラーが表示されます。

これらの関数はすべて、元は通常の Javascript シングルトン オブジェクトにあり、コードは正常に実行されました。私は RequireJS を初めて使用するので、このキーワードが RequireJS で異なる動作をするのか、それとも単純に何か間違っているのかわかりません。

編集:「これ」も削除しようとしましたが、代わりに「ReferenceError: shortURL が定義されていません」というメッセージが表示されます。

define(['config', 'jquery'], function(config, $) {
    /* Site-wide functions go here */

    return {
        doesObjPropertyExist: function(obj, prop) {
            var parts = prop.split('.');
                for(var i = 0, l = parts.length; i < l; i++) {
                    var part = parts[i];
                    if(obj !== null && typeof obj === "object" && part in obj) {
                        obj = obj[part];
                    }
                    else {
                        return false;
                    }
                }
            return true;
        },
        /** 
         * Shorten URL via bit.ly
         * Requires a callback function, so that once getJSON is absolutely finished, we can continue with the function
         */
        shortenURL: function(longURL, callback, settingsOverride) {
            var defaults = {
                login: '@bitly.username@',
                apiKey: '@bitly.key@'
            };

            $.extend({}, defaults, settingsOverride);
            var bitly_service_url = "http://api.bit.ly/v3/shorten?" + "&login=" + defaults.login + "&apiKey=" + defaults.apiKey + "&longUrl=" + longURL + "&format=json&callback=?";
            $.getJSON(bitly_service_url, function(results){
                if (results.status_txt === "OK") {
                    callback(results.data["url"]);
                }
                else {
                    callback(longURL);
                }
            });
        },
        initTwitter: function() {
            var bitly_obj = '',
                $bitly_link = '',
                twitterShortenUrl = function(obj, $elem) {
                    this.shortenURL(obj.url, function(url) {
                        $elem.attr('href', 'http://twitter.com/home?status=' + 'From @Real_Simple ' + arg_obj.headline + ' ' +  shortened_url);
                    });
                };

                $bitly_link = $('#share-twitter');

                /* On document.ready, only call bitly service and change the link href if the twitter link exists; cannot use page_context, 
                 * because we are looking for a specific element ID that is only placed when Twitter is needed. 
                 */
                if ($bitly_link.length) {
                    bitly_obj = config.page_context.bitly;

                    twitterShortenUrl(bitly_obj, $bitly_link);
                }
        },
        initFullSiteLink: function() {
                var canonical_url = $('link[rel="canonical"]').attr('href'),
                    content_type = config.markup_id.content;

                    if (content_type == 'search') {
                        $('#fullsite').attr('href', canonical_url + location.search + '&nomobile=1');
                    } else {
                        $('#fullsite').attr('href', canonical_url + '?nomobile=1');
                    }
        },
        initNav: function() {
            /* Global navigation */
            /* Make Channels button open and close the global flyout navigation */
            $('#channels-toggle').bind('click', function() {
                if ($('#channels').hasClass('is-open')) {
                    $('#channels').removeClass('is-open');
                } else {
                    $('#channels').addClass('is-open');
                }

                return false;
            });

            /* Touch the close button in the global flyout navigation to close it */ 
            $('#channels .close').bind('click', function() {
                $('#channels').removeClass('is-open');

                return false;
            });
        },
        omniture: {
            mobilePageTrack: function (desc) {
                /* Global function in rsmobile.js */
                omniPg(desc);
            }
        },
        init: function() {
           this.initNav();
           this.initTwitter();
           this.initFullSiteLink();
        }
    }   /* End return object */
});

編集 2: 私のコードの 'this' は別の関数内にあることが判明したため、そのスコープはウィンドウに変更されました。関数に入る前に、このスコープを保持する必要があります。

initTwitter: function() {
            var bitly_obj = '',
                $bitly_link = '',
                self = this;    /* Preserve scope of this */

            var twitterShortenUrl = function(obj, $elem) {
                    self.shortenURL(obj.url, function(url) {
                        $elem.attr('href', 'http://twitter.com/home?status=' + 'From @Real_Simple ' + obj.headline + ' ' + url);
                    });
                };
/* rest of code .... */

それ以外の場合、ポールの答えは、何でも返して初期化も追加できることを強調しています。

4

1 に答える 1

9

いいえ、Require.js は に対してマジック バインディングを行わないためthisです。モジュールをインスタンス オブジェクトに書き換える必要があります。

define(['config', 'jquery'], function(config, $) {
    function obj() {
        this.initNav();
        this.initTwitter();
        this.initFullSiteLink();
    }
    obj.prototype = {
        doesObjPropertyExist: function (/*...*/) { /*...*/ },
        shortenURL: function (/*...*/) { /*...*/ },
        initTwitter: function (/*...*/) { /*...*/ },
        initFullSiteLink: function (/*...*/) { /*...*/ },
        initNav: function (/*...*/) { /*...*/ },
        omniture: function (/*...*/) { /*...*/ }
    };
    return obj;
});

require(['that_main_module'], function (obj) {
    var newObj = new obj();
});
于 2013-02-01T16:42:20.000 に答える