我想将 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);
});
模块:核心
文件: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'] });
我应该在哪里定义全局变量,命名空间......?我应该如何调用函数?
提前致谢!
-- 奥里奥尔 --