define([], function () {

  var Model = _.inherit({
    //默认属性
    propertys: function () {
      this.protocol = ‘http‘;
      this.domain = ‘‘;
      this.path = ‘‘;
      this.url = null;
      this.param = {};
      this.validates = [];
      //      this.contentType = ‘application/json‘;

      this.ajaxOnly = true;

      this.contentType = ‘application/x-www-form-urlencoded‘;
      this.type = ‘GET‘;
      this.dataType = ‘json‘;
    },

    setOption: function (options) {
      _.extend(this, options);
    },

    assert: function () {
      if (this.url === null) {
        throw ‘not override url property‘;
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.setOption(opts);
      this.assert();

    },

    pushValidates: function (handler) {
      if (typeof handler === ‘function‘) {
        this.validates.push($.proxy(handler, this));
      }
    },

    setParam: function (key, val) {
      if (typeof key === ‘object‘) {
        _.extend(this.param, key);
      } else {
        this.param[key] = val;
      }
    },

    removeParam: function (key) {
      delete this.param[key];
    },

    getParam: function () {
      return this.param;
    },

    //构建url请求方式，子类可复写，我们的model如果localstorage设置了值便直接读取，但是得是非正式环境
    buildurl: function () {
      //      var baseurl = AbstractModel.baseurl(this.protocol);
      //      return this.protocol + ‘://‘ + baseurl.domain + ‘/‘ + baseurl.path + (typeof this.url === ‘function‘ ? this.url() : this.url);
      throw "[ERROR]abstract method:buildurl, must be override";

    },

    onDataSuccess: function () {
    },

    /**
    *    取model数据
    *    @param {Function} onComplete 取完的回调函
    *    传入的第一个参数为model的数第二个数据为元数据，元数据为ajax下发时的ServerCode,Message等数
    *    @param {Function} onError 发生错误时的回调
    *    @param {Boolean} ajaxOnly 可选，默认为false当为true时只使用ajax调取数据
    * @param {Boolean} scope 可选，设定回调函数this指向的对象
    * @param {Function} onAbort 可选，但取消时会调用的函数
    */
    execute: function (onComplete, onError, ajaxOnly, scope) {
      var __onComplete = $.proxy(function (data) {
        var _data = data;
        if (typeof data == ‘string‘) _data = JSON.parse(data);

        // @description 开发者可以传入一组验证方法进行验证
        for (var i = 0, len = this.validates.length; i < len; i++) {
          if (!this.validates[i](data)) {
            // @description 如果一个验证不通过就返回
            if (typeof onError === ‘function‘) {
              return onError.call(scope || this, _data, data);
            } else {
              return false;
            }
          }
        }

        // @description 对获取的数据做字段映射
        var datamodel = typeof this.dataformat === ‘function‘ ? this.dataformat(_data) : _data;

        if (this.onDataSuccess) this.onDataSuccess.call(this, datamodel, data);
        if (typeof onComplete === ‘function‘) {
          onComplete.call(scope || this, datamodel, data);
        }

      }, this);

      var __onError = $.proxy(function (e) {
        if (typeof onError === ‘function‘) {
          onError.call(scope || this, e);
        }
      }, this);

      this.sendRequest(__onComplete, __onError);

    },

    sendRequest: function (success, error) {
      var url = this.buildurl();
      var params = _.clone(this.getParam() || {});
      var crossDomain = {
        ‘json‘: true,
        ‘jsonp‘: true
      };

      //      if (this.type == ‘json‘)
      //      if (this.type == ‘POST‘) {
      //        this.dataType = ‘json‘;
      //      } else {
      //        this.dataType = ‘jsonp‘;
      //      }

      if (this.type == ‘POST‘) {
        this.dataType = ‘json‘;
      }

      //jsonp与post互斥
      $.ajax({
        url: url,
        type: this.type,
        data: params,
        dataType: this.dataType,
        contentType: this.contentType,
        crossDomain: crossDomain[this.dataType],
        timeout: 50000,
        xhrFields: {
          withCredentials: true
        },
        success: function (res) {
          success && success(res);
        },
        error: function (err) {
          error && error(err);
        }
      });

    }

  });

  Model.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Model;
});

model

define([‘AbstractStorage‘], function (AbstractStorage) {

  var Store = _.inherit({
    //默认属性
    propertys: function () {

      //每个对象一定要具有存储键，并且不能重复
      this.key = null;

      //默认一条数据的生命周期，S为秒，M为分，D为天
      this.lifeTime = ‘30M‘;

      //默认返回数据
      //      this.defaultData = null;

      //代理对象，localstorage对象
      this.sProxy = new AbstractStorage();

    },

    setOption: function (options) {
      _.extend(this, options);
    },

    assert: function () {
      if (this.key === null) {
        throw ‘not override key property‘;
      }
      if (this.sProxy === null) {
        throw ‘not override sProxy property‘;
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.setOption(opts);
      this.assert();
    },

    _getLifeTime: function () {
      var timeout = 0;
      var str = this.lifeTime;
      var unit = str.charAt(str.length - 1);
      var num = str.substring(0, str.length - 1);
      var Map = {
        D: 86400,
        H: 3600,
        M: 60,
        S: 1
      };
      if (typeof unit == ‘string‘) {
        unit = unit.toUpperCase();
      }
      timeout = num;
      if (unit) timeout = Map[unit];

      //单位为毫秒
      return num * timeout * 1000 ;
    },

    //缓存数据
    set: function (value, sign) {
      //获取过期时间
      var timeout = new Date();
      timeout.setTime(timeout.getTime() + this._getLifeTime());
      this.sProxy.set(this.key, value, timeout.getTime(), sign);
    },

    //设置单个属性
    setAttr: function (name, value, sign) {
      var key, obj;
      if (_.isObject(name)) {
        for (key in name) {
          if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);
        }
        return;
      }

      if (!sign) sign = this.getSign();

      //获取当前对象
      obj = this.get(sign) || {};
      if (!obj) return;
      obj[name] = value;
      this.set(obj, sign);

    },

    getSign: function () {
      return this.sProxy.getSign(this.key);
    },

    remove: function () {
      this.sProxy.remove(this.key);
    },

    removeAttr: function (attrName) {
      var obj = this.get() || {};
      if (obj[attrName]) {
        delete obj[attrName];
      }
      this.set(obj);
    },

    get: function (sign) {
      var result = [], isEmpty = true, a;
      var obj = this.sProxy.get(this.key, sign);
      var type = typeof obj;
      var o = { ‘string‘: true, ‘number‘: true, ‘boolean‘: true };
      if (o[type]) return obj;

      if (_.isArray(obj)) {
        for (var i = 0, len = obj.length; i < len; i++) {
          result[i] = obj[i];
        }
      } else if (_.isObject(obj)) {
        result = obj;
      }

      for (a in result) {
        isEmpty = false;
        break;
      }
      return !isEmpty ? result : null;
    },

    getAttr: function (attrName, tag) {
      var obj = this.get(tag);
      var attrVal = null;
      if (obj) {
        attrVal = obj[attrName];
      }
      return attrVal;
    }

  });

  Store.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Store;
});

store

define([], function () {

  var Storage = _.inherit({
    //默认属性
    propertys: function () {

      //代理对象，默认为localstorage
      this.sProxy = window.localStorage;

      //60 * 60 * 24 * 30 * 1000 ms ==30天
      this.defaultLifeTime = 2592000000;

      //本地缓存用以存放所有localstorage键值与过期日期的映射
      this.keyCache = ‘SYSTEM_KEY_TIMEOUT_MAP‘;

      //当缓存容量已满，每次删除的缓存数
      this.removeNum = 5;

    },

    assert: function () {
      if (this.sProxy === null) {
        throw ‘not override sProxy property‘;
      }
    },

    initialize: function (opts) {
      this.propertys();
      this.assert();
    },

    /*
    新增localstorage
    数据格式包括唯一键值，json字符串，过期日期，存入日期
    sign 为格式化后的请求参数，用于同一请求不同参数时候返回新数据，比如列表为北京的城市，后切换为上海，会判断tag不同而更新缓存数据，tag相当于签名
    每一键值只会缓存一条信息
    */
    set: function (key, value, timeout, sign) {
      var _d = new Date();
      //存入日期
      var indate = _d.getTime();

      //最终保存的数据
      var entity = null;

      if (!timeout) {
        _d.setTime(_d.getTime() + this.defaultLifeTime);
        timeout = _d.getTime();
      }

      //
      this.setKeyCache(key, timeout);
      entity = this.buildStorageObj(value, indate, timeout, sign);

      try {
        this.sProxy.setItem(key, JSON.stringify(entity));
        return true;
      } catch (e) {
        //localstorage写满时,全清掉
        if (e.name == ‘QuotaExceededError‘) {
          //            this.sProxy.clear();
          //localstorage写满时，选择离过期时间最近的数据删除，这样也会有些影响，但是感觉比全清除好些，如果缓存过多，此过程比较耗时，100ms以内
          if (!this.removeLastCache()) throw ‘本次数据存储量过大‘;
          this.set(key, value, timeout, sign);
        }
        console && console.log(e);
      }
      return false;
    },

    //删除过期缓存
    removeOverdueCache: function () {
      var tmpObj = null, i, len;

      var now = new Date().getTime();
      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var newMap = [];
      if (!cacheStr) {
        return;
      }

      cacheMap = JSON.parse(cacheStr);

      for (i = 0, len = cacheMap.length; i < len; i++) {
        tmpObj = cacheMap[i];
        if (tmpObj.timeout < now) {
          this.sProxy.removeItem(tmpObj.key);
        } else {
          newMap.push(tmpObj);
        }
      }
      this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));

    },

    removeLastCache: function () {
      var i, len;
      var num = this.removeNum || 5;

      //取出键值对
      var cacheStr = this.sProxy.getItem(this.keyCache);
      var cacheMap = [];
      var delMap = [];

      //说明本次存储过大
      if (!cacheStr) return false;

      cacheMap.sort(function (a, b) {
        return a.timeout - b.timeout;
      });

      //删除了哪些数据
      delMap = cacheMap.splice(0, num);
      for (i = 0, len = delMap.length; i < len; i++) {
        this.sProxy.removeItem(delMap[i].key);
      }

      this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
      return true;
    },

    setKeyCache: function (key, timeout) {
      if (!key || !timeout || timeout < new Date().getTime()) return;
      var i, len, tmpObj;

      //获取当前已经缓存的键值字符串
      var oldstr = this.sProxy.getItem(this.keyCache);
      var oldMap = [];
      //当前key是否已经存在
      var flag = false;
      var obj = {};
      obj.key = key;
      obj.timeout = timeout;

      if (oldstr) {
        oldMap = JSON.parse(oldstr);
        if (!_.isArray(oldMap)) oldMap = [];
      }

      for (i = 0, len = oldMap.length; i < len; i++) {
        tmpObj = oldMap[i];
        if (tmpObj.key == key) {
          oldMap[i] = obj;
          flag = true;
          break;
        }
      }
      if (!flag) oldMap.push(obj);
      //最后将新数组放到缓存中
      this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));

    },

    buildStorageObj: function (value, indate, timeout, sign) {
      var obj = {
        value: value,
        timeout: timeout,
        sign: sign,
        indate: indate
      };
      return obj;
    },

    get: function (key, sign) {
      var result, now = new Date().getTime();
      try {
        result = this.sProxy.getItem(key);
        if (!result) return null;
        result = JSON.parse(result);

        //数据过期
        if (result.timeout < now) return null;

        //需要验证签名
        if (sign) {
          if (sign === result.sign)
            return result.value;
          return null;
        } else {
          return result.value;
        }

      } catch (e) {
        console && console.log(e);
      }
      return null;
    },

    //获取签名
    getSign: function (key) {
      var result, sign = null;
      try {
        result = this.sProxy.getItem(key);
        if (result) {
          result = JSON.parse(result);
          sign = result && result.sign
        }
      } catch (e) {
        console && console.log(e);
      }
      return sign;
    },

    remove: function (key) {
      return this.sProxy.removeItem(key);
    },

    clear: function () {
      this.sProxy.clear();
    }
  });

  Storage.getInstance = function () {
    if (this.instance) {
      return this.instance;
    } else {
      return this.instance = new this();
    }
  };

  return Storage;

});

