仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 840|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:做个好重构不简单 如何才算一个好重构?

[复制链接]
小女巫 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:49:40 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
提高易用性。使用CSS可以结构化HTML,例如:标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。
破洛洛文章简介:怎样做一个好重构。
用这个题目,是由于前一段工夫组里有一个开放式会商:如何才算一个好重构?
实在,"好"与"坏"一直都是绝对的,由于每一个人眼中对待"好"与"坏"的尺度纷歧样,不如从本身的角度思索一下:怎样做一个好重构?
先来看一个平常我们碰到的最多的两栏结构:


基础的html代码:

来看详细的CSS代码完成(疏忽margin):

很分明在坚持一样html布局的情形下,完成两栏结构能够有多种CSS计划完成(左栏定宽),次要偏向是用浮动或不必浮动,右栏定宽大概不定宽:
Qzone、伴侣网、Facebook都给左栏浮动,独一分歧的是右栏的写法,Qzone给右栏定宽而且浮动,而伴侣网和Facebook则并没有给右栏定宽也未浮动,而是使用了创立BFC而且为低版本IE触发hasLayout的道理让右栏自顺应宽度。
Yahoo和Google两栏都未用浮动,独一分歧的是Yahoo用了相对定位的办法,而谷歌用了inline-block,Google已公布旗下一些产物保持对IE8的撑持,以是Google能够勇敢的利用inline-block往完成结构,不必往为其他低版本扫瞄器写一年夜堆的hack。
这个中有最好的计划么?下面每种计划都有各自的好坏,大概合适于某种项目背景,一样选用的计划大概和用户群体也有干系。固然不管选用哪种计划,从用户层面来说,没法感知到,但我们不克不及因而往随便的利用一种计划。
为了项目前期的易保护性和易用性,必需要选择一种最好的计划,而我们假如连基础的BFC、hasLayout这些常识都不懂得便会显得力所能及。同时要明白本人的定位:我们不单单是一个"切图仔"或"美工",我们不克不及无视一些停滞用户群体,我们必需往使项目标代码变得更文雅、更容易用。固然重构的基础岗亭职责是:PSD转html+css+js,但要晓得仅仅做到这些还不算一个好重构,更好的相同才能,更多的分享、思索和总结,怎样准确的往存眷一些前真个静态,这都是我们必要做的,固然最主要的还必要我们有一个悲观的立场和幸运的心态,上面自己将具体论述究竟怎样做一个好重构,固然这只是不才的团体概念,还请列位拍砖。
从专业角度:
明白的本身定位

今朝国际将前端分为重构和JS开辟的其实不多,固然PS是重构必用的一个软件,但要晓得重构不是"切图仔",切图只是重构事情内容的一部分。我们没有来由由于本人是重构,而不往进修其他手艺,由于你晓得你不会干一生的重构,JS不克不及丢,一样的对前端新手艺要熟知。重构页面时应当把年夜部分的工夫花在页面模块的抽离、功能优化、易保护性、易用性的探究上,而应当花起码的工夫往代码完成。大概你写出来的页面有百万级的用户在利用,这里大概有停滞用户,以是你要思索各类用户的感觉与体验,而不单单是范围于代码的完成度上。
注意前端基本妙技

前真个基本常识就像一个屋子的地基,假如地基打欠好,一旦碰到一点地动大概就会倒。同时也像一个城堡的各扇门,哪边的门造的欠好,仇人的枪火就能够即刻攻破,以是打好基本是前端进修更多常识的基石。CSS属性的特征、html标签的语义化、JS的基本常识、W3C的标准(块格局化高低文、层叠高低文、框模子等),这些能够多花点工夫往进修和牢固,做到能准确公道的利用某个前端手艺计划。
准确看待前沿手艺

互联网开展一日千里,前端手艺更新也很快,当我们在学css2时,css3已风行环球,当我们在学css3时,css4已被提上了日程。前真个路上永久学无尽头,以是在某项新手艺出生时,就必要我们准确的往审阅。
在做好本人本职事情的同时,坚持一颗进修的热忱,新手艺能够实验利用,但请先必定懂得为何要用这个新手艺?利用这个手艺能为我们带来甚么改善?在前端手艺上,永久没有最好的手艺计划,只要最符合的手艺计划。最新的纷歧定是最好的,旧的也纷歧定是差的,切忌自觉跟风进修新手艺,要晓得本人正在学的是不是可以学乃至用。(笔者注:实在更多的时分并非某项新手艺,手艺早就出生,只是一个新的前端办理计划或尺度被推进出来了,如CSS3实在在03年就出生了)

更好的相同才能

我们天天大概要和开辟、产物、计划、交互、测试等分歧的人打交道,以是这就必要我们有一个更好的相同和谐才能,注意一个更好的相同技能,削减相同上的本钱。"统统以用户的代价为依回",这也恰是互联网行业所必要的一种理念,在与其他同事相同时除朴拙待人之外,还必要多为用户往思索:我们真的必要这么做么?

破洛洛文章简介:怎样做一个好重构。

有选择的列入手艺论坛

