美文网首页
JS设计模式之MVP模式

JS设计模式之MVP模式

作者: JSUED | 来源:发表于2017-08-24 22:53 被阅读74次

MVP模式

model(模型) - view(视图) - Presenter(管理器),view层不能直接引用model层内的数据,二是通过presenter层实

'use strict';

// 只是搭建一个大题的架构,落实到具体功能上的例子在书中查看~~

var MVP = function () {};

MVP.model = (function () {
  // 内部数据对象
  var M = {};

  // 服务端获取的数据,通常通过ajax获取并存储
  // 缓存起来,减少异步请求操作
  M.data = {};

  // 配置数据,页面加载时即提供
  M.conf = {};

  return {
    getData: function (m) {
      return M.data[m];
    },
    getConf: function (c) {
      return M.conf[c];
    },
    setData: function (m, v) {
      M.data[m] = v;
      return v;
    },
    setConf: function (c, v) {
      M.conf[c] = v;
      return v;
    }
  };
})();

MVP.view = (function () {
  return function (str) {
    var html = '';

    // 将参数字符串转换成期望模板
    return html;
  }
})();

MVP.presenter = (function () {
  var V = MVP.view;
  var M = MVP.model;
  var C = {};

  return {
    init: function () {
      for (var i in C) {
        C[i] && C[i](M, V, i);
      }
    }
  };
})();

MVP.init = function () {
  this.presenter.init();
};

相关文章

  • 设计模式演变过程

    基本设计模式之MVC模式 基本设计模式之MVP模式 基本设计模式之MVVM模式 SPA和MPA SPA:单页面应用...

  • JS设计模式之MVP模式

    MVP模式 model(模型) - view(视图) - Presenter(管理器),view层不能直接引用mo...

  • 前端设计模式

    JS设计模式一:工厂模式jS设计模式二:单例模式JS设计模式三:模块模式JS设计模式四:代理模式JS设计模式五:职...

  • iOS开发小帖:设计模式

    设计模式精彩文章 iOS 架构模式--解密 MVC,MVP,MVVM以及VIPER架构 MVP设计模式 基于面向协...

  • Android MVP设计模式总结

    MVP设计模式从提出至今也有不短的时间了,大家应该或多或少使用过MVP模式开发项目,或者至少听说过MVP设计模式,...

  • 《JS设计模式》读书笔记(一)

    标签:JS 设计模式 《JS设计模式》读书笔记(二) 《JS设计模式》读书笔记(三) 《JS设计模式》读书笔记(四...

  • 《JS设计模式》读书笔记(六)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(二)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(三) 《JS设计模...

  • 《JS设计模式》读书笔记(三)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

  • 《JS设计模式》读书笔记(四)

    标签:JS 设计模式 读书笔记链接: 《JS设计模式》读书笔记(一) 《JS设计模式》读书笔记(二) 《JS设计模...

网友评论

      本文标题:JS设计模式之MVP模式

      本文链接:https://www.haomeiwen.com/subject/jqsydxtx.html