VonPortal的页面设计思路

2019独角兽企业重金招聘Python工程师标准>>>

在MVC架构中，我们的页面可以通过三种方式进行加载，即RenderBody()，RenderAction()和RenderPartial()，其中RenderBody()主要是在系统主框架基础上的加载，这个基本被主框架使用，对于模块的加载没有太大的价值，我们在设计Portal时主要是考虑 RenderAction() 和 RenderPartial()。

在Controller中也是一样，如果是Action直接展示，我们多是返回View（）而，Partial则是采用PartialView（）返回。

根据经验我们在设计模块时要注意采用哪种方式进行，下面是我根据自己的研发经验积累制定的模块研发原则：

1、管理模块：即需要Admin或高级管理权限的，不是对外发布或展现的，我们一般采用固定皮肤的方式，即模块中直接采用指定框架文件，而且一个页面只包含一个管理模块的运行，这样简化了页面加载和管理技术，易于快速开发，节约人力和资源。关键是这部分页面不对外，没有其他用户使用，因此指定皮肤或框架是没有太大问题的，一般客户都可以接受；

2、展现模块：采用PartialView方式展现，首先要求自己不含有任何框架信息，即在cshtml文件中不指定自己的 layout 参数，而是等待皮肤加载后所用有的，这些模块多是采用动态加载的方式加载到界面中的，因此不能含有 layout 参数，否则会看到两种头信息的加载；展现模块采用 return PartialView(...); 方式返回。

关于展现模块的参数传递思路，由于展现模块可能在一个页面中多次加载，关键内容建议采用guid的变量进行命名，常用的方法如下：

在Controller文件中
public ActionResult Index()
{
  ViewBag.tagID = System.Guid.NewGuid();
  return View();
}

在界面文件中
<div id="@ViewBag.tagID">
... ...
</div>

这样即解决了模块的重复性，同时也解决了javascript的定位与调用。

关于ajax在页面中的调用与加载，有些模块设计的内容是通过ajax来调用生成的，这种模块往往在加载初始中是空的，如果我们在页面加载时再通过ajax来调用，就会浪费很多系统时间和资源，这种模块在设计时需要采用双重加载模式，即页面参数加载和ajax加载并存，当模块加载时系统会在后台处理中直接获得数据，通过 return View(data); 返给页面，同时也支持ajax在运行过程中替换掉原有内容，完成内容的ajax自动更新功能。

由于界面中的模块都是动态加载的，因此要求模块的功能是单一的，例如新闻栏目和新闻列表及新闻内容是独立的三个模块，这样就方便用户通过页面加载进行组合使用，但这三个模块是相辅相乘的，这就需要建立一套客户端的页面模块间通信机制。

下面是我通过javascript建立的一套页面间模块通讯机制代码：

//javascript级信息交互功能，即听口和说口间的信息传递
//可以通过 $(function(){$.regListener("唯一编码", "事件名称", 回调函数);}); 回调函数声明为 function 回调函数(执行参数)，来进行注册，通过 $.sendPageMsg("事件名称", 执行参数); 函数进行通讯
(function ($) {
    var listeners = new Array();
    function listener(id, msgName, callback) {
        this.id = id;
        this.msgName = msgName;
        this.callback = callback;
    }
    $.regListener = function (id, msgName, callback) {
        for (arr in listeners) {
            if (arr.id == id && arr.msgName == msgName) return;
        }
        var obj = new listener(id, msgName, callback);
        listeners[listeners.length] = obj;
    }
    $.sendPageMsg = function (msgName, msg)
    {
        for (idx in listeners) {
            if (listeners[idx].msgName == msgName) listeners[idx].callback(msg);
        }
    }
})(jQuery);

这种机制会形成两种通讯模块，即发送模块和接收模块：

发送模块完成信息的发送，即通过发送来传递参数；

接收模块接收到信息后，通过ajax完成信息的更新和展示；

通过这种机制就可以完成信息的客户端自动更新和变化。

这就要求接收模块的启动和加载时注册自己，即听口注册，样例代码如下：

<script type="text/javascript">
    function loadNewsCallback(param)
    {
        $.ajax(...);
    }
    $(function(){
        $.regListener("news", "loadNews", loadNewsCallback);
    });
</script>

其中

$(function(){
        $.regListener("news", "loadNews", loadNewsCallback);
    });

完成了听口的注册，系统一旦收到 “loadNews”的信息就会调用 loadNewsCallback 完成页面相应内容的更新。

发送就简单很多了。

<script type="text/javascript">
    function eventOnClick(obj, id)
    {
        $.sendPageMsg("loadNews", id);
    }
</script>

在新闻列表中调用 eventOnClick 就可以了，或者直接将 $.sendPageMsg("loadNews", id); 写入列表的中项目的 onClick 事件中就可以了。

转载于:https://my.oschina.net/u/2308182/blog/689132