Javascript MVC 学习笔记（一） 模型和数据

写在前面

近期在看《MVC的Javascript富应用开发》一书。本来是抱着一口气读完的想法去看的。结果才看了一点就傻眼了：太多不懂的地方了。

仅仅好看一点查一点，一点一点往下看吧，进度虽慢但也一定要坚持看完。

本学习笔记是对书上所解说内容的理解和记录。

笔记里的代码大多会按书上摘录下来，由于《MVC的Javascript富应用开发》是结合了JQuery库。所以对于JQuery中不太懂的知识点也会附在代码后面，也算是一些额外的收获。

要学习MVC，首先得知道MVC是什么。MVC有三个字母，代表了它将应用划分为了三个部分：数据（模型Model）、展现层（视图View）和用户交互层（控制器Controller）。

对于採用MVC模式搭建的应用，一个事件的发生是这种过程：

1. 用户和应用产生交互
2. 控制器的事件处理器被触发
3. 控制器从模型中请求数据，并将其交给视图
4. 视图将数据呈现给用户

MVC的目的在于将M和V的实现代码分离，从而使同一个程序能够使用不同的表现形式。

介绍完MVC，就開始分别学习MVC三个组成部分了。

模型用来存放应用的全部数据对象，它仅仅需包括数据以及直接和这些数据相关的逻辑。像其它什么事件监听、视图模版都应该隔离在模型之外。当控制器从server抓取数据或创建新的记录时，它就将数据包装成模型实例

比方你的应用里可能有非常多用户相关的数据：比方从server拿到的用户的name、id。在应用里面，又会对用户进行加入、改动、删除。那么用户就应该成为你的一个模型。

一个应用可能有多个模型（比方用户、商品），所以书中创建了一个Model对象，代表模型，对于不同的模型。将使用create方法创建，对于模型中详细的数据对象，使用init方法实例化。（听起来有点像类和对象），所以我们最后要实现的模型应该是以下的样子：

//创建Asset模型

var Asset = Model.create();

//实例化一个Asset的对象

var asset = Asset.init();

asset.name = “same, same”;

asset.id = 1;

asset.save();
//实例化另一个Asset的对象

var asset2 = Asset.init();

asset2.name = “but different”;

asset2.id = 2;

asset2.save();

详细是怎么实现的先不要急，一步一步来看。

构建对象关系映射（ORM）

对象关系映射（Object-relational mapper）是一种常见的数据结构，本质上讲，ORM是一个包装了一些数据的对象层。比方上面的Asset，就是对用户数据的包装。

首先，创建一个Model对象，Model对象用于创建新模型的实例。

var Model = {


//返回继承自Model的对象（创建一个新模型）<br/>
create: function () {<br/>
    var object = Object.create(this);<br/>
    object.parent = this;<br/>
    object.prototype = object.fn = Object.create(this.prototype);


return object;


},<br/>
//返回继承自Model的原型的对象（实例化一个模型）<br/>
init: function () {<br/>
    var instance = Object.create(this.prototype);<br/>
    //实例能够通过parent属性訪问其Model<br/>
    instance.parent = this;<br/>
    //进行初始化<br/>
    instance.init.apply(instance, arguments);<br/>
    return instance;<br/>
},<br/>
//Model的原型对象<br/>
prototype: {<br/>
    //初始化操作<br/>
    init: function () {<br/>
    }<br/>
}<br/>


}

这个Model定义了create方法和init方法。像上面说的。create用于创建新模型。init方法用于创建一个模型实例，例如以下：

var Asset = Model.create();

var User = Model.create();
var asset = Asset.init();

var user = User.init();

（注）Object.create

上面代码重点在于Object.create()这种方法。这种方法返回一个对象。返回对象继承自方法接收的參数。假设没有參数。则继承自Object，如：

var src = {


name: &#34;zhangsan&#34;<br/>


}

var dest = Object.create(src);

console.log(dest.name);     //“zhangsan”

关于对象和其prototype对象之间的关系，能够查看前面的学习笔记：Javascript继承。

（注解完）

加入ORM属性

书中继续为Model创建了两个方法，extend和include。前者是为模型加入对象属性，后者为模型加入实例属性，例如以下：

var Model = {


/*省略create、init等方法*/


//加入对象属性


extend: function (o) {<br/>
    var extended = o.extended;<br/>
    //jQuery中extend的使用见后面注解<br/>
    $.extend(this, o);<br/>
    if (extended) {<br/>
        //假设參数有这个属性。将Model传给它并调用它（回调）<br/>
        extended(this);<br/>
    }<br/>
},<br/>
//加入实例属性<br/>
include: function (o) {<br/>
    var included = o.included;<br/>
    $.extend(this.prototype, o);<br/>
    if (included) {<br/>
        included(this);<br/>
    }<br/>
}<br/>


}

