谈谈JS中的面向对象

1 <script src="jquery.js"></script>
2 <script type="text/javascript">
3  /**

  4      * Object.create() 最近才添加进了ECMAScript第5版规范，有些浏览器不支持
  5      * 这里模拟一个Object.create方法解决兼容性问题
  6      * Object.create ： 该方法只有一个参数，即原型对象，返回一个新对象
  7      * 这个新对象的原型就是传入的参数。即传入一个对象，返回一个继承了这个对象的新对象
  8      */
  9 
 10     if(typeof Object.create != "function") {
 11         Object.create = function (o) {
 12             function F() {}
 13             F.prototype = o;
 14             return F();
 15         }
 16     }
 17 
 18     /**
 19      * 简单明了的GUID 生成器，用于自动化的生成ID，为保存实例记录增加ID支持
 20      */
 21     Math.guid = function(){
 22         return ‘xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx‘.replace(/[xy]/g, function( c ) {
 23             var r = Math.random() * 16 | 0;
 24             var v = c == ‘x‘ ? r : (r&0x3|0x8);
 25             return v.toString(16);
 26         }).toUpperCase();
 27     };
 28 
 29     /**
 30      * creat a object 从这里开始，创建一个对象模型，注意，这里的Model是挂载到Object基类下，比Function、Array等类的级别高
 31      */
 32     var Model = {
 33         inherited : function () {},
 34         created : function () {},
 35 
 36         prototype : {
 37             init : function () {}
 38         },
 39         //这个函数会返回一个新对象，这个对象继承自Model对象
 40         //我们使用它来创建新模型
 41         create : function () {
 42             var object = Object.create(this);
 43             object.parent = this;
 44             object.prototype = object.fn = Object.create(this.prototype);
 45 
 46             object.created();
 47             this.inherited();
 48             this.inherited(object);
 49 
 50             return object;
 51         },
 52         //这个函数会初始化返回一个新对象
 53         //它继承自Model.prototype，比如Model对象的一个实例
 54         init : function () {
 55             var instance = Object.create(this.prototype);
 56             instance.parent = this;
 57             instance.init.apply(instance, arguments);
 58 
 59             return instance;
 60         },
 61         //这个方法为Model对象扩展多个属性
 62         extend : function (o) {
 63             var extented = o.extended;
 64 
 65             $.extend(this, o);
 66             if(extented){
 67                 extented(this);
 68             }
 69         },
 70         //这个方法为Model对象扩展实例属性
 71         include : function(o){
 72             var included = o.included;
 73 
 74             $.extend(this.prototype, o);
 75             if(included){
 76                 included(this);
 77             }
 78         }
 79     };
 80 
 81     //我们需要保持记录的持久化，可以实现保存一个新创建的实例时，就将它添加进这个对象
 82     //当删除实例时，就将它从对象中删除
 83     Model.records = {};
 84     Model.include({
 85         newRecord : true,
 86         //create a isntance
 87         create : function () {
 88             this.newRecord = false;
 89             this.parent.records[this.id] = this;
 90         },
 91         //delete a instance
 92         destroy : function () {
 93             delete this.parent.records[this.id];
 94         },
 95         //update a instance existed
 96         update : function () {
 97             this.parent.records[this.id] = this;
 98         },
 99         //save a instance
100         save : function () {
101             this.newRecord ? this.create() : this.update();
102         },
103         init: function(atts) {
104             /* ... */
105         },
106         load: function(attributes){
107             /* ... */
108         }
109 
110     });
111     /**
112      * 增加ID支持
113      */
114     Model.extend({
115         //search a instance by id
116         find : function (id){
117             return this.records[id];
118         }
119         create : function(){
120             if ( !this.id ) {
121                 this.id = Math.guid();
122             }
123             this.newRecord = false;
124             this.parent.records[this.id] = this;
125         }
126     });
127 
128     /**
129      * for test
130      */
131     var Asset = Model.create();
132     var User = Model.create();
133 
134     var user = User.init();
135 
136     var asset = Asset.init();
137     asset.name = "same, same";
138     asset.id = 1;
139     asset.save();
140 
141     var asset2 = Asset.init();
142     asset2.name = "but different";
143     asset2.id = 2;
144     asset2.save();
145 
146 
147 </script>