web前端之MVC的JavaScript Web富应用开发一：MVC和类

Posted 2020-08-25 爸爸去哪了2之熊猫三胞胎

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端之MVC的JavaScript Web富应用开发一：MVC和类相关的知识，希望对你有一定的参考价值。

web前端之MVC的javascript Web富应用开发一：MVC和类

开篇：

本书以 assert() 和 assertEqual() 函数来展示变量的值或者函数调用的结果。
assert() 是一种快捷表述方式，用来表示一个特定的变量（ revolves to true）。这在自动化测试中是一种非常常见的模式。 assert() 可以接收两个参数：一个值和一个可选的消息。如果运行结果不是真值，这个函数将抛出一个异常：

var assert = function(value, msg) {
    if ( !value )
    throw(msg || (value + " does not equal true"));
};

assertEqual() 是表示一个值等于另外一个值的另一种表述。它和 assert() 类似，但接收两个值。如果这两个值不相等，则这个断言失败：

var assertEqual = function(val1, val2, msg) {
    if (val1 !== val2)
    throw(msg || (val1 + " does not equal " + val2));
};

本书不会教给你 JavaScript 是一门什么样的语言，你可以阅读本人其它的博客进行学习，但是本书将会向你展示如何搭建复杂的 JavaScript 应用，教你创造不可思议的网络用户体验。

增加结构：

构建大型的 JavaScript 应用的秘诀是不要构建大型 JavaScript 应用。相反，你应当把你的应用解耦成一系列相互平等且独立的部分。开发者常犯的错误是创建应用时使用了很多互相依赖的部分，用了很多 JavaScript 文件，并在 html 页面中用大量的 script 标签引入这些文件。这类应用非常难于维护和扩展，因此无论如何都应当避免这种情况的发生。

开始构建你的应用的时候，花点精力来做应用的架构，会为最终结果带来意想不到的改观。不管你之前怎么看待 JavaScript，从现在开始将它当做一门面向对象的编程语言来对待。

本书提倡使用 MVC 模式，这是一种久经考验的搭建应用的方式，可以确保应用的可维护性和可扩展性。 MVC 模式完全适用于 JavaScript 应用。

什么是 MVC：

MVC 是一种设计模式，它将应用划分为 3 个部分：数据（模型）、展现层（视图）和用户交互层（控制器）。换句话说，一个事件的发生是这样的过程：
1．用户和应用产生交互。
2．控制器的事件处理器被触发。
3．控制器从模型中请求数据，并将其交给视图。
4．视图将数据呈现给用户。

我们可以不用类库或框架就实现这种 MVC 架构模式。关键是要将 MVC 的每部分按照职责进行划分，将代码清晰地分割为若干部分，并保持良好的解耦。这样可以对每个部分进行独立开发、测试和维护。

模型：

模型用来存放应用的所有数据对象。比如，可能有一个 User 模型，用以存放用户列表、他们的属性及所有与模型有关的逻辑。
模型不必知晓视图和控制器的细节，模型只需包含数据及直接和这些数据相关的逻辑。任何事件处理代码、视图模板，以及那些和模型无关的逻辑都应当隔离在模型之外。将模型和视图的代码混在一起，是违反 MVC 架构原则的。模型是最应该从你的应用中解耦出来的部分。
当控制器从服务器抓取数据或创建新的记录时，它就将数据包装成模型实例。也就是说，我们的数据是面向对象的（ object oriented），任何定义在这个数据模型上的函数或逻辑都可以直接被调用。
因此，不要这样做：
var user = users[“foo”];
destroyUser(user);
而要这样做：
var user = User.find(“foo”);
user.destroy();

视图：

视图层是呈现给用户的，用户与之产生交互。在JavaScript应用中，视图大都是由HTML、CSS和JavaScript模板组成的。除了模板中简单的条件语句之外，视图不应当包含任何其他逻辑。
实际上，和模型类似，视图也应当从应用的其他部分中解耦出来。视图不必知晓模型和控制器中的细节，它们是相互独立的。将逻辑混入视图之中是编程的大忌。
这并不是说 MVC 不允许包含视觉呈现相关的逻辑，只要这部分逻辑没有定义在视图之内即可。我们将视觉呈现逻辑归类为“ 视图助手”（ helper）：和视图有关的独立的小型工具函数。
来看下面的例子，视图中包含了逻辑，这是一个反例，平时不应当这样做：

