读书笔记 ：前端MVC中的控制器，实现对元素，事件的规划
来源：互联网 发布：新加坡管理大学 知乎 编辑：程序博客网 时间：2024/06/05 12:40
<!DOCTYPE html><html><head> <meta charset=utf-8> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" charset="utf-8"> (function($, exports){ var mod = {}; //创建一个函数体 mod.create = function(includes){ //设定一个局部函数体 var result = function(){ //调用原型的initializer方法和init方法 this.initializer.apply(this, arguments); this.init.apply(this, arguments); }; result.fn = result.prototype; result.fn.init = function(){}; result.proxy = function(func){ return $.proxy(func, this); }; result.fn.proxy = result.proxy; result.include = function(ob){ $.extend(this.fn, ob); }; result.extend = function(ob){ $.extend(this, ob); }; result.include({ initializer: function(options){ this.options = options; for (var key in this.options) this[key] = this.options[key]; //初始化,绑定事件这个方法 if (this.events) this.delegateEvents(); //初始化，选择器与局部变量对的方法 if (this.elements) this.refreshElements(); }, $: function(selector){ //这里返回的是this.el下的selector的dom元素 return $(selector, this.el); }, refreshElements: function(){ for (var key in this.elements) { this[this.elements[key]] = this.$(key); } }, eventSplitter: /^(\w+)\s*(.*)$/,//按照空格隔开 delegateEvents: function(){ for (var key in this.events) { //设定方法名字 var methodName = this.events[key]; var method = this.proxy(this[methodName]); //正则表达式，分割选择器与事件 var match = key.match(this.eventSplitter); //第一个为事件，第二个为选择器 var eventName = match[1], selector = match[2]; if (selector === '') {//如果选择器为空，则用bind，绑定所有el的元素 this.el.bind(eventName, method); } else {//否则，用delegate，委托给el元素，只要冒泡出现selector的，事件为eventname的,则调用。 this.el.delegate(selector, eventName, method); } } } }); if (includes) result.include(includes); return result; }; exports.Controller = mod; })(jQuery, window); var exports = this; //主函数体的进行 jQuery(function($){ exports.SearchView = Controller.create({ //选择器与局部变量的KEY-Value elements: { "input[type=search]": "searchInput", "form": "searchForm" }, //事件 选择器 与执行原型方法名 的Key-Value events: { "submit form": "search" }, init: function(){ /* ... */ }, search: function(){ alert("Searching: " + this.searchInput.val()); return false; } }); new SearchView({el: $("#users")}); }); </script></head><body> <div id="users"> <form> <input type="search" value="" placeholder="Enter a query"> <button>Search</button> </form> </div></body>
