mvc-1mvc和类(1)

简单的控制器结构

var  Controller = {};
    //创建一个users控制器
    (Controller.users = function ($) {
      var nameClick = function() {
           //....
      };
      $(function() {
        $("#click").click(nameClick);
      });
})(jQuery);

即

var Controller = {
  user: function($) {
    var userClick = function() {
      //....
    };
    $(function() {
      $("#tabs").click(userClick);
    })
  }
};
Controller.user(jQuery);

创建类

var Class = function() {
  //js保留了class名称
  var klass = function() {
  //this为创建的实例，其在编译阶段就被赋予相应属性了；
    this.init.apply(this, arguments);
  }    
  klass.prototype.init = function() {this.name = "klass"};
  return klass;
}
//这里等价于var Person = Class();
var Person = new Class;

Person.prototype.init = function() {this.name = "person"};
//生成的实例的类型为Klass
var person = new Person;

根据传入参数稍作处理

var Class = function () {
  var klass = function() {
    arguments = arguments[0];
    this.init.call(this, arguments);
  }
  klass.prototype.init = function(obj) {
    var name = obj.name || "klass";
    this.name = name;
  }
  return klass;
};
var Person = new Class;
Person.prototype.init = function(obj) {
  var name = obj.name || "person";
  this.name = name;
};
var person = new Person({name:"jinks"});

给“类”库添加方法

var Class = function() {
  var klass = function() {
    this.init.apply(this, arguments)
  };  
  klass.fn = klass.prototype;
  klass.fn.parent = klass;
  klass.fn.init = function(){};
  //这是给类方法添加方法
  klass.extend = function(obj) {
    var extended = obj.extended;
    for(var prop in obj) {
      klass[prop] = obj[prop];
    } 
    extended && extended(klass);
  }
  //与extend不同，方法使直接写进继承的原型中
  klass.include = function(obj) {
    var included = obj.included;
    for(var prop in obj) {
      klass.fn[prop] = obj[prop];
    } 
    included && included(klass);
  }
  return klass;
}
//Person通过fn属性来访问klass.prototype
var Person = new Class;

Person.prototype.init = function() {
  this.name = "person";
  //...
}
//注意这是方法不是对象，不是引用地址，所以每个类添加的方法不会共用
Person.extend({
  find: function() {},
  exists: function() {},
});
//添加给类方法的原型中，所以同一类方法的实例都会有
Person.include({
  save: function() {},
  destroy: function() {}
});
//person通过parent来访问klass
var person = new Person;
    

基于原型的类继承

var Animal = function() {};
Animal.prototype.breath = function() {
    console.log("breath");
}
var Dog = function() {};
//Dog继承了Animal
Dog.prototype = new Animal;
Dog.prototype.wag = function() {
    console.log("wag tail");
}    

var dog = new Dog;
dog.wag();
dog.breath();

给“类”库添加继承

var Class = function(parent) {
  var klass = function() {
    this.init.apply(this, arguments);
  }
  //基于基于原型的类继承，改变klass原型    
  if(parent) {
    var subclass = function() {};
    subclass.prototype = parent.prototype;
    klass.prototype = new subclass;
  }
  klass.fn = klass.prototype;
  klass.fn.parent = klass;
  klass.fn.init = function(){};
  /*include和extend代码*/
 
  return klass
}
var Animal = new Class;
Animal.include({
  breath: function() {}
});
var Cat = new Class(Animal);
var tommy = new Cat;
tommy.breath();

控制"类"库的作用域

var Class = function(parent) {
  var klass = function() {
    this.init.apply(this, arguments);
  } 
  if(parent) {
    var subclass = function() {};
    subclass.prototype = parent.prototype;
    klass.prototype = new subclass;
  } 
  klass.prototype.init = function() {};
  klass.fn = klass.prototype;
  klass.fn.parent = klass;

  klass.extend = function(obj) {
    var extended = obj.extended;
    for(var i in obj) {
      klass[i] = obj[i];
    }
    if(extended) extended(klass)
  };
  klass.include = function(obj) {
    var included = obj.included;
    for(var i in obj) {
      klass.fn[i] = obj[i];
    }
    if(included) included(klass)
  }
  klass.proxy = function(func) {
    var self = this;
    return (function() {
      return func.apply(self, arguments);
    });
  }
  klass.fn.proxy = klass.proxy;
  return klass;
}
var Button = new Class;

Button.extend({
  init: function(elem) {
  this.elem = jQuery(elem);
    this.elem.click(this.proxy(this.click));
    //上面其实等价于：  this.elem.click(this.click.bind(this));
  },
  click: function() {alert(0)}
});

Button.init("button");