// template.html
<div>
    <script>
        function formatDate(date) {
            /* ... */
        };
    </script>
    ${ formatDate(this.date) }
</div>

可以将视觉呈现逻辑剥离出来放入视图助手中，正如下面的代码就避免了这个问题，可以让这个应用的结构满足 MVC。

// helper.js
var helper = {};
helper.formatDate = function(){ /* ... */ };
// template.html
<div>
    ${ helper.formatDate(this.date) }
</div>

所有视觉呈现逻辑都包含在 helper 变量中，这是一个命名空间，可以防止冲突并保持代码清晰、可扩展。

控制器：

控制器是模型和视图之间的纽带。控制器从视图获得事件和输入，对它们进行处理（很可能包含模型），并相应地更新视图。当页面加载时，控制器会给视图添加事件监听，比如监听表单提交或按钮点击。然后，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。
不用使用类库和框架也能实现控制器，下面这个例子就是使用简单的 jQuery 代码来实现的：

var Controller={};
//使用匿名函数封装一个作用域
(Controller.users=function($){
    var nameClick=function(){
        /*....*/
    };
    //在页面加载是绑定事件监听
    $(function(){
        $("#view .name").click(nameClick);
    });
})(jQuery);

我们创建了 users 控制器，这个控制器是放在 Controller 变量下的命名空间。然后，我们使用了一个匿名函数封装了一个作用域，以避免对全局作用域造成污染。当页面加载时，程序给视图元素绑定了点击事件的监听。

向模块化进军，创建类：

JavaScript 是基于原型的编程语言，并没有包含内置类的实现。但通过 JavaScript 可以轻易地模拟出经典的类。
JavaScript 中并没有真正的类，但 JavaScript 中有构造函数和 new 运算符。构造函数用来给实例对象初始化属性和值。任何 JavaScript 函数都可以用做构造函数，构造函数必须使用 new 运算符作为前缀来创建新的实例。
new 运算符改变了函数的执行上下文，同时改变了 return 语句的行为。实际上，使用 new和构造函数和传统的实现了类的语言中的使用方法是很类似的：

var assert = function(value, msg) {
    if ( !value )
    throw(msg || (value + " does not equal true"));
};
var assertEqual = function(val1, val2, msg) {
    if (val1 !== val2)
    throw(msg || (val1 + " does not equal " + val2));
};
var Person=function(name){
    this.name=name;
};
//实例化一个Person
var alice=new Person("alice");
//检查这个实例
assert(alice instanceof Person);

构造函数的命名通常使用驼峰命名法，首字母大写，以此和普通的函数区分开来，这是一种习惯用法。

当使用 new 关键字来调用构造函数时，执行上下文从全局对象（ window）变成一个空的上下文，这个上下文代表了新生成的实例。因此， this 关键字指向当前创建的实例。

默认情况下，如果你的构造函数中没有返回任何内容，就会返回 this——当前的上下文。要不然就返回任意非原始类型的值。比如，我们可以返回一个用以新建一个新类的函数，第一步要做的是创建自己的类模拟库：

var Class=function(){
    var klass=function(){
        this.init.apply(this,arguments);
    };
    klass.prototype.init=function(){};
    return klass;
};
var Person =new Class;
Person.prototype.init=function(){
    //基于Person的实例化
};
//用法：
var person =new Person;

给类添加函数：

在 JavaScript 中，在构造函数中给类添加函数和给对象添加属性是一模一样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var Class=function(){
    var klass=function(){
        this.init.apply(this,arguments);
    };
    klass.prototype.init=function(){};
    return klass;
};
var Person =new Class;
Person.prototype.init=function(){
    //基于Person的实例化
};
Person.find=function(id){
    alert(id);
};
//用法：
var person =new Person.find(1);
</script>
</head>
<body>

</body>
</html>

