30行のコードのみJavascriptのMVCを実現します.

function Model(value) {
  this._value = typeof value === 'undefined' ? '' : value;
  this._listeners = [];
}
Model.prototype.set = function (value) {
  var self = this;
  self._value = value;
  // model      ，           
  //   Javascript         ，           
  //     setTimeout    ，     requestAnimationFrame
  setTimeout(function () {
    self._listeners.forEach(function (listener) {
      listener.call(self, value);
    });
  });
};
Model.prototype.watch = function (listener) {
  //          
  this._listeners.push(listener);
};

// html  ：

//     ：
(function () {
  var model = new Model();
  var div1 = document.getElementById('div1');
  model.watch(function (value) {
    div1.innerHTML = value;
  });
  model.set('hello, this is a div');
})();

Model.prototype.bind = function (node) {
  //  watch               
  this.watch(function (value) {
    node.innerHTML = value;
  });
};

// html  ：


//     ：
(function () {
  var model = new Model();
  model.bind(document.getElementById('div1'));
  model.bind(document.getElementById('div2'));
  model.set('this is a div');
})();

function Controller(callback) {
  var models = {};
  //      bind     
  var views = document.querySelectorAll('[bind]');
  //  views       
  views = Array.prototype.slice.call(views, 0);
  views.forEach(function (view) {
    var modelName = view.getAttribute('bind');
    //             model
    models[modelName] = models[modelName] || new Model();
    //         model   
    models[modelName].bind(view);
  });
  //   controller     ， models  ，      
  callback.call(this, models);
}

// html:


//     ：
new Controller(function (models) {
  var model1 = models.model1;
  model1.set('this is a div');
});

function Model(value) {
  this._value = typeof value === 'undefined' ? '' : value;
  this._listeners = [];
}
Model.prototype.set = function (value) {
  var self = this;
  self._value = value;
  setTimeout(function () {
    self._listeners.forEach(function (listener) {
      listener.call(self, value);
    });
  });
};
Model.prototype.watch = function (listener) {
  this._listeners.push(listener);
};
Model.prototype.bind = function (node) {
  this.watch(function (value) {
    node.innerHTML = value;
  });
};
function Controller(callback) {
  var models = {};
  var views = Array.prototype.slice.call(document.querySelectorAll('[bind]'), 0);
  views.forEach(function (view) {
    var modelName = view.getAttribute('bind');
    models[modelName] = models[modelName] || new Model();
    models[modelName].bind(view);
  });
  callback.call(this, models);
}

後記:
fluxとreduxを勉強しているうちに、ツールの使い方を身につけましたが、それを知っているだけです.だから、ReactJS公式文書で強調されている「Flux eschews MVC in favor of a unidirectional data flow」はよく分かりません.データフローとMVCは衝突しないと思います.なぜReactJSの文書の中でこの両者が対立しているのか分かりません.彼がいても私がいなくても、私がいても彼がいます.やっと决心しました.MVCの定义に戻り、もう一度研究してみます.普段の仕事は大雑把にコピーして贴り付けますが、たまにはわがままにして、かみ砕いてみましょう.MVCとfluxの一方的なデータの流れが似ていると思うのは、MVCと観察者モードの関係がはっきりしていないためかもしれません.MVCは観察者モードに基づいています.fluxも同じです.MVCやflux自体ではありません.このような理解も4つのグループのデザインモデルの原書で実証されました.「The first and perharst-known example of the Observer patternappars in Smalltalk Model/View/Conttrler(MVC)、the user interface framboboork the the Smallatttthe Smatals the the Smaclclclinininininininininininininininincleeemmmclcleeemmclininininininininininininininclattttstststststststststststststststststststststststststservers.」
もし読者がこのような原型のおもちゃに興味があるなら、次の方向を参考にしてください.

1.input類ラベルへの双方向バインディングを実現する

.

.controllerによって制御されるscopeの正確な制御を実現し、ここで一つのcontrollerはdomツリー全体を制御した

.

.view層のdom node隠し/表示、作成/廃棄を実現するロジック

.virtual domを統合し、dom diffの機能を増加させ、レンダリング効率を向上させる.

.注入依存機能を提供し、制御反転

を実現する.

.innerHTMLの割当内容についてセキュリティチェックを行い、悪意のある注入を防止する

.model collectionを実現するロジックであり、ここでは各modelは一つの値

だけである.

.es 5のsetterを利用してset方法の実現を変更し、modelの修正をより簡単にする.

9.view層に属性とcssの制御を追加する

.

10.AnglarJSのような二大括弧の文法をサポートしています.部分だけを結びつける

.

…

完璧な枠组みは无数の试练と修正を経なければならない.ここは最初の一歩で、道はまだ长いです.