html MVR：模型视图反应模式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html MVR：模型视图反应模式相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<body>
<h1>Hello world</h1>
<div id="present"></div>
<script>
////////////////////////////////////////////////////////////////////////////////
// MODEL
class Model {
constructor() {
this.ready = false;
this.complete = false;
}
isReady() {
return (
!this.ready
&& !this.complete
);
}
isComplete() {
return (
this.ready
&& this.complete
);
}
}
////////////////////////////////////////////////////////////////////////////////
// VIEW
class View {
present(model) {
var contents = {template:'<div>oops... something went wrong, the system is in an invalid state</div>'};
if (model.isReady()) {
contents = this.ready({});
}
if (model.isComplete()) {
contents = this.complete({});
}
if (!model.isReady() && !model.isComplete()) {
contents = {template:'<div></div>'};
}
return contents;
}
//
render(contents, intents) {
const callback = (action, parameter) => {
return evt => {
intents[action](parameter);
evt.preventDefault();
evt.stopPropagation();
return false;
}
}
const {template, action, parameter} = contents;
const newElement = document.createElement('div');
newElement.innerHTML = template.trim();
const form = newElement.getElementsByTagName('form')[0];
if (form && action && parameter) {
form.addEventListener('submit', callback(action, parameter));
}
const element = document.getElementById('present');
if (element.childNodes.length) {
element.replaceChild(newElement.childNodes[0], element.childNodes[0]);
} else {
element.appendChild(newElement.childNodes[0]);
}
}
//
ready(data) {
return {
template: `
<div>
<p>Ready?</p>
<form>
<div class="form-group">
<input type="submit" value="Go">
</div>
</form>
</div>`,
action: 'start',
parameter: {}
};
}
complete(data) {
return {
template: `
<div>
<p>Hello! Welcome to the reactive world.</p>
<form>
<div class="form-group">
<input type="submit" value="Reset">
</div>
</form>
</div>`,
action: 'init',
parameter: {}
};
}
}
////////////////////////////////////////////////////////////////////////////////
// APPLICATION
class Application {
constructor(model, view) {
this.model = model;
this.view = view;
}
init(data) {
data.ready = false;
data.complete = false;
this.reactive(data);
}
start(data) {
data.ready = true;
this.reactive(data);
}
stop(data) {
data.complete = true;
this.reactive(data);
}
//////////////////////////////////////////////////////////////////////////////
// REACTIVE
// データでモデルを更新
// ビューにモデルを出力
// モデルから次のアクションを決定
reactive(data) {
const {model, view, present, render, nap} = this;
present(model, data);
render(model, view, this);
nap(model, this);// execute next action predicate
}
present(model, data) {
if (data.ready !== undefined) {
model.ready = data.ready;
}
if (data.complete !== undefined) {
model.complete = data.complete;
}
}
nap(model, app) {
if (!model.isReady() && !model.isComplete()) {
app.stop({});
}
}
render(model, view, intents) {
view.render( view.present(model), intents );
}
}
////////////////////////////////////////////////////////////////////////////////
// MAIN
(() => {
const model = new Model();
const view = new View();
const app = new Application(model, view);
app.init({});
})();
</script>
</body>
</html>
以上是关于html MVR：模型视图反应模式的主要内容，如果未能解决你的问题，请参考以下文章