要想给构造函数添加实例函数，则需要用到构造函数的 prototype ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
var Class=function(){
    var klass=function(){
        this.init.apply(this,arguments);
    };
    klass.prototype.init=function(){};
    return klass;
};
var Person =new Class;
Person.prototype.init=function(){
    //基于Person的实例化
};
Person.find=function(id){
    alert(id);
};
Person.prototype.breath = function(){
    alert("1");
};
//用法：
var person =new Person;
person.breath();
</script>
</head>
<body>
    </body>
</html>

给“ 类” 库添加方法：

现在，我们的“ 类” 库包含了生成一个实例并初始化这个实例的功能，给类添加属性和给构造函数添加属性是一样的。

上面给类添加函数，很难一眼就分辨出类的静态属性和实例的属性。因此我们采用另外一种不同的方法来给类添加属性，这里用到了两个函数extend() 和 include() ：

var Class=function(){
    var klass=function(){
        this.init.apply(this,arguments);
    };
    klass.prototype.init=function(){};
    //定义prototype的别名
    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);
        }
    };
    return klass;
};

这段代码是“ 类” 库的增强版，我们使用 extend() 函数来生成一个类，这个函数的参数是一个对象。通过迭代将对象的属性直接复制到类上：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>extend() 和 include()</title>
<script type="text/javascript">
var Class=function(){
    var klass=function(){
        this.init.apply(this,arguments);
    };
    klass.prototype.init=function(){};
    //定义prototype的别名
    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);
        }
    };
    return klass;
};
var Person =new Class;
Person.extend({
    find:function(id){
        alert(id);
    }
    ,exists:function(){
        alert("FZW");
    }
});
var person=Person.find(1);
</script>
</head>
<body>

</body>
</html>

include() 函数的工作原理也是一样的，只不过不是将属性复制至类中，而是复制至类的原型中。换句话说，这里的属性是类实例的属性，而不是类的静态属性。

***
var Person =new Class;
Person.include({
    find:function(id){
        alert(id);
    }
    ,exists:function(){
        alert("FZW");
    }
});
var person=new Person;
person.find(1);
***

同样地，这里的实现支持 extended 和 included 回调。将属性传入对象后就会触发这两个回调：

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

基于原型的类继承：

prototype 属性：
JavaScript 是基于原型的编程语言，原型用来区别类和实例，这里提到一个概念：原型对象。原型是一个“ 模板” 对象，它上面的属性被用做初始化一个新对象。任何对象都可以作为另一个对象的原型对象，以此来共享属性。实际上，可以将其理解为某种形式的继承。
当你读取一个对象的属性时， JavaScript 首先会在本地对象中查找这个属性，如果没有找到， JavaScript 开始在对象的原型中查找，若还未找到还会继续查找原型的原型，直到查找到 Object.prototype。如果找到这个属性，则返回这个值，否则返回 undefined。换句话说，如果你给 Array.prototype 添加了属性，那么所有的 JavaScript 数组都具有了这些属性。
为了让子类继承父类的属性，首先需要定义一个构造函数。然后，你需要将父类的新实例赋值给构造函数的原型：

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.prototype.init=function(){};
    //定义别名
    klass.fn=klass.prototype;
    klass.fn.parent=klass;
    klass._super=klass.__proto__;
    /*include/extend相关代码*/
    return klass;
};

如果将 parent 传入 Class 构造函数，那么所有的子类则必然共享同一个原型。这种创建临时匿名函数的小技巧避免了在继承类的时候创建实例，这里暗示了只有实例的属性才会被继承，而非类的属性。设置对象的 proto ；属性并不是所有浏览器都支持。
现在，我们可以通过给 Class 传入父类来实现简单的继承：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>给“ 类” 库添加继承</title>
<script type="text/javascript">
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.prototype.init=function(){};
    //定义别名
    klass.fn=klass.prototype;
    klass.fn.parent=klass;
    klass._super=klass.__proto__;
    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);
        }
    };
    return klass;
};
var Animal=new Class;
Animal.include({
    breath:function(){
        console.log("breath");
    }
});
var Cat=new Class(Animal);
//用法
var tommy=new Cat;
tommy.breath();
</script>
</head>
<body>  
</body>
</html>

函数调用：

