关于web界面设计的整体可维护性的感悟

1.表现与数据分开管理:

某些数据具备特殊的表现格式,比如颜色,大小等等。为了对这些格式表现分开管理进行

  a.使用css定义该类型数据的表现形式: 定义数据的类别,通过该类别对数据格式进行统一定义

.类别名 {
}

  b.对于某些数据,比如说金钱需要在前面加上一个$符号的,使用js统一对所有该类别的数据进行特别设置。这样在显示该数据时候,只需要设置为类别,就可以显示特别形式。

$(".类别名").each( ....) 

  c.如果在别人定义的基础上进行修改,需要注意加上别人定义类别的前缀,这样的话不会对无关者改变。不能让所有人对基本类别都可以肆意修改,修改权限越低,则前面限定的类别应该越多,否则造成混乱。

.类别名  .类别名1{
}

  d.数据表现元数据的定义应该统一在数据库单一源查询得到,如果随意在代码中定义表现的规则,那么后期维护也会非常麻烦。所谓元数据:即数据库中存放数据 <-> 网页上表现数据;他们并不一定一致,这种转换的规则必须统一源来定义。比如采取语言国际化标准,可以使用django的国际化,或者js的国际化。再例如一些数据的元数据,比如说类型,国家等等。在使用这些元数据的时候需要统一接口进行使用,而非各自在各自模块中定义一套。

2.所谓的元数据

  a.数据的展现格式类别: 例如 css 样式

  b.在数据库中具体表格数据,对应的数据意义。

    我们获取的REST的数据可能并非界面有好的,如果这个从非界面有好到界面友好之间需要转换,那么应该有个统一的转换层。为什么要统一,防止每个子模块对数据自定义解释,这样后期就难以维护。转换层可以在服务端,也可以    在客户端使用js

  c.

时间: 2024-08-18 02:11:16

关于web界面设计的整体可维护性的感悟的相关文章

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布

web 界面设计---js提交表单

Java代码   <script type="text/javascript"> function checkImage(){ var imageValue = document.getElementById("actorCard:imageField:image").value; if(imageValue !== ""){ document.getElementById("actorCard").sumbit(

色彩设计在WEB界面应用的功能性详解

今天的世界是互联网的世界.技术的进步,让我们开始关注"信息的品质".在信息技术云集的互联网世界中,一个网站的与众不同和独特的色彩,是在众多网站中脱颖而出的首要条件之一."色彩"它是自然美.生活美.艺术美的重要组成部分.在计算机技术和信息网络科技快速发达的今天,色彩设计的创造力在这一高科技领域也得以延伸.从互联网上五彩缤纷的页面来看,任何一件WEB界面设计作品都离不开色彩设计.商务网络界面要利用色彩设计传达产品形象信息,旅游网络界面要利用色彩设计传达实物风景信息,游戏

表格布局扩展/DW设计界面中快速整体布局页面的操作

DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt

免费素材:25套免费的 Web UI 设计的界面元素(转)

Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. 今天这里收集的免费资源是25套免费的 Web UI 设计的界面元素,用于和Mobile App设计.它包括所有的设计元素的 PSD 格式,某些元素提供矢量格式,可以缩放到任意大小. UI Kit – Free PSD Download Ui Kit [Free PSD] Download Free

java web程序 上机考试登陆界面设计实现

今天是java web上机.做一个登陆注册的界面.要求:jsp.mysql数据库,js做一个美观的界面.功能.可以添加 更多啊.我做的界面被老师狠狠的扣了分.问题在于.当用户没有输入任何信息(没有输入用户名和密码)就直接提交的 时候,页面显示500错误,这里改正的方案2点.我是这么想的.1.要么是提交时弹出一个对话框.显示用户名和密码为空!.这里 要注意的是,弹出的对话框不能阻止用户输入信息,弹出后,依然让用户输入.2.要么是提交按钮后依然跳转到本页面.因为一个form表单 只能跳转到一个页面,

关于java web开发需要哪些技术要求(简单的web界面管理系统)

目前, 国内外信息化建设已经进入基于Web应用为核心的阶段, Java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Java的WEB项目需要掌握的技术如下: lJava语言 l面向对象分析设计思想 l设计模式和框架结构 lXML语言 l网页脚本语言 l数据库 l应用服务器 l集成开发环境 下面我们具体地看每个技术. 1.Java语言 Java语言体系比较庞大,包括多个模块.从WEB项目应用角度讲有JSP.Servle

界面设计必须要权衡的三个要素

界面设计师通常都会犯一种毛病,那就是非常纠结对一个产品设计出稿时对三个方面之间取得权衡,然而这个三个要素的权衡却是打造出具有整体性的APP有着关键性的影响.那我们现在来说说这三个要素要怎样权衡. 显而易见的 话说回来,难道“明显”不是所有功能都应该具备的基本特征吗?恩,除非你的产品足够简单到只做一件事,就像曲别针那样,否则你没办法使所有东西都具 有相同的视觉优先性并全部以明显的形式呈现出来.纠结的地方就在这里,对于稍复杂的产品,你必须决定哪些东西应该始终保持显而易见,哪些需要相对易用,而 又有哪

《自己动手写开源框架10》:Web界面快速开发实践

下面是一些常用的链接,供大家使用: GIT地址:https://git.oschina.net/tinyframework/tiny问题报告:https://git.oschina.net/tinyframework/tiny/issues更多内容,请看本人博客,不一样的内容,一样的精彩! 在展示过程的同时,会把相关的知识做一个充分的介绍 .一.寻找网站模板 要做网站,不能没有模板,自己不会做网页设计,咋办?问谷歌找百度呗,找了一阵,看到下面这个模板不错,就它了. http://www.toop