讀書筆記：前端MVC中的控制器，實現對元素，事件的規劃

原創

2018-09-02 23:23

<!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>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

讀書筆記：前端MVC中的控制器，實現對元素，事件的規劃

讀書筆記:自定義事件和jQuery插件

ie獲得document.documentElement.clientWidth爲0

微信開放平臺接口java版

MongoDB Linux下的安裝和啓動

構造函數的繼承(轉自http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

讀書筆記 ：前端MVC中的控制器，實現對元素，事件的規劃

讀書筆記：前端MVC中的控制器，實現對元素，事件的規劃