梦想在此刻启航,前端工程师

微前端x重构实践落地总结 4000+字全面总结微前端在重构的落地实践 阅读详情

来源:腾讯TGideas – smallni

用这个标题,是因为前一段时间组里有一个开放式讨论:怎样才算一个好重构?
其实,”好”与”坏”向来都是相对的,因为每个人眼中看待”好”与”坏”的标准不一样,不如从自身的角度考虑一下:如何做一个好重构?

先来看一个平时我们遇到的最多的两栏布局:
如何做一个优秀的前端重构工程师

基本的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推出时国内也有推广活动,可以了解这些新版本浏览器的特性以及对css3\html5的支持性如何。

更多的承担和分享

在平时更多的去承担一些额外的工作,譬如在重构团队的协作规范、编码规范上提出自己的一些合理化建议,输出一些利于其他同事更快、更高效提升的文档。平时在自己工作遇到了一些好的工作方法或者对一些新技术的研究可以拿出来和大家分享。重构的团队氛围很重要,谁都不希望呆在一个整天只管自己写代码的团队,那样不管对于个人还是团队都是不利的。

更多的思考与总结

思考指的是”意识流”,具体是我们在重构过程中的想法和理念,怎么想决定了我们怎么做。
作为重构,很多人拿到设计稿之后就是开始埋头切图,用各种”奇技淫巧”实现各种需求,我们甚至不会在拿到设计稿之后仔细的做一下分析:如何做一个合理的架构、如何抽取合适的模块、如何用更优雅的方式和轻量的代码实现页面中的需求。
也许是目前大的环境下在催促着我们不断的向前跑:各种前端论坛大多数都在讲某个技术,纠结于某一技术细节的实现,讲烂掉的性能优化,可很少有人去讲该如何合理的选择一个前端解决方案,如何解决重构中遇到的一系列不同场景中的问题,以及最重要的我们自己的职业生涯思考:我们是准备写一辈子代码么?
总结也叫”review”,是复习、回顾的意思,review对于重构来讲,显得尤为重要,定期的项目回顾能够发现项目中存在的问题从而规避以后再次出现。
当然项目回顾是一方面,更重要的是代码层面的review,不定期的review可以促使我们在一些代码的细节把控方面做的更优雅,review除了可以提高代码的品质外,还能加强团队的协作精神,以及提高团队的整体技术能力。显然这是一件非常有意义的事。团队成员可以在一起review大家的代码,发现每个人身上的不足和亮点,不然我们真的是只管埋头自己代码的苦逼代码仔了。

从生活角度:
保持阅读的热情

如何做一个优秀的前端重构工程师

网络的信息是碎片化的,在我们没有很好的梳理碎片能力的时候,一本实物书籍对于慰藉我们的心灵显得尤为重要。有时生活、工作会让人压的喘不过气来,这时,我们需要去寻找一种方式去释放压力,嗯,阅读是一种很好的方式。

坚持一项运动爱好

如何做一个优秀的前端重构工程师

平时工作太忙时,切记一定要改变自己的工作方法,梳理好需求的优先级,预留出一定的时间来放松自己,这个放松一定要让自己的筋骨活动开,可以是去打打羽毛球,或者去跑步,再或者去健身。只有让自己的身体变得强大起来,才有更多的能量值去砍怪升级。

保持乐观的生活态度

如何做一个优秀的前端重构工程师

善于捕捉生活中的一些细小的幸福颗粒,我们就会经常活在快乐中。上次在腾讯健康加油站听了一次关于生活的分享,其中提到”生活就像炖鸡汤,有时需要加点调料和沾料”,的确,这些沾料就是发现生活中的细小幸福,做一个乐观、豁达、开朗的前端人士。调节好工作和生活的平衡,让自己不要再活的那么累。

————————————-

嗯,做个好重构真的挺不容易的,无论是从专业角度还是从生活角度,缺一不可,保持一个乐观、热情、积极的心,不断学习,让自己活得简单、快乐,此足矣。

其实,你不仅是在重构代码,也是在重构人生!

前端_页面重构注意事项 页面重构要注意一下几点: 不滥用id,尽量用class代替id。CSS选择器最好控制在2-3个以内,不要使用内联样式,转移到样式表中。根据上下结构命名id和class,而不是设计元素,避免html结构模糊化,尝试重网页中分离出设计元素,还可以减少代码的冗余。避免css冗余和重复,能通用的写在一起。写 css 的时候心中对 html 层级结构要有个大致的规划,思考不同的设计元素之间的层级和关系 阅读详情

相关推荐

基于AI的大前端代码智能重构策略与实践

