我多年来在我的HTML中使用类似这样的元素应隐藏的元素:
<div style="display: none"></div>
Run Code Online (Sandbox Code Playgroud)
没关系,但我不能再忍受内联风格了.
在JavaScript window.onload事件中以编程方式隐藏元素为时已晚 - 它将在屏幕上闪烁.
我可以创建CSS类'隐藏',但是使用浏览器的激进加载策略(比如在Opera中),该块可能会出现一秒钟(在加载CSS之前).
有没有更好的方法?
我正在启动一个Web应用程序,客户端在纯ExtJS和Grails中间层实现.该应用程序具有基于角色的授权,用户可以拥有许多细粒度的角色,如SOME_FORM_READ,SOME_FORM_UPDATE,SOME_DATA_DELETE,SOME_DATA_READ等.根据用户的角色,某些GUI元素需要被禁用或隐藏,而其他需要处于只读模式.
我在网上做了一些搜索,但没有找到专门解决这个问题的设计模式,所以我想出了自己的设计.我相信很多网络应用程序都会有类似的要求,所以我想在这里发布我的设计并听取人们的意见.我的设计绝不是一个完美的设计,但我希望它可以通过每个人的输入得到改善.虽然我正在使用ExtJS,但一般设计也应该适用于类似的框架,如GWT,Flex,Swing等.
我们需要在客户端层中处理有关授权的四种类型的代码(或信息):
GUI元素操作代码,例如:
panel.hide()form.setReadOnly(true)
GUI元素权限要求,例如:
form.requires('READ','FORM_READ_ROLE')
adminPanel.requires( 'ADMIN_ROLE')
用户权限信息,基本上是用户拥有的角色列表;
授权逻辑:根据用户权限确定要隐藏/禁用的元素;
设计的核心是单例,名为GUIPermissionManager,简称GPM.这是一种集中式设计,因为大多数代码都在GPM中,因此GUI元素不会受到授权代码的污染.这就是GPM的工作原理:
GUI元素(需要某些访问权限)通过GPM注册其权限信息,如下所示:
GPM.register(this,'DEPARTMENT_DELETE_ROLE'); //删除部门的按钮
GPM维护GUI权限注册列表
在用户登录时,GPM会收到分配使用的角色列表
GPM遍历GUI权限注册列表并基于用户权限,确定要隐藏的GUI部分,然后相应地调用element.hide()
问题: