文档章节

VonPortal的页面设计思路

jamesvon
 jamesvon
发布于 2016/06/09 15:07
字数 1214
阅读 28
收藏 2
点赞 0
评论 0

在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 事件中就可以了。

© 著作权归作者所有

共有 人打赏支持
jamesvon
粉丝 3
博文 31
码字总数 47875
作品 0
河西
项目经理
建立自己的 MVC portal (一)

目标和任务 建立一个以.net MVC架构为基础的,采用OWIN+AspNet.Identity认证体系的,支持多站点的Portal平台,主要包含平台基本功能和一个新闻模块。 建立一个具有良好扩展功能和研发扩展需求...

jamesvon
2016/05/04
54
0
以Model为核心的表单设计器的思路

在之前的文章中介绍过一些表单设计器的思路和想法。在上一篇文章:零代码平台实现中说到我要实现一个功能强大的表单设计工具。经过几天思考,觉得以Model为核心去实现表单设计器思路既简单也...

晨曦之光
2012/03/09
0
0
以Model为核心的表单设计器的思路

在之前的文章中介绍过一些表单设计器的思路和想法。在上一篇文章:零代码平台实现中说到我要实现一个功能强大的表单设计工具。经过几天思考,觉得以Model为核心去实现表单设计器思路既简单也...

王二狗子11
01/01
0
0
微信小程序版博客——授权登录的修改(wx.getUserInfo)

最近一直忙着项目没有时间打理我的小程序,有网友反馈wx.getUserInfo官方文档中做了一些调整,今天有空看了下文档,果然变了,所以抽时间优化了下代码 思路 之前的授权登录优化这里看下原来的...

Bug生活2048
07/09
0
0
网站统计平台设计思路?

最近项目要开发网站统计平台,类似百度统计,google分析之类的工具,通常第三方网站统计只要你稍一段js代码到你需要统计的网站页面就能完成统计功能,但是对其中的设计思路和实现原理没有想到...

HelloKitty123
2012/07/10
559
3
关于并发、超卖处理的思路

做电商网站,经常会有各种秒杀和热门商品,所以高并发的处理一直是电商最重要的事情。这里记录下当初自己是如何处理的 写在前面: 1、本文设计到的并发处理均是针对纵向,不针对横向扩展,即...

卖小女孩的小火柴
2015/10/13
4.8K
6
Best Practice for React-Native and Redux

Best Practice for React-Native and Redux wd and cc2017-11-262 阅读 Reactfornative 从 6 月到现在,在 RN 上面摸爬滚打了一段时间了,目前总算找到了一个适合我们自我感觉还可以的开发模...

wd and cc
2017/11/26
0
0
怎样很好的分离Action中页面返回数据和后台业务处理数据

问题:怎样很好的分离Action中页面显示数据和后台业务处理数据 描述:在web请求中我们经常会在Action中进行数据处理并调用service或者manager类中的方法进行业务处理,处理完成后返回下一个要...

deepler
2012/08/31
505
2
作为一个前端,每天工作中必须面对的问题

工作了这么久,不能说自己有多厉害,但是工作中的遇到的问题还是值得入行1年以上的前端参考的! 首先:说一下工作职责.所谓前端工程师,就是把客户想像中的页面通过产品经理 => 原型设计 => UI设计...

前端大白
06/14
0
0
通过响应式web设计,使本站支持手机浏览

2014-01-28 14:49:14 现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页的时候,往往会出现各种各样的问题。 糊涂僧的这个小博客也一样,为了让本站在...

squanchao
2016/06/29
22
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JPA @MappedSuperclass 注解说明

基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclass注解将实体类的多个属性分别封装到不同的非实体类中。 1.@MappedSuperclass注解只能标准在类上:@Target({java.lang....

海博1600
6分钟前
0
0
Scala Configuration 相关API

Play使用了 Typesafe config library,但是也提供了一个有着更多Scala高级特性的的 Configuration 封装。不熟悉Typesafe配置的开发者可以移步 configuration文件的语法和特性文档。 读取配置...

Landas
今天
1
0
使用cookie技术 记住账号

1. 效果 2. 实现过程 2.1 前端 将用户的选中传递给后台 这个参数的获取是 参考:https://my.oschina.net/springMVCAndspring/blog/1860498 // var rememberLogin = $("#rememberLoginId").i...

Lucky_Me
今天
1
0
《趣谈网络协议》02之网络分层的真实含义

一、提出问题 1.提出问题 当你听到什么二层设备、三层设备、四层 LB 和七层 LB 中层的时候,是否有点一头雾水,不知道这些所谓的层,对应的各种协议具体要做什么“工作”? 2.这四个问题你弄...

aibinxiao
今天
2
0
Python3学习日志二 Python中的集合set和字典dict

1.集合set 定义一个集合set 我们可以看到定义集合set有两种不同的形式,如果要定义一个空的集合set不能用{}而是要用set();另外,集合是无序的,而且set中的元素是不可重复的,如果你定义了一...

Mr_bullshit
今天
0
0
adb 操作指令详解

ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也是 Android 设备玩家的好玩具。 注:有部分命令的支持情况可能与 Android 系统版本及定制 ROM 的实现有关。...

孟飞阳
今天
0
0
nodejs安装以及环境配置(很好的node安装和配置文章,少走很多弯路)

一、安装环境 1、本机系统:Windows 10 Pro(64位) 2、Node.js:v6.9.2LTS(64位) 二、安装Node.js步骤 1、下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 2、选安装目录进...

sprouting
今天
1
0
Redisson

了解了Redisson,发现使用挺简单的,接下来准备深入学习一下。 Redisson介绍 Redisson是架设于Redis基础之上的一个Java驻内存数据网格(In-Memory Data Grid) Redisson在基于NIO的Netty框架上...

to_ln
今天
0
0
python有哪些好玩的应用实现,用python爬虫做一个二维码生成器

python爬虫不止可以批量下载数据,还可以有很多有趣的应用,之前也发过很多,比如天气预报实时查询、cmd版的实时翻译、快速浏览论坛热门帖等等,这些都可以算是爬虫的另一个应用方向! 今天给...

python玩家
今天
0
0
python爬虫日志(3)-爬去异步加载网页

在浏览器检查元素页面中,选取Network中的XHR选项即可观察每次加载页面,网页发出的请求,观察url的规律即可利用封装的函数对每一页进行爬取。

茫羽行
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部