MVC的JavaScript Web富应用开发——学习笔记（1）MVC和类

MVC是一种设计模式 它将应用划分为三个部分： 数据，展现和用户交互

一个事件的发生：

1 用户和应用产生交互

2 控制器的事件处理器被触发

3 控制器从模型中请求数据，并交给视图

4 视图数据呈现给用户

 

模型：

模型用来存放应用的所有数据对象

模型不必知晓视图和控制器的细节，模型只需要包含数据以及直接和这些数据相关的逻辑，模型是最应该从应用中解耦出来的部分。

当控制器从服务器抓取数据或创建新的纪录时，它就将数据包装成模型实例，也就是说数据是面向对象的，任何定义在这个数据模型上的函数或逻辑都可以被直接调用。

 

视图：
视图层是 呈现给用户的，用户与之产生交互。在JavaScript应用中，视图大多数是由HTML，CSS和JavaScript模板组成。除了简单的条件语句外，视图不应该包含任何其他逻辑。

将逻辑混入视图之中是编程的大忌。

这并不是说MVC不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。

我们将视觉呈现逻辑归类为“视图助手”：和视图有关的独立的小型工具函数。

 

 

控制器：
控制器是模型和视图之间的纽带。控制器从视图获得事件和输入，对它们进行处理，并相应的更新视图。当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后当用户和应用产生交互时，控制器重的事件触发器就开始工作了。

 

JavaScript中的类

当使用new关键字来调用构造函数时，执行上下文从全局对象window变成一个空的上下文，这个上下文代表一个新生成的实例。

默认情况下，如果你的构造函数中没有返回任何内容，就会返回this——当前的上下文。

 

创建类

创建自己的类模拟库

　　var Class = function(){
 　　 var klass = function(){
 　　   klass.init.apply(this, arguments);   
 　　 }
 　　 klass.prototype.init() = function(){};
 　　 return klass;
　　};
　　var Person = new Class;

　　Person.prototype.init = function() {
 　　 //基于Person的初始化内容
　　}

　　var person = new Person;

 

给类的prototype起一个别名fn，写起来也方便。

　　Person.fn = Person.prototype;
　　Person.fn.run = function(){/*......*/};

 

给类库添加方法

我们采用另外一种方法添加属性

 　　 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[i].fn = obj.[i];
　　    }
　　    if( included )
　　      included(klass);
 　　 }
 
　　var Person = new Class;
　　Person.extend({
　　     find: function(id){/*...*/},
　　     exists: function(id){/*....*/}
　　});
　　var person = Person.find(1);

 

同样，这里支持回调，即将属性传入后会触发这个回调：

　　Person.extend({
     extended: funtcion(klass) {
          console.log(klass,"was extended");
     }
　　});

 

这种写法之美在于它可以支持模块。

　　var ORMModule = {
     save: funtction() {
          //共享的函数
     }
　　};
　　Person.include(ORMModule);
　　Asset.include(ORMModule);

 

原型

JavaScript是基于原型的编程语言，原型用来区别类和实例，原型是一个“模板”对象，它上面的属性被用做初始化一个新对象。任何对象都可以作为另一个对象的原型对象，以此来共享属性。可以理解为某种形式的继承。

当你读取一个对象的属性时，JavaScript首先会在本地对象中查找属性，如果没有找到，会在对象的原型中查找，若还未找到则会继续查找原型的原型，知道找到Object.prototype。如果找到就返回值，否则返回undefined。

换句话说，如果你给Array.prototype添加了属性，那么所有的JavaScript数组都有了这些属性。

 

给类库添加继承

现在来给我们定义的“类”库添加继承，

　　var Class = function(parent){
  　　var klass = function(){
  　　  klass.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._super = klass.__proto__;

　　/*
     extend.....
     include......
　　*/

 　　 return klass;
　　};

将parent传入Class构造函数，所有的子类则会共享一个原型。

 

函数调用

JavaScript中，函数也是一个对象，然后不同的是，它是可以调用的，函数内上下文取决于调用它的位置。

除了使用方括号调用函数外，还可以用apply和call调用。

function.apply(this,[1,2,3]);

function.call(this,1,2,3);

function(1,2,3){}

JavaScript中允许更换上下文是为了共享状态，尤其是在事件回调中。

若要访问原始上下文，则可将原始上下文的this值存入一个局部变量中。

使用call和apply还有一个功能，就是将调用委托给另一个调用

即在获得参数args=jQuery.makeArray(arguments);和上下文this时， 可以调用其他部分功能相同的函数实现同样功能function.apply(this,args);

其中arguments并不是真正的数组，需要通过jQuery的makeArray转换得到可以使用的数组。

 

控制类库的作用域

 1　　 var Class = function(parent){
  　　  var klass = function(){
        this.init.apply(this, arguments);
  　　  };
  　　  klass.prototype.init = function(){};
  　　  klass.fn = klass.prototype;
  　　  // 添加一个proxy 函数
  　　  klass.proxy = function(func){
  　　      var self = this;
  　　      return(function(){
    　　        return func.apply(self, arguments);
    　　    });
   　　 }
  　　  // 在实例中也添加这个函数
  　　  klass.fn.proxy = klass.proxy;
  　　  return klass;
　　};

 

ECMAScript中加入了bind()函数用以控制调用的作用域

有的浏览器不支持bind，所以我们也可以自己手动实现bind()

　　if(!Function.prototype.bind){
 　　 Function.prototype.bind = function(obj) {
 　　   var slice = [].slice;
  　　  args = slice.call(arguments,1),
  　　  self = this,
  　　  nop = function() {},
  　　  bound = function() {
   　　   return self.apply( this instanceof nop ? this:(obj || {}),
  　　      args.concat(slice.call(arguments)));
  　　  };
  　　  nop.prototype = self.prototype;
   　　 bound.prototype = new nop;
  　　  return bound;
 　　 };
　　}

推荐es5-shim

 

添加私有函数

很多开发者习惯在私有属性下面加_， 便于区分。但是方法太丑陋。。。

我们可以利用JavaScript匿名函数来创建私有作用域。

　　var Person = function(){};
　　(function{
  　　var findById = function(){ /*....*/};

  　　Person.find = function(id) {
  　　  if( typeof id = = "integer")
  　　    return findById(id);
  　　};
　　})();

 

类库的方法：

介绍了HJS和Spine。