zoukankan      html  css  js  c++  java
  • mvc-3模型和数据(1)

    MVC和命名空间

    var User = function(atts) {
      this.attribute = atts || {};
    }
    //和具体user相关的方法
    User.prototype.destroy = function() {};
    //和具体user不相关的函数和变量
    User.fetchRemove = function() {};
    var user = new User({name:'jinks'});
    user.destroy();
    
    

    构建对象关系映射

    如:

    • 任何model的改变会向后台发起一个ajax请求
    • model和view绑定,当一个实例改变时,马上从view中反映出来

    原型继承

    • 这里用到Object.create,对于没有的浏览器,可以模拟方法
    if(typeof Object.create !== "function") {
      Object.create = function(o) {
        function F(){};
        F.prototype = o;
        return new F();
      }
    }
    
    var Model = {
      inherited: function() {},
      created: function() {},
      prototype: {
        init: function() {}
      },
      create: function() {
        var object = Object.create(this);
        object.parent = this;
        object.prototype = object.fn = Object.create(this.prototype);
        object.created();
        this.inherited(object);
        return object;
      },
      init: function() {
        var instance = Object.create(this.prototype);
        instance.parent = this;
        instance.init.apply(instance, arguments);
        return instance;
      }
    }
    var Asset = Model.create();
    var User = Model.create();
    var user = User.init();
    

    添加ORM属性

    var Model = {
      /*代码片段*/
      extend: function(o) {
        var extended = o.extended;
        for(var i in o) {
          this[i] = o[i];
        }
        if(extended) extended(this);
      },
      include: function(o) {
        var included = o.included;
        for(var i in o) {
          this.prototype[i] = o[i];
        }
        if(included) included(this);
      }
    }
    //添加到Model对象属性
    Model.extend({
      find: function() {}
    });
    //添加Model.prototype中,所有实例共享这一属性
    Model.include({
      load: function(atts) {
        for(var i in atts) {
          this[i] = atts[i];
        }
      },
      init: function(atts) {
        if(atts) this.load(atts);
      }
    });
    
    var Asset = Model.create();
    var asset = Asset.init({name: "a.png"});
    

    持久化记录

    将引用保存至新创建的实例中以便任何时候都可以访问

    var Model = {
    	/*代码*/
    }
    //用来保存资源的对象
    Model.records = {};
    Model.include({
      newRecord: true,
      create: function() {
        this.newRecord = false;
        this.parent.records[this.id] = this;
      },
      destroy: function() {
        delete this.parent.records[this.id];
      }
    });
    //更新一个已经存在的实例
    Model.include({
      update: function() {
        this.parent.records[this.id] = this;
      }
    });
    //添加一个快捷函数来保持实例
    Model.include({
      save: function() {
        this.newRecord ? this.create() : this.update();
      }
    });
    Model.extend({
      //通过id查找,找不到抛出异常
      find: function(id) {
        var id = this.records[id];
        if(id) {
          return id;
        } else {
          throw new Error("Unknow record");
        }
      }
    });
    
    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";
    asset2.id = 2;
    asset2.save();
    
    console.log(Asset.records);
    asset2.destroy();
    console.log(Asset.records);
    
    

    增加ID支持

    使用全局统一标识(GUID)生成器来自动生成ID

    //使用Math.random()来产生一个伪随机数的GUID
    Math.guid = function(){
      return 'xxxxxxxx-xxxx-4xxx-yxxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c){
          var r = Math.random() * 16 | 0,
            v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16)
        }).toUpperCase();
    };
    //修改create()函数
    Model.include({
      create: function() {
        if(!this.id) this.id = Math.guid();
        this.newRecord = false;
        this.parent.records[this.id] = this;
      }
    });
    
    var Asset = Model.create();
    var asset = Asset.init();
    asset.save();
    console.log(asset.id);
    
  • 相关阅读:
    Python 3学习 ——目录 Json Pickle
    Python 3 学习——函数扩展and迭代器生成器装饰器
    Python 3 学习——深浅拷贝以及函数
    Python 3 学习的第七小节——Linux-Ubuntu
    Python 3 —— 文件操作
    Python 3 学习的第五小节——字符编码与三级菜单实践
    关于PHP代码复用‘traits’的一段代码
    一个将对象彻底冻结的函数
    详解vue-cli脚手架项目-package.json
    关于element-ui日期选择器disabledDate使用心得
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4226292.html
Copyright © 2011-2022 走看看