자바 스크립트 MVC 코드를 AMD 모듈로 구성하는 방법은 무엇입니까? 나는 다양한 시각화 구성 요소와 웹 응용 프로그램을 짓고 있어요

Question

는 Backbone.js 모델과 뷰의 구성 :

예제의 "PopulationVisualization 구성 요소"힘이 있습니다

• 메인 모델 - 저장 구성 요소의 상태
• 여러 백본 뷰 (timesliderView 등,이 legendView) - 모델에 변경을 듣고

이들 성분은 모두 외부 dataManagers에 의존 dataSource 객체는 그렇지 않으면 분리되어 있어야합니다.

주어진 페이지에서 PopulationVisualization 구성 요소의 인스턴스를 인스턴스화하고 싶습니다. 또한 해당 구성 요소의 주 모델에서 변경 사항을 수신하여 해당 URL의 상태를 직렬화 할 수 있습니다.

1) AMD 모듈 패턴 채택을 시도하면 어떻게됩니까?
2) PopulationVisualization 구성 요소 중 하나 또는 여러 모듈을 하나만 만들까요?
3) 모듈 수준 메소드를 API로 노출 시키거나 내부 모델 및 뷰를 직접 조작 할 수 있습니까?

감사합니다.

Answer 1

는 세 응답, 여기 내 조언은, 당신에게 질문에 대답하려면 :

모듈은 가능한 작게해야한다, 그래서 각 뷰, 모듈에 대한 하나의 새로운 모듈을 만들 것이고, 직렬화 하나 논리. 그런 다음 외부 코드가 모델, 뷰 또는 직렬화를 처리 할 필요가 없도록 모든 것을 함께 묶는 모듈 하나를 만들 것입니다. 한편 만 require("components/populationVisualization")하고 적절한 매개 변수를 해당 모듈의 createAndRender 메서드를 호출 할 응용 프로그램에서

// components/populationVisualization/Model.js 
define(function (require, exports, module) { 
    return Backbone.Model.extend({ /* ... */}); 
}); 

// components/populationVisualization/views/Timeslider.js 
define(function (require, exports, module) { 
    return Backbone.View.extend({ /* ... */}); 
}); 

// components/populationVisualization/views/Legend.js 
define(function (require, exports, module) { 
    return Backbone.View.extend({ /* ... */}); 
}); 

// components/populationVisualization/serializer.js 
define(function (require, exports, module) { 
    exports.setupSerialization = function (model) { 
    // ... 
    }; 
}); 

// components/populationVisualization.js 
define(function (require, exports, module) { 
    var Model = require("./populationVisualization/Model"); 
    var TimesliderView = require("./populationVisualization/views/Timeslider"); 
    var LegendView = require("./populationVisualization/views/Legend"); 
    var serializer = require("./populationVisualization/serializer"); 

    exports.createAndRender = function (modelParams, $el) { 
    var model = new Model(modelParams); 
    serializer.setupSerialization(model); 

    var timesliderView = new TimesliderView({ model: model }); 
    var legendView = new LegendView({ model: model }); 

    $el.append(timesliderView.el); 
    $el.append(legendView.el); 
    }; 
}); 

:

---

다음은이 같은에서 처음 자상이다.