在 JavaScript 中，函数和其他东西一样都是对象。然而，和其他对象不同的是，函数是可调用的。函数内上下文，如 this 的取值，取决调用它的位置和方法。除了使用方括号可以调用函数之外，还有其他两种方法可以调用函数： apply() 和call()。两者的区别在于传入函数的参数的形式。
apply() 函数有两个参数：第 1 个参数是上下文，第 2 个参数是参数组成的数组。如果上下文是 null，则使用全局对象代替。例如：
function.apply(this, [1, 2, 3])
call() 函数的行为和 apply() 函数的并无不同，只是使用方法不一样。 call() 的第 1 个参数是上下文，后续是实际传入的参数序列。换句话说，这里使用多参数——而不是类似 apply()的数组——来将参数传入函数。
function.call(this, 1, 2, 3);

jQuery 在其 API 的实现中就利用了 apply() 和 call() 来更改上下文，比如在事件处理程序中或者使用 each() 来做迭代时。起初这很让人费解，一旦你理解了就会发现它非常有用：

$(‘.clicky‘).click(function(){
    //this指向当前节点
    $(this).hide();
});
$(‘p‘).each(function(){
    //this指向本次迭代
    $(this).remove();
});

为了访问原始上下文，可以将 this的值存入一个局部变量中，这是一种常见的模式，比如：

var clicky={
    wasClicked:function(){
        /*...*/
    },
    addListeners:function(){
        var self=this;
        $(‘.clicky‘).click(function(){
            self.wasClicked();
        });
    }
};
clicky.addListeners();

然而，我们可以使用 apply 来将这段代码变得更干净一些，通过将回调包装在另外一个匿名函数中，来保持原始的上下文：

var proxy=function(func,thisObject){
    return(function(){
        return func.apply(thisObject,arguments);
    });
};
var clicky={
    wasClicked:function(){
        /*...*/
    },
    addListeners:function(){
        var self=this;
        $(‘.clicky‘).click(proxy(this.wasClicked,this));
    }
};

因此在上面的例子中，我们在点击事件的回调中指定了要使用的上下文； jQuery 中调用这个函数所用的上下文就可以忽略了。实际上， jQuery 也包含了实现了这个功能的 API，你或许已经猜到了 jQuery.proxy() ：
$(‘.clicky’).click($.proxy(function(){ /* … */ }, this));

控制“ 类” 库的作用域：

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;
    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);
        }
    };
    return klass;
};
var Button=new Class;
Button.include({
    init:function(element){
        this.element=jQuery(element);
        //代理了这个click函数
        this.element.click(this.proxy(this.click));
    },
    click:function(){
        /***/
    }
});

如果我们没有使用 proxy 将 click() 的回调包装起来，它就会基于上下文 this.element来调用，而不是 Button，这会造成各种问题。在新版本的 JavaScript——ECMAScript 5（ ES5） ——中同样加入了 bind() 函数用以控制调用的作用域。 bind() 是基于函数进行调用的，用来确保函数是在指定的 this 值所在的上下文中调用的。例如：

Button.include({
    init: function(element){
        this.element = jQuery(element);
        // 绑定这个 click 函数
        this.element.click(this.click.bind(this));
    },
    click: function(){ /* ... */ }
});

这个例子和我们的 proxy() 函数是等价的，它能确保 click() 函数基于正确的上下文进行调用。但老版本的浏览器不支持 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;
    };
}

如果浏览器原生不支持 bind()，我们仅仅重写了 Function 的原型。现代浏览器则可以继续使用内置的实现。对于数组来说这种“ 打补丁” 式的做法非常有用，因为在新版本的 JavaScript 中，数组增加了很多新的特性。

添加私有函数：

迄今为止，我们为“ 类” 库添加的属性都是“ 公开的”，可以被随时修改。现在我们来探究一下如何给“ 类” 添加私有属性。

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

我们将类的属性都包装进一个匿名函数中，然后创建了局部变量（ findById），这些局部变量只能在当前作用域中被访问到。 Person 变量是在全局作用域中定义的，因此可以在任何地方都能访问到。
定义变量的时候不要丢掉 var 运算符，因为如果丢掉 var 就会创建全局变量。如果你需要定义全局变量，在全局作用域中定义它或者定义为 window 的属性：