Проблема с областью Javascript, внутри анонимной функции

Question

Извините, я не могу быть более конкретным с заголовком.

Я создаю веб-сайт (персональный), который отображает различный контент для пользователя в зависимости от строки запроса, которая используется вurl.

например, page=home.html будет отображать home.html

Веб-сайт Javascript заключен в объект, каждое значение которого содержит разные данные, некоторый псевдокод:

(function(){
    var wrapper = {
        init: function(){
            //Runs on document ready
            this.foo();
            this.nav.render();
        },
        foo: function(){
            //Some functionality goes here for the website, e.g. Display something from an API
        },
        nav: {
            //Functionality to handle the navigation, has different properties
            config: {
                //Contains the config for nav, e.g. page names + locations
                dir: '/directory/to/content/',
                pages: {
                    page_name: wrapper.nav.config.dir + 'page_value'
                }
            },
            render: function(){
                 //some code
            },
            routes: function(){
                 //some code}
            }
        }
    };

    $(function(){
        wrapper.init();
    });
})();

Моя проблема в том, что я пытаюсь добавить значение dir к каждому из значений page (внутри объекта, где определены страницы), ожидая получить результат (в этом случае псевдокода)directory/to/content/page_value, но вместо этого dir не определен, когда я пытаюсь получить к нему доступ, я попробовал следующее, чтобы добиться того, что я хочу:

• wrapper.nav.config.dir + 'page_value '

Последние 30 минут я пытался выяснить, что я делаю неправильно, и даже думал о жестком кодировании URL-адреса для каждой страницы.

Причиной желания сделать это является то, что мой лСервер разработки ocal и веб-хостинг имеют разные структуры каталогов, поэтому я не хочу переписывать URL-адреса каждый раз, когда хочу разработать + опубликовать.Что касается того, почему все обернуто внутри объекта, я думал, что будет проще поддерживать этот способ.

Надеюсь, ответ прост, и это просто любительская ошибка / непонимание.

Answer 1

Проблема в том, что вы не можете ссылаться на переменную, которая определяется в этом же определении.

Таким образом, внутри определения wrapper вы не можете ссылаться на wrapper.И внутри определения config вы также не можете ссылаться на config и т. Д.

Обычный шаблон проектирования для решения этой проблемы - инициализировать столько, сколько вы можете в объявлении вашегоструктура данных, а затем сделайте все остальное в .init(), когда вы сможете свободно получить доступ ко всем этим.

Answer 2

Проблема в том, что вы все еще заняты определением оболочки, когда спрашиваете ее значение, поэтому она все еще не определена.

Код ниже тоже не работает:

var x = {
    y:"1",
    z:x.y
}

Answer 3

Измените первые две строки на:

var wrapper = null;
(function(){
   wrapper = {

В противном случае оболочка является локальной переменной для вашей анонимной функции.

Answer 4

Почему бы и нет:

//...
init: function(){
    //Runs on document ready
    this.foo();
    var config = this.nav.config;
    for (var page in config.pages) {
        config.pages[page] = config.dir + config.pages[page];
    }
},
//...