storage

define([‘AbstractModel‘, ‘AbstractStore‘, ‘cUser‘], function (AbstractModel, AbstractStore, cUser) {

    var ERROR_CODE = {
        ‘NOT_LOGIN‘: ‘00001‘
    };

    //获取产品来源
    var getUs = function () {
        var us = ‘webapp‘;
        //其它操作......

        //如果url具有us标志，则首先读取
        if (_.getUrlParam().us) {
            us = _.getUrlParam().us;
        }
        return us;
    };

    var BaseModel = _.inherit(AbstractModel, {

        initDomain: function () {
            var host = window.location.host;

            this.domain = host;

            //开发环境
            if (host.indexOf(‘yexiaochai.baidu.com‘) != -1) {
                this.domain = ‘xxx‘;
            }

            //qa环境
            if (host.indexOf(‘baidu.com‘) == -1) {
                this.domain = ‘xxx‘;
            }

            //正式环境
            if (host.indexOf(‘xxx.baidu.com‘) != -1 || host.indexOf(‘xxx.baidu.com‘) != -1) {
                this.domain = ‘api.xxx.baidu.com‘;
            }

        },

        propertys: function ($super) {
            $super();

            this.initDomain();

            this.path = ‘‘;

            this.cacheData = null;
            this.param = {
                head: {
                    us: getUs(),
                    version: ‘1.0.0‘
                }
            };
            this.dataType = ‘jsonp‘;

            this.errorCallback = function () { };

            //统一处理分返回验证
            this.pushValidates(function (data) {
                return this.baseDataValidate(data);
            });

        },

        //首轮处理返回数据，检查错误码做统一验证处理
        baseDataValidate: function (data) {
            if (!data) {
                window.APP.showToast(‘服务器出错，请稍候再试‘, function () {
                    window.location.href = ‘xxx‘;
                });
                return;
            }

            if (_.isString(data)) data = JSON.parse(data);
            if (data.errno === 0) return true;

            //处理统一登录逻辑
            if (data.errno == ERROR_CODE[‘NOT_LOGIN‘]) {
                cUser.login();
            }

            //其它通用错误码的处理逻辑
            if (data.errno == xxxx) {
                this.errorCallback();
                return false;
            }

            //如果出问题则打印错误
            if (window.APP && data && data.msg) window.APP.showToast(data.msg, this.errorCallback);

            return false;
        },

        dataformat: function (data) {
            if (_.isString(data)) data = JSON.parse(data);
            if (data.data) return data.data;
            return data;
        },

        buildurl: function () {
            return this.protocol + ‘://‘ + this.domain + this.path + (typeof this.url === ‘function‘ ? this.url() : this.url);
        },

        getSign: function () {
            var param = this.getParam() || {};
            return JSON.stringify(param);
        },

        onDataSuccess: function (fdata, data) {
            if (this.cacheData && this.cacheData.set)
                this.cacheData.set(fdata, this.getSign());
        },

        //重写父类getParam方法，加入方法签名
        getParam: function () {
            var param = _.clone(this.param || {});

            //此处对参数进行特殊处理
            //......

            return this.param;
        },

        execute: function ($super, onComplete, onError, ajaxOnly, scope) {
            var data = null;
            if (!ajaxOnly && !this.ajaxOnly && this.cacheData && this.cacheData.get) {
                data = this.cacheData.get(this.getSign());
                if (data) {
                    onComplete(data);
                    return;
                }
            }

            //记录请求发出
            $super(onComplete, onError, ajaxOnly, scope);
        }

    });

    //localstorage存储类
    var Store = {
        RequestStore: _.inherit(AbstractStore, {
            //默认属性
            propertys: function ($super) {
                $super();
                this.key = ‘BUS_RequestStore‘;
                this.lifeTime = ‘1D‘; //缓存时间
            }
        })
    };

    //返回真实的业务类
    return {
        //真实的业务请求
        requestModel: _.inherit(BaseModel, {
            //默认属性
            propertys: function ($super) {
                $super();
                this.url = ‘/url‘;
                this.ajaxOnly = false;
                this.cacheData = Store.RequestStore.getInstance();
            }
        })
    };
});

