自己整理的MVC框架

前段时间公司有需求。自己整理一套MVC代替backbone.自己充满热情的写了下。但是现在内牛满面的事情发生了。客户还是觉得用backbone。好吧。。

为了纪念被扼杀在摇篮中的mvc特此记录下。

$(function($,win){
    if(!win.mvc){
        var AjaxManage = (function() {
            var instantiated;
            var Ajax = function(){
                this.oAjaxSetting = {
                    sDataType: 'JSON',
                    sGetType: 'get',
                    //ms
                    iTimeOut: 8000,
                    bAsync:true
                }
            };
            Ajax.prototype = {
                fnDoAjax: function(oPts) {
                    oPts = $.extend({}, this.oAjaxSetting, oPts);
                    var url = oPts.url,
                        iTimeOut = oPts.iTimeOut,sGetType = oPts.sGetType,sDataType = oPts.sDataType,
                        oParams = oPts.oParams || null,
                        bAsync = oPts.bAsync;
                    try {   
                        $.ajax({
                            url: url,
                            timeout: iTimeOut,
                            type: sGetType,
                            data: oParams,
                            dataType: sDataType,
                            cache: false,
                            async:bAsync,
                            oPts : oPts,
                            success: function(data) {
                                var fnSuccess = this.oPts.fnSuccess;
                                if(fnSuccess && $.isFunction(fnSuccess)){fnSuccess(data);}
                            },
                            complete: function() {
                                var fnComplete = this.oPts.fnComplete;
                                if(fnComplete && $.isFunction(fnComplete)){fnComplete();}
                            },
                            error: function (jqXHR) { 
                                var fnError = this.oPts.fnError;
                                if(fnError && $.isFunction(fnError)){fnError();}
                                else {//default error
                                }
                            }
                        });
                    }
                    catch(e){
                        //default error
                    }
                }
            }
            if (!instantiated) {
                instantiated = new Ajax();
            }
            return instantiated;
        }());
        var Model = function(oData){
            var data = oData || {};
            this.set = function(key,value){
                data[key] = value;
                var change = this.change;
                if(change && $.isFunction(change)){change(key);}//do change fun
            };
            this.getDataFromKey = function(key){
                return data[key] || null;
            };
            this.clear = function(){
                data = {};
                var fnRemove = this.fnRemove;
                if(fnRemove && $.isFunction(fnRemove)){fnRemove();}//do change fun
            };
            this.isNull = function(){
                return data === {};
            };
            this.haveKey = function(key){
                return {
                    'isHave': (data[key] ? true:false),
                    'result': data[key] || null
                };
            };
            this.get = function(url,params){
                //demo
                var fnSuccess = function(oData){
                    data = oData;
                };
                AjaxManage.fnDoAjax({
                    url : url,
                    fnSuccess : fnSuccess,
                    oParams : params
                });
            };
            function sync(url,params,type){
                var fnSuccess = function(oData){
                    console.log('do success');
                };
                AjaxManage.fnDoAjax({
                    url : url,
                    fnSuccess : fnSuccess,
                    sGetType : type,
                    oParams : params
                });
            }
            this.put = function(url,params){
                sync(url,params,'put');
            }
            this.delete = function(url,params){
                sync(url,params,'delete');
            }
            this.post = function(url,params){
                sync(url,params,'post');
            }
            if(this.initialize && $.isFunction(this.initialize)){
                this.initialize();
            }
        }
        Model.prototype = {
            change : function(){},
            fnRemove : function(){}
        }
        var View = function(model){
            if(this.initialize && $.isFunction(this.initialize)){
                this.initialize(model);
            }
        };
        View.prototype = {
            render:function(){}
        }
        var Collection = function(){
            var arrayView = [];
            this.add = function(model,view){
                var _view = new view(model);
                arrayView.push(_view);
            };
            this.delete = function(_view){//with model
                var index = arrayView.indexOf(_view);
                _view.model.clear();
                arrayView.splice(index, 1);
            };
            this.getArrayView = function(){
                return arrayView;
            }
            if(this.initialize && $.isFunction(this.initialize)){
                this.initialize();
            }
        };
        Collection.prototype = {
            render:function(){}
        }
        function extend (fn,obj){
            obj = obj||{};
            for(var i in obj){
                if(obj.hasOwnProperty(i)){
                    fn.prototype[i] = obj[i];
                }
            }
        }
        win.mvc = {
            Model: {
                extend:function(obj){
                    extend(Model,obj);
                    return Model;
                }
            },
            View: {
                extend:function(obj){
                    extend(View,obj);
                    return View;
                }
            },
            Collection: {
                extend:function(obj){
                    extend(Collection,obj);
                    return Collection;
                }
            }
        }
    }
}(jQuery,window));

还不完整。

 

下面是调用的方法.

view:定义

var trendView = mvc.View.extend({
    el:'#trends',
    template:{
        trendImg:       '<div class="trend-img">'                               
    },
    changeFn:{
        trendInfo:function(){

        }
    },
    enevtsFn: {
        displayditTrends:function(e){
            e.stopPropagation();
            e.preventDefault();
            var $ele = $(this).find('.trend-img div');
            e.type == 'mouseover' ? $ele.show() : $ele.hide(); 
        }
    },
    remove:function(){
    },
    events:function(){
        var that = this,
            enevtsFn = that.enevtsFn;
        $('#trends').find('.trend-content').unbind().bind('mouseover mouseleave',enevtsFn.displayditTrends);
    },
    render:function(){
        var that = this,
            model = that.model;
        var $div = $('<div class="trend-content"></div>');
        aInnerHtml.push(trendImg_T);
        
        that.events();//bind enevts
    },
    change:function(key){
        this.changeFn[key]();
    },
    initialize:function(model){
        this.model = model;
        //this.render();
    }
});

放上去的时候去掉某些敏感代码

model定义：

var trendsModel = mvc.Model.extend();
var _model = new trendsModel({
    sadas:{
        'dasdasd':{
            trendName:'test',
            editorName:'blue',
            trendDescription:'just test'
        } 
    }
});
var _model1 = new trendsModel({
    sadas:{
        'dasdasd':{
            trendName:'test1',
            editorName:'blue11',
            trendDescription:'just test'
        } 
    }
});

Collection使用：

var trendList = mvc.Collection.extend({
    arrayView : [],
    render:function(){
        var aView = this.getArrayView() || [],
            len = aView.length;
        if(len > 0){
            for(var i = 0;i<len; i++){
                var view = aView[i];
                view.render();
            }
        }
    },
    initialize:function(){
    }});
var _trendList = new trendList();
_trendList.add(_model1,trendView);
_trendList.add(_model,trendView);
_trendList.render();