加入完之后。能够这样使用：

Model.extend({


find: function(){<br/>
    console.log(&#34;find&#34;);<br/>
}<br/>


})
Model.include({


init: function(){<br/>
    console.log(&#34;init&#34;);<br/>
},<br/>
load: function(){<br/>
    console.log(&#34;load&#34;);<br/>
}<br/>


});

对象属性意思是直接通过模型訪问的，实例属性意思是通过实例訪问，比方：

var Asset = Model.create();

Asset.find();   //“find”

var asset = Model.init();   //“init” Model的init方法中会调用实例的init方法。（见Model里init方法的实现）

asset.init();   //“init”

asset.load();   //“load”

（注）jQuery.extend()

extend方法能够将多个对象合并到一个对象中并返回。

一、$.extend(dest, src1, src2, src3,…)

将src1、src2以及后面的对象合并到dest对象中。返回合并后的dest（后面的对象中假设有前面对象内同名的属性。后面的对象属性值将覆盖前面的）

var dest = {


name: &#34;张三&#34;,<br/>
age: 20<br/>


};
var src1 = {


school: &#34;蓝翔&#34;<br/>


}
var src2 = {


name: &#34;狗蛋&#34;,<br/>
school: &#34;新东方&#34;<br/>


}
var obj = \(.extend(dest, src1, src2);
console.log(obj === dest);  //true<br/>
console.log(obj);   //{&#34;name&#34;:&#34;狗蛋&#34;,&#34;age&#34;:20,&#34;school&#34;:&#34;新东方&#34;}</code></pre>
<p>所以通过这种方法使用后dest的结构会改变。假设不想改变dest的结构。能够让第一个參数是一个空对象，即另外一种用法：</p>
<p><strong>二、\).extend({}, dest, src1, src2, …)
var obj = \(.extend({}, dest, src1, src2);
console.log(obj);   //{&#34;name&#34;:&#34;狗蛋&#34;,&#34;age&#34;:20,&#34;school&#34;:&#34;新东方&#34;}</code></pre>
<p>这样输出也是一样的，只是dest的结构没有改变。</p>
<p><strong>三、\).extend(src1) 


通过这种方式调用，src1将被合并到全局变量中去。

\(.extend(src1);<br/>
console.log(\).school); //“蓝翔”
四、$.extend(boolean, dest, src1, src2) 


当extend第一个參数是一个布尔型的时候，它将代表是否要进行深度拷贝，true代表进行深度拷贝。即将对象的子对象也进行合并。
当设置为false时。子对象将直接被覆盖。
var dest = {


name: &#34;张三&#34;,<br/>
age: 20,<br/>
girlFriend: {<br/>
    name: &#34;小丽&#34;,<br/>
    school: &#34;清华&#34;<br/>
}<br/>


};
var src1 = {


school: &#34;蓝翔&#34;,<br/>
girlFriend: {<br/>
    weight: 100,<br/>
    height: 165<br/>
}<br/>


}
var obj = \(.extend(false, dest, src1);<br/>
console.log(obj.girlFriend);    //{&#34;weight&#34;:100,&#34;height&#34;:165}</code></pre>
<p>设置为true时，对子对象也进行合并</p>
<pre><code>var obj = \).extend(true, dest, src1);

console.log(obj.girlFriend);    //{“name”:“小丽”,“school”:“清华”,“weight”:100,“height”:165}
对于前三种用法，根本没有第一个參数。都没有进行深度拷贝。
（注解完）
jQuery.extend(this, o)jQuery.extend(this.prototype, o)
持久化记录
我们如今能够创建多种模型。也能为一种模型创建多个实例，如今须要做的是将记录持久化，也就是将创建的实例保存起来。
我们在Model中加入一个records对象用于保存实例，当创建一个实例时，指定其id，存入records内；当删除实例的时候。就将实例从records中删除。
//用于保存资源的对象

Model.records = {};
//由于是实例的方法。所以调用include

Model.include({


//是否为新对象<br/>
newRecord: true,


//实例的创建


create: function(){<br/>
    this.newRecord = false;<br/>
    //加入进Model的records中（实例能够通过parent属性訪问Model，见Model的init方法实现）<br/>
    this.parent.records[this.id] = this;<br/>
},


//实例的销毁


destroy: function(){<br/>
    delete this.parent.records[this.id];<br/>
},


//更新实例


update: function(){<br/>
    this.parent.records[this.id] = this;<br/>
}<br/>


})
这样保存新实例的时候调用create。更新的时候调用update。为了方便，我们将其功能合并，使用save方法来保存实例，这样就不必推断是新实例还是已经保存过的实例了：
Model.include({


//保存实例<br/>
save: function(){<br/>
    this.newRecode ? this.create() : this.update();<br/>
}<br/>


});
最后。保存好实例后。我们须要通过模型来找到这个元素，为Model定义一个find方法，依据指定id寻找数据对象：
Model.extend({


//通过id寻找<br/>
find: function(id){<br/>
    var record = this.records[id];<br/>
    if(!record){<br/>
        throw(&#34;Unkown record&#34;);<br/>
    }<br/>
    return record;<br/>
}<br/>


});
至此。一个主要的ORM已经创建成功。我们能够试着执行一下：
var Asset = Model.create();

var asset = Asset.init();

asset.name = “same, same”;

asset.id = 1;

asset.save();
var asset2 = Asset.init();

asset2.name = “but different”;

asset.id = 2;

asset.save();
console.log(Asset.find(“1”).name);  //“same, same”

asset2.name = “change”;

asset2.save();

console.log(Asset.find(“2”).name);  //“change”
添加id支持
眼下我们每次保存记录的时候都是手动指定id。实在是非常糟糕的做法。但我们能够加入自己主动化处理，书中提供了一个生成随机树的GUID：（不明觉厉）
Math.guid = function(){


return &#39;xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx&#39;.replace(/[xy]/g, function(c){<br/>
    var r = Math.random() * 16 | 0, v = c == &#39;x&#39; ? r : (r &amp; 0x3 | 0x8);<br/>
    return v.toString(16);<br/>
}).toUpperCase();<br/>


};
这样有了生成一个随机字符串的方法，我们将其加入到create方法中：
//实例的创建（见前面Model.include中代码）

create: function(){


//为其随机分配id<br/>
if(!this.id){<br/>
    this.id = Math.guid();<br/>
}<br/>
this.newRecord = false;<br/>
this.parent.records[this.id] = this;<br/>


}
这样便不用操心其id了：
var asset = Asset.init();

asset.save();

console.log(asset.id);  //“A65AFEB6-CB51-44F4-9E54-77A617E69903”
寻址引用
我们的ORM事实上另一个问题，在Model的find方法中，我们直接返回了实例的引用。而不是它的复制。所以find之后对其属性的改动都会直接影响原始资源，这不是我们想要的。我们希望仅仅有当调用save/update方法时才改变资源的值：
var asset = Asset.init();

asset.name = “我是原始资源”;

asset.save();
console.log(Asset.find(asset.id).name); //“我是原始资源”
asset.name = “我改动了原始资源”;

console.log(Asset.find(asset.id).name); //“我改动了原始资源”
asset的name被改动了，然而并没有调用save或update方法，为了避免这个问题，我们能够在find方法内创建一个新对象。并返回这个新对象。创建和更新也是一样：
Asset.extend({


//通过id寻找<br/>
find: function(id){<br/>
    var record = this.records[id];<br/>
    if(!record){<br/>
        throw(&#34;Unkown record&#34;);<br/>
    }<br/>
    //返回复制的对象<br/>
    return record.dup();<br/>
}<br/>


});
Asset.include({


//实例的创建<br/>
create: function(){<br/>
    this.newRecord = false;<br/>
    //复制对象<br/>
    this.parent.records[this.id] = this.dup();<br/>
},<br/>
//更新实例<br/>
update: function(){<br/>
    this.parent.records[this.id] = this.dup();<br/>
},<br/>
//复制对象<br/>
dup: function(){<br/>
    return $.extend(true, {}, this);<br/>
}<br/>


});
初始化records
另一个问题是records是被全部模型共享的对象，所以无论是Asset也好User也好都公用一个records，这当然是不能接受的。我们能够在一个模型初始化的时候为其初始化自己的records。
Model.extend({


create: function(){<br/>
    /*省略其它代码*/<br/>
    this.records = {};<br/>
}<br/>


})
原书上是创建了一个created方法，在created方法内初始化records，created方法在create方法内调用。道理也是一样的。
后面另一些为ORM加入本地存储的方法，ORM创建好了之后事实上道理都是一样的。就不再赘述了。明天继续看Controller。好好加油。