M js model hacking

by shaunxcode

HTML

<div id="name"></div>
<button>change</button>

JavaScript

function M(ns) {
    var _M = {
        post: function() {

        },

        put: function() {
    
        },

        get: function() {
    
        },

        del: function() {
    
        },

        model: function() {
            var fields = arguments;
            var fieldCount = arguments.length; 
            var events = {};
            var model = function() {
                this.data = {};
            };

            model.on = function(type, field, action) {
                events[type + '.' + field] = action;
            };

            model.prototype._data = function() { return this.data };
                        
            for(var i = 0; i < fieldCount; i++) {
                var field = fields[i];
                model.prototype[field] = function(field) {
                   return function(val) {
                       if(arguments.length) {
                           this.data[field] = val;
                           if(events['set.' + field]) {
                                   events['set.' + field].call(this);
                           }
                           return this;
                       }

                       if(this.data[field] == undefined) { 
                           this.data[field] = false;
                       }

                       return this.data[field];
                    };
                }(field);
            }

            return model;
        }
    };
    
    if(ns) {
        for(var k in _M) { 
            ns[k] = _M[k];
        }
    } else { 
        return _M;
    }
};

//import global funcs v.s. var M = M();
M(window);

var Person = model('Person', 'name', 'age');

Person.on('set', 'name', function() {
    $('#name').text(this.name());
});

var peter = (new Person)
    .name('peter')
    .age(30);

var i = 0;
$('button').click(function() { peter.name('changed name ' + i++) });