AI驱动的大前端代码重构通过智能分析与自动化操作,显著提升了重构效率与质量。从冗余节点优化到组件化架构设计,AI工具在性能优化、耦合度降低、代码复用等方面展现出强大能力。在实际应用中,建议结合项目特点选择合适的AI工具(如DeepCode、CodeGeeX),并配合版本控制与自动化测试,确保重构过程安全可控。关键词:#前端开发 #代码重构 #AI工具 #小程序优化 #ReactNative #Vue组件化。

物物而不物于物,念念而不念于念 1215

一个优秀的前端重构工程师

用这个标题,是因为前一段时间组里有一个开放式讨论:怎样才算一个好重构? 其实,"好"与"坏"向来都是相对的,因为每个人眼中看待"好"与"坏"的标准不一样,不如从自身的角度考虑一下:如何做一个好重构? 先来看一个平时我们遇到的最多的两栏布局:   基本的html代码: 来看具体的CSS代码实现(忽略margin): 很明显在保持同样html结构的情况下

Capricornlg的专栏 1022

避坑指南:英飞凌TC3XX的MCMCAN初始化常见错误及解决方法

本文针对英飞凌TC3XX系列MCU的MCMCAN模块初始化难题,深入剖析了寄存器配置时序、总线监控模式误用、中断映射错误及Message RAM地址冲突四大常见陷阱。通过实战代码示例和诊断流程,提供了清晰的避坑指南和解决方案,帮助嵌入式开发者高效解决CAN FD通信故障,确保汽车电子与工业控制项目的稳定运行。

weixin_29193259的博客 246

【前端】重构方案了解一下

前端重构方案 前言 前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希望路过的大牛小牛不领赐教,能给我略微指点下重构相关的点,在下感激不尽~ 一、原项目梳理 首先对原来项目做一个大概的梳...

weixin_34318956的博客 1204

HAL库移植实战:解决‘HAL_StatusTypeDef‘未定义报错的3个关键步骤

本文针对STM32开发中从标准库向HAL库移植时常见的'HAL_StatusTypeDef'未定义报错,提供了三个关键解决步骤:首先确保正确包含头文件入口,其次检查并配置模块使能宏,最后注意避免与标准库的同名结构体混用。文章通过实战案例解析了HAL库的模块化设计理念,帮助开发者高效解决混合编程中的编译问题。

book8的博客 207

CNC数控机床数据采集,CNC数据采集 设备联网 车间数字化

cnc数据采集 cnc机床数据采集 免受权采集 设备联网

weixin_38175277的博客 2772

前端项目重构的深度思考和复盘

hi, 大家好, 我是徐小夕, 今天和大家分享一下前端项目重构的一些思考和复盘, 同时也是对自己多年项目研发经验的一个总结.一. 背景介绍1. 我们为什么要做项目重构项目重构是每一家稳定发展的互联企业的必经之路, 就像一个产品的诞生, 会经历产品试错和产品迭代 一样, 随着业务或新技术的不断发展, 已有架构已无法满足更多业务扩展的需求, 所以只有通过重构来让产品“进化”, 才能跟上飞速发展的时代浪...

趣谈前端 788

Python 上位机开发

首先,什么是上位机?上位机通常是指可以与下位机(如单片机、传感器等硬件设备)进行通信和交互,实现数据采集、控制指令发送以及数据处理和展示的计算机程序。 Python 作为一种高级编程语言,在开发上位机方面具有诸多优势。它拥有丰富的第三方库,使得开发过程变得相对简单和高效。

weixin_46807151的博客 4303

web前端项目重构的理解

重构是指在不改变外部行为的前提下,对代码、结构、布局或者设计进行优化和改进的过程。在前端开发中,重构通常指对网站或应用程序的前端部分进行优化和改造,以提升性能、可维护性和用户体验。将使用表格布局的页面改为使用DIV+CSS布局,使页面结构更加语义化、清晰,并提高页面的可读性和维护性。将网站的前端代码和样式进行调整,使其能够兼容现代浏览器,并修复一些在旧版浏览器中存在的兼容性问题,提升用户体验和页面的可访问性。

我的博客简介 1634

Open3D:读写点云与可视化(C++)

迭代 //Open3D #include "Open3D/Open3D.h" //Eigen #include "Eigen/Dense" void testOpen3D::xjGetInformation(const QString &pcPath) { /* read PC */ auto cloud_ptr = std::make_shared<open3d::geometry::PointCloud>(); if (!open3d::io::ReadPointCl

累了就要打游戏 1万+

STM32标准库下载保姆级教程:2024最新官网免注册直接下载方法

本文提供2024年最新STM32标准库免注册下载方法,包括直接下载链接、GitHub镜像仓库和开发工具内置库三种途径。详细介绍了标准外设库的优势、配置步骤及常见问题解决方案,帮助开发者快速获取并应用这一重要开发资源。

weixin_29163581的博客 367

前端【技术方案】重构项目

更多性能优化方案见。

朝阳39的博客 2027

Shader Graph入门