业务封装

var AbstractModel = _.inherit({
  initialize: function (opts) {
    this.propertys();
    this.setOption(opts);
  },

  propertys: function () {
    //只取页面展示需要数据
    this.data = {};

    //局部数据改变对应的响应程序，暂定为一个方法
    //可以是一个类的实例，如果是实例必须有render方法
    this.controllers = {};

    //全局初始化数据时候调用的控制器
    this.initController = null;

    this.scope = null;

  },

  addController: function (k, v) {
    if (!k || !v) return;
    this.controllers[k] = v;
  },

  removeController: function (k) {
    if (!k) return;
    delete this.controllers[k];
  },

  setOption: function (opts) {
    for (var k in opts) {
      this[k] = opts[k];
    }
  },

  //首次初始化时，需要矫正数据，比如做服务器适配
  //@override
  handleData: function () { },

  //一般用于首次根据服务器数据源填充数据
  initData: function (data) {
    var k;
    if (!data) return;

    //如果默认数据没有被覆盖可能有误
    for (k in this.data) {
      if (data[k]) this.data[k] = data[k];
    }

    this.handleData();

    if (this.initController && this.get()) {
      this.initController.call(this.scope, this.get());
    }

  },

  //验证data的有效性，如果无效的话，不应该进行以下逻辑，并且应该报警
  //@override
  validateData: function () {
    return true;
  },

  //获取数据前，可以进行格式化
  //@override
  formatData: function (data) {
    return data;
  },

  //获取数据
  get: function () {
    if (!this.validateData()) {
      //需要log
      return {};
    }
    return this.formatData(this.data);
  },

  _update: function (key, data) {
    if (typeof this.controllers[key] === ‘function‘)
      this.controllers[key].call(this.scope, data);
    else if (typeof this.controllers[key].render === ‘function‘)
      this.controllers[key].render.call(this.scope, data);
  },

  //数据跟新后需要做的动作，执行对应的controller改变dom
  //@override
  update: function (key) {
    var data = this.get();
    var k;
    if (!data) return;

    if (this.controllers[key]) {
      this._update(key, data);
      return;
    }

    for (k in this.controllers) {
      this._update(k, data);
    }
  }
});