假如本人呆在一个小公司,前端人也不是良多,没有一个很好的气氛,那末这时候我们就只能经由过程两种体例来拓宽人脉:收集和论坛。收集如QQ群、蓝色幻想等,而面临面的论坛无疑是最实在的一种拓宽人脉的体例。实在如今国际年夜的情况下,前端类的手艺论坛我本人都数不外来,这时候有选择的列入一个论坛显得尤其主要,而不应不论本人懂不懂、收费仍是免费甚么论坛都往列入,实在合适本人的是最主要的。
存眷扫瞄器厂商

10年前,IE统治了泰半个地球,现在,其他的各年夜扫瞄器厂商已挤进环球化份额争取战,最离不开前真个就是扫瞄器,存眷扫瞄器厂商的举措与格式可让你具有前瞻性的视角。一些扫瞄器厂商的开辟者库:微软的MSDN,火狐的MDN,谷歌的开辟者库,欧朋的开辟者库。别的能够存眷下各扫瞄器厂商的推行举动,火狐中国会在每次推出新版本时有体验举动,微软的最新的IE10推出时国际也有推行举动,能够懂得这些新版本扫瞄器的特征和对css3html5的撑持性怎样。
更多的承当和分享
在平常更多的往承当一些分外的事情,比如在重构团队的合作标准、编码标准上提出本人的一些公道化倡议,输入一些利于其他同事更快、更高效提拔的文档。平常在本人事情碰到了一些好的事情办法大概对一些新手艺的研讨能够拿出来和人人分享。重构的团队气氛很主要,谁都不但愿呆在一个成天尽管本人写代码的团队,那样不论关于团体仍是团队都是倒霉的。
更多的思索与总结
思索指的是"认识流",详细是我们在重构过程当中的设法和理念,怎样想决意了我们怎样做。
作为重构,良多人拿到计划稿以后就是入手下手专一切图,用各类"奇技淫巧"完成各类需求,我们乃至不会在拿到计划稿以后细心的做一下剖析:怎样做一个公道的架构、怎样抽取符合的模块、怎样用更文雅的体例和轻量的代码完成页面中的需求。
大概是今朝年夜的情况下在敦促着我们不休的向前跑:各类前端论坛年夜多半都在讲某个手艺,纠结于某一手艺细节的完成,讲烂失落的功能优化,可很少有人往讲该怎样公道的选择一个前端办理计划,怎样办理重构中碰到的一系列分歧场景中的成绩,和最主要的我们本人的职业生活思索:我们是筹办写一生代码么?
总结也叫"review",是温习、回忆的意义,review关于重构来说,显得尤其主要,按期的项目回忆可以发明项目中存在的成绩从而躲避今后再次呈现。
固然项目回忆是一方面,更主要的是代码层面的review,不按期的review能够促使我们在一些代码的细节把控方面做的更文雅,review除能够进步代码的品德外,还能增强团队的合作精力,和进步团队的全体手艺才能。明显这是一件十分成心义的事。团队成员能够在一同review人人的代码,发明每一个人身上的不敷和亮点,否则我们真的是尽管专一本人代码的苦逼代码仔了。
从生存角度:
坚持浏览的热忱

收集的信息是碎片化的,在我们没有很好的梳理碎片才能的时分,一本什物书本关于安慰我们的心灵显得尤其主要。偶然生存、事情会让人压的喘不外气来,这时候,我们必要往寻觅一种体例往开释压力,嗯,浏览是一种很好的体例。
保持一项活动喜好

平常事情太忙时,牢记必定要改动本人的事情办法,梳理好需求的优先级,预留出必定的工夫来抓紧本人,这个抓紧必定要让本人的筋骨举动开,能够是往打打羽毛球,大概往跑步,再大概往健身。只要让本人的身材变得壮大起来,才有更多的能量值往砍怪晋级。
坚持悲观的生存立场

擅长捕获生存中的一些微小的幸运颗粒,我们就会常常活在康乐中。前次在腾讯安康加油站听了一次关于生存的分享,个中提到"生存就像炖鸡汤,偶然必要加点调料和沾料",切实其实,这些沾料就是发明生存中的微小幸运,做一个悲观、宽大旷达、开畅的前端人士。调治好事情和生存的均衡,让本人不要再活的那末累。
-------------------------------------
嗯,做个好重构真的挺不简单的,不管是从专业角度仍是从生存角度,缺一不成,坚持一个悲观、热忱、主动的心,不休进修,让本人活得复杂、康乐,此足矣。
实在,你不但是在重构代码,也是在重构人生!
</p>
目前我们的站就是div+css做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
再见西城 该用户已被删除
沙发
发表于 2015-1-17 19:01:49 | 只看该作者
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。
小女巫 该用户已被删除
板凳
 楼主| 发表于 2015-1-25 11:51:29 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
海妖 该用户已被删除
地板
发表于 2015-2-2 22:02:59 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
只想知道 该用户已被删除
5#
发表于 2015-2-8 12:25:00 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
灵魂腐蚀 该用户已被删除
6#
发表于 2015-2-25 15:26:31 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
活着的死人 该用户已被删除
7#
发表于 2015-3-8 00:31:32 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
小妖女 该用户已被删除
8#
发表于 2015-3-15 19:32:06 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
小魔女 该用户已被删除
9#
发表于 2015-3-22 04:06:52 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-16 16:06

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表