页面重构时的注意事项

简介: 页面重构时的注意事项 1. 重构页面时,什么样的代码才算是好的代码? 2. 重构时如何告诉设计师,他设计的东西太丑?   1. 重构页面时,什么样的代码才算是好的代码? 这个我感觉要从三方面来做答,基础的就不说了,那些语义化,结构化,兼容性等等方面的问题。
 

1. 重构页面时,什么样的代码才算是好的代码?

这个我感觉要从三方面来做答,基础的就不说了,那些语义化,结构化,兼容性等等方面的问题。说说中级部分的:

  • 页面的健壮性: 这个怎么说呢,按我的理解,UI出的psd图是一个页面理想状态下的形态,而真实上线后,会出现三种极端状态,一,数据极多,二,数据极少,三,数据刚好(其实就是PSD设置描述的一个状态)。所以在页面排版的时候,考虑这设计之外的两种状态,以免数据太多的时候,撑破布局,页面走样。以免数据太少,页面高度变小,布局不对齐,会打破整个页面的平衡。UI设计时为了效率或经验问题出的图,刚好是理想状态,不多不少,但经验丰富的,会在项目后期补出一个无数据时的装饰页面。

  • 页面的扩展性:可以说,这个也是第一条的扩充,扩展性的意思为,在页面的模块很少的时候,要考虑未来添加子模块或兄弟模块的状态,为将来留好css,html扩展的出入口。在将来添加模块的时候,尽可能少的去动原来的html结构,使html易于扩展,尽可能少的去修改css,使css能够继承可复用。一般的处理就是多套一层div,或其它解决办法。

  • 页面的复用性: 由于页面中风格相似的模块很多,或页面中与页面中相似的模拟很多,但是有的高点有的低点,这样建议把表现形式的样式放在一个class中,物理属性放在一个class中。还有就是装饰性的图片决不不以明标签的方式插入到页面中,内容式的内容绝对以的方式插入中去,以免将来多主题,多语言版本的实现。 
    大概就这么多,唉,上次面试都没有想起这么多,郁闷。

 

2. 重构时如何告诉设计师,他设计的东西太丑?

  • 个人本身的专业度,如果你是从一个设计转过来的前端,并且虽然在从事前端,但一直在关注着前端,这样在保证自身水平或有认知能力的前提下,去提一下建议,那能保证是有质量,而不是随便说说。比如:欧美国家的人为什么喜欢饱和度那么重的页面风格,那是因为他们在赤道附近,接受紫外线比较强,所以喜欢重色。比如,能分清冷暖色,能分清各个颜色的表达意义,一般各个颜色搭配之后是为了突出页面内容版块而且强调一定是有序,而不是无序的。

  • 沟通时的语气或说话时的文字组织,一定要注意。这不但体现一个人的情商,更体现一个人的智商。话有三说,巧着为妙。为何他与人相处恰恰刚好,而我却处处被动,这是有道理的。 
    个人建议:注意建议,比如以下场景,你这个东西在我的显示器上看的偏黄,与我们产品logo的主色冲突太大,是不是故意为之,还是我显示器的问题,能不能到我这来看看。一定要注意,是你故意为之,或我这看看。即抬高了对方,又把场景的主动权掌握在自己的手里。

  • 本身话语权,如果你具备一个有话语权的人,或者有这个品牌认知,让大家有这个共识,这人,说的东西一般靠谱。可以去说,否则,点评别人的江山,还不如管好自己的三亩地。






本文转自豪情博客园博客,原文链接:http://www.cnblogs.com/jikey/p/4843457.html,如需转载请自行联系原作者
目录
相关文章
|
安全 网络安全 API
163邮箱IMAP服务器设置方法
```markdown 使用IMAP协议同步163邮箱:登录邮箱→设置→账户→IMAP/SMTP→开启服务→配置服务器(imap.163.com:993, SSL/TLS)→设置用户名和密码→保存并在邮件客户端添加账号。确保多设备邮件同步,定期更新设置。[≤240字符] ```
|
存储 数据可视化 C语言
[iOS研习记]聊聊iOS中的Mach-O
Mach-O的全称为Mach Object,是OS X与iOS上的一种可执行文件格式。Mach本身指一种操作系统的微内核标准,被用于OS X与iOS系统的内核中。相信对于移动端的iOS开发者来说,对Mach-O文件一定不陌生,我们编译打包的iOS IPA文件,内部其实就有一个可执行的Mach-O文件,我们开发的framework和.a等动态库静态库中,也会包含Mach-O文件,本篇文章,我们就来详细看看Mach-O中究竟放的是什么,Mach-O的结构是怎样的。
1120 0
|
监控 前端开发 JavaScript
AST 代码扫描实战:如何保障代码质量
2020 年 618 大促已经过去,作为淘系每年重要的大促活动,淘系前端在其中扮演着什么样的角色,如何保证大促的平稳进行?又在其中应用了哪些新技术?淘系前端团队特此推出「618 系列|淘系前端技术分享」,为大家介绍 618 中的前端身影。 本篇来自于频道与D2C智能团队的菉竹,为大家介绍本次 618 大促中是如何用代码扫描做资损防控的。
3722 0
AST 代码扫描实战:如何保障代码质量
|
7月前
|
Web App开发 搜索推荐 安全
macOS Sonoma 14.7.6 (23H626) 正式版 ISO、IPSW、PKG 下载
macOS Sonoma 14.7.6 (23H626) 正式版 ISO、IPSW、PKG 下载
695 6
macOS Sonoma 14.7.6 (23H626) 正式版 ISO、IPSW、PKG 下载
|
SQL 安全 网络安全
SQL安装程序规则错误解决方案
在安装SQL Server时,遇到安装程序规则错误是一个比较常见的问题
|
SQL 安全 Java
JAVA代码审计SAST工具使用与漏洞特征
JAVA代码审计SAST工具使用与漏洞特征
619 1
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
537 4
|
缓存 边缘计算 负载均衡
如何理解CDN?说说实现原理?
CDN(内容分发网络)是提升网络访问速度的关键技术,通过在全球或全国范围内设立边缘服务器,将内容缓存到靠近用户的地方。当用户访问网站时,DNS返回CNAME,引导用户连接到最近的CDN节点,而非直接到源站。CDN的负载均衡系统依据用户位置、运营商、节点负载等因素选择最佳边缘节点提供服务,而缓存系统则存储常用资源以提高命中率,减少回源请求。高命中率使得CDN能显著提高网站性能,降低网络拥塞。
4383 0
|
前端开发 容器
【css】css实现图片或动图边缘模糊化处理(附示例代码)
【css】css实现图片或动图边缘模糊化处理(附示例代码)