YUI3, Модули, Пространства имен, вызывающие функции

Я хотел бы перенести код javascript со своей страницы на YUI3. После прочтения многих сообщений (вопросов и ответов) здесь и большого количества информации на странице YUI3 и в руководствах я пришел к выводу, что лучший способ сделать это — разделить код на модули, потому что это позволяет мне динамически загружать скрипты. только когда нужно.

Я хотел бы организовать код в разных подмодулях, которые должны загружаться и управляться (при необходимости) основным модулем.

Я думаю, что понял, как их динамически загружать, но проблема, с которой я столкнулся сейчас, заключается в том, что я не всегда могу вызывать общедоступные методы как внутри модуля, так и формировать один модуль в другой. Иногда это работает, но иногда я получаю сообщение xxx is not a function.

Вероятно, вопрос в том, что я не понимаю, как установить глобальное пространство имен (например, MyApp) и «играть» в этом пространстве имен.

Я хотел бы иметь возможность вызывать методы следующим образом: MyApp.Tabs.detectTabs()... как из методов основного модуля (MyApp.Core), так и из того же подмодуля (MyApp.Tabs).

Вот структура моего кода:

Встроенный JavaScript:

var MyAppConfig = {
  "tabpanels":{"ids":["navigation"]},
  "events":   [{"ids": ["main_login", "dictionary_login"],
              "type": "click",
              "callback": "MyApp.Core.updateContent",
              "params":{
                 }
              }]
};
YUI_config = {
    filter: 'debug',
    groups: {
        'myapp': {
            modules: {
                'project-myapp-core': {
                    fullpath: 'http://www.myapp.com/scripts/Core.js',
                    requires: ['node-base']
                },
                'project-myapp-tabs': {
                    fullpath: 'http://www.myapp.com/scripts/Tabs.js',
                    requires: ['base', 'project-myapp-core', 'history', 'tabview', 'tabview-base']
                }
            }
        }
    }
};
YUI(YUI_config).use('node', 'base', 'project-myapp-core', function(Y) {
    var MyApp = {};
    MyApp.Core = new Y.MyApp.Core();
    Y.on('domready', MyApp.Core.begin, Y, null, application);
});

Модуль: Core
Файл: http://www.myapp.com/scripts/Core.js

YUI.add('project-myapp-core', function(Y) {

    function Core(config) {
        Core.superclass.constructor.apply(this, arguments);
    }
    Core.NAME = 'myapp-core';
    Core.ATTRS = {};

    var MyApp;
    MyApp = {};

    Y.extend(Core, Y.Base, {

        initializer: function (cfg) {
        },

        begin: function(e, MyAppConfig) {
            MyApp.Core      = instance = this;
            if (MyAppConfig.tabpanels) {
                YUI().use('node', 'project-myapp-tabs', function(Y) {
                    MyApp.Tabs = new Y.MyApp.Tabs();
                });
            }
            if (MyAppConfig.events) {
                MyApp.Core.prepareEvents(MyAppConfig.events);
                // I get "MyApp.Core.prepareEvents is not a function" 
            }
        },

        prepareEvents: function(e) {
        },

        updateContent: function() {
        }

    });

    Y.namespace('MyApp');
    Y.MyApp.Core = Core;

}, '0.0.1', { requires: ['node-base'] });

Подмодуль: Вкладки
Файл: http://www.myapp.com/scripts/Tabs.js

YUI.add('project-myapp-tabs', function(Y) {

    function Tabs(config) {
        Tabs.superclass.constructor.apply(this, arguments);
    }
    Tabs.NAME = 'myapp-tabs';
    Tabs.ATTRS = {};

    var tabView = [];

    Y.extend(Tabs, Y.Base, {

        initializer: function (cfg) {
        },

        begin: function (tabpanels) {
        },

        methodA: function () {
        }

    });

    Y.namespace('MyApp');
    Y.MyApp.Tabs = Tabs;

}, '0.0.1', { requires: ['base', 'project-myapp-core', 'history', 'tabview', 'tabview-base'] });

Где я должен определить глобальные переменные, пространство имен...? Как мне вызывать функции?

Заранее спасибо!

-- Орел --


person user597009    schedule 28.02.2011    source источник
comment
См. этот вопрос для получения подсказок.   -  person crafter    schedule 24.03.2011


Ответы (1)


Поскольку от project-myapps-tabs ничего не зависит, YUI его не включает. Попробуйте это в своем встроенном JS:

YUI(YUI_config).use('node', 'base', 'project-myapp-tabs', function(Y) {
person lawnsea    schedule 01.07.2011