标签：
1 function Model(value) { 2 this._value = typeof value === ‘undefined‘ ? ‘‘ : value; 3 this._listeners = []; 4 } 5 Model.prototype.set = function (value) { 6 var self = this; 7 self._value = value; 8 // model中的值改变时，应通知注册过的回调函数 9 // 按照Javascript事件处理的一般机制，我们异步地调用回调函数 10 // 如果觉得setTimeout影响性能，也可以采用requestAnimationFrame 11 setTimeout(function () { 12 self._listeners.forEach(function (listener) { 13 listener.call(self, value); 14 }); 15 }); 16 }; 17 Model.prototype.watch = function (listener) { 18 // 注册监听的回调函数 19 this._listeners.push(listener); 20 }; 21 22 // html代码： 23 <div id="div1"></div> 24 // 逻辑代码： 25 (function () { 26 var model = new Model(); 27 var div1 = document.getElementById(‘div1‘); 28 model.watch(function (value) { 29 div1.innerHTML = value; 30 }); 31 model.set(‘hello, this is a div‘); 32 })();
1 Model.prototype.bind = function (node) { 2 // 将watch的逻辑和通用的回调函数放到这里 3 this.watch(function (value) { 4 node.innerHTML = value; 5 }); 6 }; 7 8 // html代码： 9 <div id="div1"></div> 10 <div id="div2"></div> 11 // 逻辑代码： 12 (function () { 13 var model = new Model(); 14 model.bind(document.getElementById(‘div1‘)); 15 model.bind(document.getElementById(‘div2‘)); 16 model.set(‘this is a div‘); 17 })();
1 function Controller(callback) { 2 var models = {}; 3 // 找到所有有bind属性的元素 4 var views = document.querySelectorAll(‘[bind]‘); 5 // 将views处理为普通数组 6 views = Array.prototype.slice.call(views, 0); 7 views.forEach(function (view) { 8 var modelName = view.getAttribute(‘bind‘); 9 // 取出或新建该元素所绑定的model 10 models[modelName] = models[modelName] || new Model(); 11 // 完成该元素和指定model的绑定 12 models[modelName].bind(view); 13 }); 14 // 调用controller的具体逻辑，将models传入，方便业务处理 15 callback.call(this, models); 16 } 17 18 // html: 19 <div id="div1" bind="model1"></div> 20 <div id="div2" bind="model1"></div> 21 // 逻辑代码： 22 new Controller(function (models) { 23 var model1 = models.model1; 24 model1.set(‘this is a div‘); 25 });
1 function Model(value) { 2 this._value = typeof value === ‘undefined‘ ? ‘‘ : value; 3 this._listeners = []; 4 } 5 Model.prototype.set = function (value) { 6 var self = this; 7 self._value = value; 8 setTimeout(function () { 9 self._listeners.forEach(function (listener) { 10 listener.call(self, value); 11 }); 12 }); 13 }; 14 Model.prototype.watch = function (listener) { 15 this._listeners.push(listener); 16 }; 17 Model.prototype.bind = function (node) { 18 this.watch(function (value) { 19 node.innerHTML = value; 20 }); 21 }; 22 function Controller(callback) { 23 var models = {}; 24 var views = Array.prototype.slice.call(document.querySelectorAll(‘[bind]‘), 0); 25 views.forEach(function (view) { 26 var modelName = view.getAttribute(‘bind‘); 27 (models[modelName] = models[modelName] || new Model()).bind(view); 28 }); 29 callback.call(this, models);[mw_shl_code=applescript,true]<span bind="hour"></span> : <span bind="minute"></span> : <span bind="second"></span> 30 // controller: 31 new Controller(function (models) { 32 function setTime() { 33 var date = new Date(); 34 models.hour.set(date.getHours()); 35 models.minute.set(date.getMinutes()); 36 models.second.set(date.getSeconds()); 37 } 38 setTime(); 39 setInterval(setTime, 1000); 40 });
1 function Model(value) { 2 this._value = typeof value === ‘undefined‘ ? ‘‘ : value; 3 this._listeners = []; 4 } 5 Model.prototype.set = function (value) { 6 var self = this; 7 self._value = value; 8 setTimeout(function () { 9 self._listeners.forEach(function (listener) { 10 listener.call(self, value); 11 }); 12 }); 13 }; 14 Model.prototype.watch = function (listener) { 15 this._listeners.push(listener); 16 }; 17 Model.prototype.bind = function (node) { 18 this.watch(function (value) { 19 node.innerHTML = value; 20 }); 21 }; 22 function Controller(callback) { 23 var models = {}; 24 var views = Array.prototype.slice.call(document.querySelectorAll(‘[bind]‘), 0); 25 views.forEach(function (view) { 26 var modelName = view.getAttribute(‘bind‘); 27 (models[modelName] = models[modelName] || new Model()).bind(view); 28 }); 29 callback.call(this, models);[mw_shl_code=applescript,true]<span bind="hour"></span> : <span bind="minute"></span> : <span bind="second"></span> 30 // controller: 31 new Controller(function (models) { 32 function setTime() { 33 var date = new Date(); 34 models.hour.set(date.getHours()); 35 models.minute.set(date.getMinutes()); 36 models.second.set(date.getSeconds()); 37 } 38 setTime(); 39 setInterval(setTime, 1000); 40 });
标签：
原文地址：http://www.cnblogs.com/369cloud/p/5394708.html
