YUI3, 모듈, 네임 스페이스, 호출 함수

자바 스크립트 코드를 내 페이지에서 YUI3으로 이식하고 싶습니다. YUI3 페이지와 튜토리얼에서 많은 글 (질의 응답)과 많은 정보를 읽은 후에 스크립트를 dinamically로드 할 수 있기 때문에 가장 좋은 방법은 모듈로 코드를 분할하는 것입니다. 필요할 때만.YUI3, 모듈, 네임 스페이스, 호출 함수

핵심 모듈에 의해로드되고 관리되어야하는 다른 서브 모듈에 코드를 구성하고 싶습니다.

필자는 dinamically로드하는 방법을 이해하고 있다고 생각하지만 현재 문제는 내가 항상 모듈 내에서 공용 메서드를 호출하고 모듈 하나를 다른 모듈로 호출 할 수 없다는 것입니다. 때로는 작동하지만 때로는 메시지가 나타납니다 xxx is not a function.

아마도이 질문에서 전역 네임 스페이스 (예 : MyApp)를 설정하고 해당 네임 스페이스에서 "재생"하는 방법을 모르겠다는 것입니다. 주요 모듈 (MyApp.Core)의 방법에서와 같은 서브 모듈 (MyApp.Tabs)에서 모두 ... MyApp.Tabs.detectTabs() :

나는 다음과 같은 방법으로 메소드를 호출 할 수 있도록하고 싶습니다.

인라인 자바 스크립트 :

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'] });

, 네임 스페이스 ...? 어떻게 함수를 호출해야합니까?

미리 감사드립니다.

- 오리올 -

출처

2011-02-28 user597009

참조 [이 질문] (http://stackoverflow.com/questions/4873808/migrating-from-yui2-to-yui3-and-domready를) 몇 가지 힌트. – crafter

아무것도 project-myapps-tabs에 의존하지 않기 때문에, YUI가 포함되지 않습니다. 인라인 JS이 시도 :

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

출처

2011-07-01 23:20:01 lawnsea

YUI3, 모듈, 네임 스페이스, 호출 함수

답변

관련 문제