var AbstractView = _.inherit({
  propertys: function () {
    this.$el = $(‘#main‘);
    //事件机制
    this.events = {};
  },
  initialize: function (opts) {
    //这种默认属性
    this.propertys();
  },
  $: function (selector) {
    return this.$el.find(selector);
  },
  show: function () {
    this.$el.show();
    this.bindEvents();
  },
  bindEvents: function () {
    var events = this.events;

    if (!(events || (events = _.result(this, ‘events‘)))) return this;
    this.unBindEvents();

    // 解析event参数的正则
    var delegateEventSplitter = /^(\S+)\s*(.*)$/;
    var key, method, match, eventName, selector;

    // 做简单的字符串数据解析
    for (key in events) {
      method = events[key];
      if (!_.isFunction(method)) method = this[events[key]];
      if (!method) continue;

      match = key.match(delegateEventSplitter);
      eventName = match[1], selector = match[2];
      method = _.bind(method, this);
      eventName += ‘.delegateUIEvents‘ + this.id;

      if (selector === ‘‘) {
        this.$el.on(eventName, method);
      } else {
        this.$el.on(eventName, selector, method);
      }
    }
    return this;
  },

  unBindEvents: function () {
    this.$el.off(‘.delegateUIEvents‘ + this.id);
    return this;
  }

});

View的基类

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>前端MVC</title>
<script src="zepto.js" type="text/javascript"></script>
<script src="underscore.js" type="text/javascript"></script>
<style>
li {
list-style: none;
margin: 5px 0;
}
fieldset {
margin: 5px 0;
}
</style>
</head>
<body>
<div id="main">
<fieldset>
<legend>文章总数</legend>
<div class="js_num">
0
</div>
</fieldset>
<fieldset>
<legend>分类</legend>
<div class="js_type_wrapper">
</div>
</fieldset>
<fieldset>
<legend>标签</legend>
<div class="js_label_wrapper">
</div>
</fieldset>
<fieldset>
<legend>博客列表</legend>
<div class="js_blogs_wrapper">
</div>
</fieldset>
<fieldset>
<legend>新增博客</legend>
<ul>
<li>标题 </li>
<li>
<input type="text" class="js_title" />
</li>
<li>类型 </li>
<li>
<input type="text" class="js_type" />
</li>
<li>标签（逗号隔开） </li>
<li>
<input type="text" class="js_label" />
</li>
<li>
<input type="button" class="js_add" value="新增博客" />
</li>
</ul>
</fieldset>
</div>
<script type="text/template" id="js_tpl_kv">
<ul>
<%for(var k in objs){ %>
<li><%=k %>(<%=objs[k] %>)</li>
<%} %>
</ul>
</script>
<script type="text/template" id="js_tpl_blogs">
<ul>
<%for(var i = 0, len = blogs.length; i < len; i++ ){ %>
<li><%=blogs[i].title %> - <span class="js_blog_del" data-id="<%=blogs[i].id %>">删除</span></li>
<%} %>
</ul>
</script>
<script type="text/javascript">

//继承相关逻辑
(function () {

// 全局可能用到的变量
var arr = [];
var slice = arr.slice;
/**
* inherit方法，js的继承，默认为两个参数
*
* @param {function} origin 可选，要继承的类
* @param {object} methods 被创建类的成员，扩展的方法和属性
* @return {function} 继承之后的子类
*/
_.inherit = function (origin, methods) {

// 参数检测，该继承方法，只支持一个参数创建类，或者两个参数继承类
if (arguments.length === 0 || arguments.length > 2) throw ‘参数错误‘;

var parent = null;

// 将参数转换为数组
var properties = slice.call(arguments);

// 如果第一个参数为类（function），那么就将之取出
if (typeof properties[0] === ‘function‘)
parent = properties.shift();
properties = properties[0];

// 创建新类用于返回
function klass() {
if (_.isFunction(this.initialize))
this.initialize.apply(this, arguments);
}

klass.superclass = parent;

// 父类的方法不做保留，直接赋给子类
// parent.subclasses = [];

if (parent) {
// 中间过渡类，防止parent的构造函数被执行
var subclass = function () { };
subclass.prototype = parent.prototype;
klass.prototype = new subclass();

// 父类的方法不做保留，直接赋给子类
// parent.subclasses.push(klass);
}

var ancestor = klass.superclass && klass.superclass.prototype;
for (var k in properties) {
var value = properties[k];

//满足条件就重写
if (ancestor && typeof value == ‘function‘) {
var argslist = /^\s*function\s*\(([^\(\)]*?)\)\s*?\{/i.exec(value.toString())[1].replace(/\s/g, ‘‘).split(‘,‘);
//只有在第一个参数为$super情况下才需要处理（是否具有重复方法需要用户自己决定）
if (argslist[0] === ‘$super‘ && ancestor[k]) {
value = (function (methodName, fn) {
return function () {
var scope = this;
var args = [
function () {
return ancestor[methodName].apply(scope, arguments);
}
];
return fn.apply(this, args.concat(slice.call(arguments)));
};
})(k, value);
}
}

//此处对对象进行扩展，当前原型链已经存在该对象，便进行扩展
if (_.isObject(klass.prototype[k]) && _.isObject(value) && (typeof klass.prototype[k] != ‘function‘ && typeof value != ‘fuction‘)) {
//原型链是共享的，这里处理逻辑要改
var temp = {};
_.extend(temp, klass.prototype[k]);
_.extend(temp, value);
klass.prototype[k] = temp;
} else {
klass.prototype[k] = value;
}
}

//静态属性继承
//兼容代码，非原型属性也需要进行继承
for (key in parent) {
if (parent.hasOwnProperty(key) && key !== ‘prototype‘ && key !== ‘superclass‘)
klass[key] = parent[key];
}

if (!klass.prototype.initialize)
klass.prototype.initialize = function () { };

klass.prototype.constructor = klass;

return klass;
};

})();
</script>
<script type="text/javascript">
//基类view设计
var AbstractView = _.inherit({
propertys: function () {
this.$el = $(‘#main‘);
//事件机制
this.events = {};
},
initialize: function (opts) {
//这种默认属性
this.propertys();
},
$: function (selector) {
return this.$el.find(selector);
},
show: function () {
this.$el.show();
this.bindEvents();
},
bindEvents: function () {
var events = this.events;

if (!(events || (events = _.result(this, ‘events‘)))) return this;
this.unBindEvents();

// 解析event参数的正则
var delegateEventSplitter = /^(\S+)\s*(.*)$/;
var key, method, match, eventName, selector;

// 做简单的字符串数据解析
for (key in events) {
method = events[key];
if (!_.isFunction(method)) method = this[events[key]];
if (!method) continue;

match = key.match(delegateEventSplitter);
eventName = match[1], selector = match[2];
method = _.bind(method, this);
eventName += ‘.delegateUIEvents‘ + this.id;

if (selector === ‘‘) {
this.$el.on(eventName, method);
} else {
this.$el.on(eventName, selector, method);
}
}
return this;
},

unBindEvents: function () {
this.$el.off(‘.delegateUIEvents‘ + this.id);
return this;
}

});

//基类Model设计
var AbstractModel = _.inherit({
initialize: function (opts) {
this.propertys();
this.setOption(opts);
},

propertys: function () {
//只取页面展示需要数据
this.data = {};

//局部数据改变对应的响应程序，暂定为一个方法
//可以是一个类的实例，如果是实例必须有render方法
this.controllers = {};

//全局初始化数据时候调用的控制器
this.initController = null;

this.scope = null;

},

addController: function (k, v) {
if (!k || !v) return;
this.controllers[k] = v;
},

removeController: function (k) {
if (!k) return;
delete this.controllers[k];
},

setOption: function (opts) {
for (var k in opts) {
this[k] = opts[k];
}
},

//首次初始化时，需要矫正数据，比如做服务器适配
//@override
handleData: function () { },

//一般用于首次根据服务器数据源填充数据
initData: function (data) {
var k;
if (!data) return;

//如果默认数据没有被覆盖可能有误
for (k in this.data) {
if (data[k]) this.data[k] = data[k];
}

this.handleData();

if (this.initController && this.get()) {
this.initController.call(this.scope, this.get());
}

},

//验证data的有效性，如果无效的话，不应该进行以下逻辑，并且应该报警
//@override
validateData: function () {
return true;
},

//获取数据前，可以进行格式化
//@override
formatData: function (data) {
return data;
},

//获取数据
get: function () {
if (!this.validateData()) {
//需要log
return {};
}
return this.formatData(this.data);
},

_update: function (key, data) {
if (typeof this.controllers[key] === ‘function‘)
this.controllers[key].call(this.scope, data);
else if (typeof this.controllers[key].render === ‘function‘)
this.controllers[key].render.call(this.scope, data);
},

//数据跟新后需要做的动作，执行对应的controller改变dom
//@override
update: function (key) {
var data = this.get();
var k;
if (!data) return;

if (this.controllers[key]) {
this._update(key, data);
return;
}

for (k in this.controllers) {
this._update(k, data);
}
}
});

</script>
<script type="text/javascript">

//博客的model模块应该是完全独立与页面的主流层的，并且可复用
var Model = _.inherit(AbstractModel, {
propertys: function () {
this.data = {
blogs: []
};
},
//新增博客
add: function (title, type, label) {
//做数据校验，具体要多严格由业务决定
if (!title || !type) return null;

var blog = {};
blog.id = ‘blog_‘ + _.uniqueId();
blog.title = title;
blog.type = type;
if (label) blog.label = label.split(‘,‘);
else blog.label = [];

this.data.blogs.push(blog);

//通知各个控制器变化
this.update();

return blog;
},
//删除某一博客
remove: function (id) {
if (!id) return null;
var i, len, data;
for (i = 0, len = this.data.blogs.length; i < len; i++) {
if (this.data.blogs[i].id === id) {
data = this.data.blogs.splice(i, 1)
this.update();
return data;
}
}
return null;
},
//获取所有类型映射表
getTypeInfo: function () {
var obj = {};
var i, len, type;
for (i = 0, len = this.data.blogs.length; i < len; i++) {
type = this.data.blogs[i].type;
if (!obj[type]) obj[type] = 1;
else obj[type] = obj[type] + 1;
}
return obj;
},
//获取标签映射表
getLabelInfo: function () {
var obj = {}, label;
var i, len, j, len1, blog, label;
for (i = 0, len = this.data.blogs.length; i < len; i++) {
blog = this.data.blogs[i];
for (j = 0, len1 = blog.label.length; j < len1; j++) {
label = blog.label[j];
if (!obj[label]) obj[label] = 1;
else obj[label] = obj[label] + 1;
}
}
return obj;
},
//获取总数
getNum: function () {
return this.data.blogs.length;
}

});

//页面主流程
var View = _.inherit(AbstractView, {
propertys: function ($super) {
$super();
this.$el = $(‘#main‘);

//统合页面所有点击事件
this.events = {
‘click .js_add‘: ‘blogAddAction‘,
‘click .js_blog_del‘: ‘blogDeleteAction‘
};

//实例化model并且注册需要通知的控制器
//控制器务必做到职责单一
this.model = new Model({
scope: this,
controllers: {
numController: this.numController,
typeController: this.typeController,
labelController: this.labelController,
blogsController: this.blogsController
}
});
},
//总博客数
numController: function () {
this.$(‘.js_num‘).html(this.model.getNum());
},
//分类数
typeController: function () {
var html = ‘‘;
var tpl = document.getElementById(‘js_tpl_kv‘).innerHTML;
var data = this.model.getTypeInfo();
html = _.template(tpl)({ objs: data });
this.$(‘.js_type_wrapper‘).html(html);

},
//label分类
labelController: function () {
//这里的逻辑与type基本一致，但是真实情况不会这样
var html = ‘‘;
var tpl = document.getElementById(‘js_tpl_kv‘).innerHTML;
var data = this.model.getLabelInfo();
html = _.template(tpl)({ objs: data });
this.$(‘.js_label_wrapper‘).html(html);

},
//列表变化
blogsController: function () {
console.log(this.model.get());
var html = ‘‘;
var tpl = document.getElementById(‘js_tpl_blogs‘).innerHTML;
var data = this.model.get();
html = _.template(tpl)(data);
this.$(‘.js_blogs_wrapper‘).html(html);
},
//添加博客点击事件
blogAddAction: function () {
//此处未做基本数据校验，因为校验的工作应该model做，比如字数限制，标签过滤什么的
//这里只是往model中增加一条数据，事实上这里还应该写if预计判断是否添加成功，略去
this.model.add(
this.$(‘.js_title‘).val(),
this.$(‘.js_type‘).val(),
this.$(‘.js_label‘).val()
);

},
blogDeleteAction: function (e) {
var el = $(e.currentTarget);
this.model.remove(el.attr(‘data-id‘));
}
});

var view = new View();
view.show();

</script>
</body>
</html>