На MVC существует несколько школ мысли, так что дальнейшее будет вопросом мнения.Я бы обратил связь между View и Controller, чтобы только Controller знал о двух других компонентах.Возможно, модель также должна знать о представлении, но поскольку в вашем примере для этого нет сценария использования, я его проигнорирую.
Мне также кажется, что jQuery следует использовать только в представлении, а не вКонтроллер: роль jQuery состоит в том, чтобы (легко) взаимодействовать с DOM, который является ролью View.
Для вашего конкретного вопроса я бы реализовал метод reset в классе View, который другие компонентыможет позвонить, когда это уместно.Класс View также будет вызывать его сам в конструкторе:
class Model {
constructor() {}
}
class Controller {
constructor(model, view) {
this.model = model;
this.view = view;
view.onButton(this.processAction.bind(this));
view.onSelect(this.processChoice.bind(this));
}
processAction() {
this.view.highlight = true;
this.view.message("Cannot do baz.");
}
processChoice(value) {
if (value === "foo") {
this.view.reset();
} else {
this.view.showContext = true;
}
}
}
class View {
constructor() {
this.reset();
}
reset() {
this.highlight = false;
this.showContext = false;
}
onButton(listener) {
$('#button').on('click', listener);
}
onSelect(listener) {
$('#select').on('change', function (e) {
listener($(e.target).val());
});
}
set highlight(highlighted) {
$('#context-box').css('color', highlighted ? 'red' : 'initial');
}
set showContext(visibility) {
$('#context-area').toggle(visibility);
}
message(msg) {
alert(msg);
}
}
$(function() {
new Controller(new Model(), new View());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
<div hidden id="context-area">
<span id="context-box">Baz</span>
<button id="button">Do Baz?</button>
</div>
Чтобы продвинуться немного дальше, представление действительно должно нести ответственность за исходный HTML, что означает, что вы начнете с пустой страницы и представленияЭкземпляр будет заполнять его:
class Model {
constructor() {}
}
class Controller {
constructor(model, view) {
this.model = model;
this.view = view;
view.onButton(this.processAction.bind(this));
view.onSelect(this.processChoice.bind(this));
}
processAction() {
this.view.highlight = true;
this.view.message("Cannot do baz.");
}
processChoice(value) {
if (value === "foo") {
this.view.reset();
} else {
this.view.showContext = true;
}
}
}
class View {
constructor() {
this.reset();
}
reset() {
$(() => $("body").empty().append(
this.$select = $("<select>").append(
$("<option>").val("foo").text("Foo"),
$("<option>").val("bar").text("Bar")
),
this.$contextArea = $("<div>").append(
this.$contextBox = $("<span>").text("Baz"),
this.$button = $("<button>").text("Do Baz?")
).hide()
));
}
onButton(listener) {
$(() => $(document).on("click", e =>
this.$button.is(e.target) && listener()
));
}
onSelect(listener) {
$(() => $(document).on("change", e =>
this.$select.is(e.target) && listener(this.$select.val())
));
}
set highlight(highlighted) {
$(() => this.$contextBox.css('color', highlighted ? 'red' : 'initial'));
}
set showContext(visibility) {
$(() => this.$contextArea.toggle(visibility));
}
message(msg) {
alert(msg);
}
}
new Controller(new Model(), new View());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
В управляемом сервером веб-приложении компоненты MVC будут существовать на стороне сервера, и вы будете использовать возможности генерации HTML, предлагаемые такой серверной технологией.