Shader Graph 简介

zaizai1007的博客 1万+

前端重构方案,从零基础到精通,收藏这篇就够了!

代码重构是一个产品发展到一定阶段不得不面对的事情,大到整个产品重构,又或者是一个页面、一个组件的重构。我们都要思考重构背后的起因是什么,并分析重构所带来的效益和成本。本次规划主要是针对于探针重构,项目最终确定为底层重构。在项目重构中,可以很好的梳理现有项目存在的设计问题和历史遗留问题,在规划架构和规划具体页面时,可拉拢相关人员,提出一些交互优化。需要考虑当前代码设计和交互设计是否具有未来需求的可扩展性,比如支持主题变更,国际化?

Javachichi的博客 1132

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

前端项目代码重构的实用技巧与经验分享

前端 JS 代码重构是提高代码质量和性能的重要手段。通过提炼函数、合并重复代码、合理使用条件分支和循环等技巧,可以使代码更加简洁、易读、可维护。在进行代码重构时,要遵循先易后难、持续测试的原则,确保重构后的代码功能正确。

jian22446688的博客 1606

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

# 什么是前端重构?

前端是做什么的 说到前端,我们往往会随口蹦出一个后端,没错,如果单纯从计算机工程的角度来看待前端所做的工作,就是前端是后端的门面,用个形象的例子来比喻前后端,我们平常使用的手机是前端,而背后的手机系统是后端。而从我们用户使用的角度来看,前端负责与用户做交互,将用户的行为转化为计算机后台程序可以处理的行为。了解了这些,你可能就会明白,前端所做的本职工作就是程序与用户打交道的艺术,而如何做到更好更有...

RhymeChiang 5764

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

怎么进行前端代码重构

有如下一个函数代码片段:上面函数缺点是难以维护,是容易产生bug,会引起破窗效应。破窗效应指的是如果代码中存在一些破窗(即低质量、不规范的代码),开发者可能会更容易容忍或者产生更多的低质量代码。这里的重构方法是每个函数的长度建议不要超过80行,如果超过就需要优化,怎么优化这种大函数呢?

langchao12的博客 449

前端重构和优化的思考

前端工程化 如何进行高效的多人协作? 如何保证项目的可维护性? 如何提高项目的开发质量? 如何降低项目生产的风险? * 为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间* 模块化、组件化、规范化、自动化 为什么要重构 原来的项目漏洞(bug)太多,或者稳定性太差,当前的框架很难彻底根治。 新的项目需求,原有的程序框架已经无法满足。 测试 如果原来的代码没有单元测试、集成测试,有条件的话一定要补充上。为什么测试如此重

wangshang1320的博客 805

前端页面重构技巧总结TIP

本文均为项目实战经验,要求兼容至IE8,所以以下内容均为兼容代码,欢迎各位小伙伴批评指教。其实重构页面是一门学问,看似简单,却暗藏很多学问。实际项目中页面的重构有以下几点最基本需求: 需要使用合理的标签进行语义化; 可扩展性,在页面的某个标签内增加新的内容(文字或标签),不会对原有内容造成影响。 当页面接受后台数据时,标签内容替换后,页面布局与样式不会受到影响。 兼容性(根据项目需...

极客神殿 1022

2022 年最新前端 Vue 项目重构总结

点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群本文主要内容对于老旧的项目,升级webpack的时我的操作步骤。基于项目的产品定位和业务发展走势,在重构时我可以从哪...

我本可以容忍阳光,如果我不曾见过太阳,然而阳光已使我荒凉,成为更新的荒凉。 1190

前端页面重构

【上一话】记一次部署问题。(服务启动慢,随机数产生问题)_清风半夜鸣蛙-优快云博客服务器:1、 如果说你三个服务所连接的数据库,redis,等等都不一样,那么就是单服务器的多应用部署,可能你是根据配置文件来区分成三个服务,对外的服务就是三个,总的就是三个完全不同的服务,只不过能力是一样的。 2、 如果说三个服务连接的都是同一个数据库,作为一个集群部署的话,对外的服务就一个。 3、当前项目部署三个服务,来对外提供能力。 端口分别是28080、28180、28280。 ...https://junking.b

清风半夜鸣蛙 2202

javascript代码重构之:写好函数

1、函数要短小,一个函数只做一件事 如果函数做了较多的事情,它就难以组合、测试和推测。同时让函数只做一件事情的时候,它们就很容易重构。 // Bad function showStudent(ssn){ const student = db. get (ssn); if (student !== null ){ document.querySelector( `#${elementId}` ).innerHTML = `${student.ssn}, ${stu

山山而川~ 1489
上一篇: js错误集
下一篇: js过滤(去除)富文本编辑器中的html标签和换行回车等标记的正则表达式
code旅行者
博客等级 码龄15年 22粉丝 107原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值