Javascript 的MVC模式（二）

今天药忘吃喽~ 2021-12-17 02:25 207阅读 0赞

这次要和大家深入说的是MODEL，个人认为也是比较难于理解的一个概念，所以希望可以和大家一同去探讨。

引入MVC模式中，我们把数据的管理归类进了模型，即我们应该把数据操作和行为相关的逻辑都放进模型中。

在实际的操作中我们最好通过命名空间的方法来进行管理，如下：

var User={
    record:[]
    }

那么我们User的记录就可以存放在User.record中了，如果你想为User增加一些CRUD的方法也可以，如下：

var User={
    record:[],
    update:function(){},
    delete:function(){}
    }

好的，你可以看到我们通过命名空间的方法可以很优雅地*（OK，我有时候感觉用“优雅”这个词特别装逼，就像一些翻译工具译过来，但是用着用着就觉得这个词语形容得特别有程序猿的范儿，见笑）*把一些方法集成到User中。当然有时候我们想删除某个user是想以以下这种方式操作：

user.delete() //通过类似的绑定实例删除

而并非：

User.delete(id) //你需要传入一个ID来标示删除的到底是哪个用户

所以这个时候，你就应该意识到我们应该把User构建成一个类，并且通过构建user实例进行实例的操作，如下：

var User=function(){
    this.record=[];
    }
    
    User.prototype.delete=function(){
    /*具体的删除实例操作*/
    }
    
    var user=new User;

接下来我们需要利用Object.create()的来构建我们的ORM*（根据《软件程序设计与艺术》一书的“无绪”一词，不需要过分了解细节的含义，我们只需要知道ORM就是包装了一些数据的对象，其中它是抽象的，类似接口的概念，你们意会一下吧，作为一名程序猿需要有丰富的想象力！！！）*，其中Object.create()的作用非常简单，它只有一个参数，并且返回一个新的对象，而新对象的原型就是参数对象，好吧，如果你的浏览器不支持这个方法我们也可以自行添加，同时也可以帮助大家理解这个方法的工作原理，非常简单：

引用自：[http://javascript.crockford.com/prototypal.html][http_javascript.crockford.com_prototypal.html]

if (typeof Object.create !== 'function') {
        Object.create = function (o) {
            function F() {}
            F.prototype = o;
            return new F();
        };
    }
    newObject = Object.create(oldObject);//注意这里传入的是一个对象，并非函数

可以说整个继承是基于原型的*（当然，我刚刚发现了一种JS面向对象的另外一种模仿方法，并且摒弃了原型，this等等的复杂概念，推荐[http://www.cnblogs.com/cloudlee/archive/2012/07/15/2592849.html][http_www.cnblogs.com_cloudlee_archive_2012_07_15_2592849.html]）*，接下来我们要来利用Object.create()来创建Model对象：

事实上，我认为这段代码还是比较难理解的，它需要你比较了解整个原型链的机制，所以我特地都标上了注释，希望大家能看懂。事实上在我看的书上有关于增加这个ORM的一些方法和属性的操作，但是由于我们构建这个ORM的目的就是为了抽象需求，所以我们利用一些方法来扩展它而不采用硬编码进ORM体内。

include:function(obj){
        //由Model调用，把方法属性添加进ORM中，让新模型的原型继承，即让新模型的实例继承
                $.extend(this.prototype,obj)
            },
        extend:function(obj){
        //由Model调用，把方法属性添加进ORM中，让新模型继承
                $.extend(this,obj)
            }

看到这，大家应该知道我采用了jQuery，为了减轻我们的工作量，之后的一些代码我们都会利用到jQuery*（我相信你不会介意的）*，然后我们把这个方法写进去以后可以直接通过Model调用：

Model.include({
        init:function(attributes){
        //重写新模型实例的初始方法，传入参数后调用新加入方法load()
            if(attributes)this.load(attributes);
            },
        load:function(attributes){
        //该方法把所传入对象的属性方法加入到实例中
            jQuery.extend(this,attributes);
            }
        
        })

接下来我们要做的就是对实例的一个持久化，就说是你创建了一个实例需要保存它的信息，不仅仅是每个实例的详细信息，还要知道我们整个新模型里到底有多少个实例等，于是乎我们加入以下的一些方法来完成这个工作：

Model.include({
        newRecord:true,
        init:function(attributes){
            if(attributes)this.load(attributes);
            },
        load:function(attributes){
            jQuery.extend(this,attributes);
            },
        create:function(){
            this.newRecord=false;
            this.parent.records[this.id]=this;
            },
        destory:function(){
            delete this.parent.records[this.id];
            },
        update:function(){
            this.parent.records[this.id]=this;
            },
        save:function(){
            this.newRecord?this.create():this.update();
            },

})
        
    Model.extend({
        created:function(){
            this.records={} //重写created()，为新模型创建一个records对象记录实例
            },
        find:function(id){
            return this.records[id]||"找不到相应的记录";
            }
        })
    
    var User=Model.create();
    var user=User.init();
    
    var User2=Model.create();
    var user2=User2.init();
    
    user.name="chiu";
    user.id=1;
    user.save();
    
    user2.name="chiu2";
    user2.id=2;
    user2.save();
    
    //以下说明两个模型的记录是分离的
    console.log(User.records);
    console.log(User2.records);

通过这种方法就可以把我们新建的实例进行一系列的操作，同时父类模型也会对它们进行记录。现在我们再来观察下整个程序的一个问题:

console.log(User.find(1).name);//输出chiu
    User.find(1).name="john";
    console.log(User.find(1).name);//输出john

我们不应该能修改查找的数据从而修改实例的属性，所以我们应该把查找的结果作一个备份返回，当然具体的实现这里就不说了，你们应该也会知道如何操作。还有另外一个问题是当创建实例的时候我们都需要手动创建id，这样的方法既麻烦，又容易出错*（需要保持没有重复的id值）*，因此我们可以通过CUID的方法来生成一个唯一的id：

*网上有很多这类的代码可以直接套过来，以下是其中一种*

guid:function(){
    function G() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)}
    return (guid = (G() + G() + "-" + G() + "-" + G() + "-" + G() + "-" + G() + G() + G()).toUpperCase());
    }

生成guid的代码你可以随便放哪里都可以，我个人是让新模型给继承了，然后我们再重写一下实例create()的方法

create:function(){
        this.newRecord=false;
        if(!this.id)this.id=this.parent.guid();
        this.parent.records[this.id]=this;
        }

那么现在我构建一个简单的模型基本上是完成了，*（好辛苦啊，写了这么多）*。下一节是讲述如何在模型中引入数据的装载和提交。

转载于:https://www.cnblogs.com/chiu/archive/2012/07/16/2592863.html

[http_javascript.crockford.com_prototypal.html]: http://javascript.crockford.com/prototypal.html
[http_www.cnblogs.com_cloudlee_archive_2012_07_15_2592849.html]: http://www.cnblogs.com/cloudlee/archive/2012/07/15/2592849.html