搜索
首页后端开发php教程前端工程师应该具备的三种思维_PHP

编者按:本文通过逻辑思维,商业思维,设计思维三种维度来匹配你是否一位合格的前端工程师。因为前端工程师不仅仅是负责接资料,捞数据,做个回应等这些杂事,他们应该更加需要去跟后端工程师、设计、PM进行沟通。所以,团队合作,协调配合等等都需要考虑代码以外更多的事情。


如果你是一个天才工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外的更多事情。

前端工程师,也不仅仅只是负责接资料,捞数据,做个回应。当然只做这些也并没有不对,但我们需要和后端工程师沟通,我们也需要和设计沟通,也需要和 PM 沟通,怎么做才是对这三方都比较有好处?

逻辑思维

在开始写某一段代码的时候,想一下它会用在哪里,会重复用吗? 它以后会不会变,如果会变,那可以怎样变?一般网页结构的变化,虽然有很多但是也有一个根据,这个根据就是可以预先估计好的。没有一个案子,是不会「不改」的,很多时候你都是要一边做一边改,甚至可能会来个乾坤大挪移。当真的需要发生变动和修改的时候,你有什么对策?这些都是需要想好,并且建立在一个逻辑上。

通常专业的设计师,设计一个网页的元素都是同质性很高,等比或对比的,所以代码按理也是可以重复用的。所以为何你要学会用 CSS preprocessor (Sass,stylus,less),写一个 Mixin 或一个变量,一开始用你会觉得很麻烦,但是用了你就回不去了,不但提高你的效率还提高了你的准确率。

工程师的世界就如武林,大家都各自修炼,每天都有新的祕籍,大家都很好奇跑去修炼一下,希望有天成为武林高手。这也是提升你见识和专业的潜动力,如果你没有好奇心,看的和懂得东西太少,逻辑自然不会跟上时代。要保持不断的学习,来磨练自己的逻辑思维。

逻辑思维某程度,就是你的程序专业能力,除了能写出来还要可维护,可阅读。当事情建立在一个很好的逻辑上,那么出错几率就会比较低,和你工作的人也会比较愉快。

可以把一件事做的很好,那是师傅;可以把一件事做好和预测未来的事,那才是专家。

商业思维

PM、老板或者客户,都会问你,「你需要多少时间」,如果说的太短,可能会做不完;如果说的太长,也不可能,这是一个怎么回答怎么死的问题。有时候,需要换一个立场,站在第三方的角度思考。我们的完成度,和他们的完成度可能是不一样的。

我们把案子的细节分成两种情况,一种是你已经有经验,可以预估时间的;一种是你没有做过或你很陌生的,你没有时间估计的基础。

那么提出一个,他们可以最低接受的标准,例如一个 App 网站,最低标准需要一个首页,和一个链接去下载 app 的 2 个按钮,这些都是可以预估的。而剩下的,你需要 Research 一下,之后再给一个比较有根据的时间。估计一个案子需要多少时间做完,是非常非常的重要,因为你消耗的是一组人的时间,不是你自己的(除非你自己一个人做,或者你是老板)。如果你估算错了,后面就会延期,做不出来没有很大的关系,最重要是把问题解决,提出你的解决方法,什么样的方法才可以达到解决问题的目的。

换一个立场提出解决方案,对事情是有帮助的,对公司或客户是有帮助的,客户不会在乎你解决不了手机网页看不到 20 个栏位的 table 那个问题,但是客户很乐意听你说,这样的 Table 不好看,可以换一个显示的方法。客户也不太在意你是用 Rails 还是 php(有些是很在意,他们假装他们懂),可以购物和发文就好。

前端工程师可能很容易接触到客户的投诉,所以有些东西没有想好,就会很麻烦。做个网站,换作你是网友或客户,你会满意你自己做的网站吗?

设计思维

很多时候,前端工程师本身也是设计师,但是也有很多是本身是前端工程师也是后端工程师,设计和前端是分割不开的。当然我这里说的设计,不是真的要你弄一个画面或完整的设计图。

It’s not just what it looks like and feels like. Design is how it works. —Steve Jobs

前端的设计是指一个画面或元素,如何被执行和创造,移动或消除,这个设计在不同的宽度和高度,不同的装置看,效果是怎样,考虑进去就是你的设计思维,怎么把设计师的画面弄成一个活生生的网页,要用设计师的角度去思考,才能有办法把设计图的概念充分的表达出来。

话说早前,收到一个「设计图」,上面有一个「X」,我问客户这是什么,他说是「回上一页」,为何回上一页是「X」,这不是一个 popup 也不是一个 modal,同时这个图上还有很多不同颜色和大小的「X」,分别代表了「删除」、「关闭」、「滑下」,这是一个不太合理的设计。

设计的思维,会直接影响你写的代码结构和网页结构,因为你看不出设计的重点在哪里,怎么写才可以达到设计师要求的效果,你没有办法好好的组织你的结构和元素,就无法好好把网页拼凑出来。这不但大大降低了你的效率,做出来的东西也不会一致。可能一个网站,就出现几种本该一样,结果「很像」但是不一样的按钮,因为你用了几个 class 和不同结构来做。你一开始就没有好好思考设计。

你可以做什么

  1. 没事要练功,FB 逛几分钟就好,不需要留恋太久。

  2. 做好一个网站,自己玩一下,给你朋友玩一下,问一下他们的意见?多问几个。

  3. 多看设计图,看思考一下你会怎么做。

本文出自:kimix 的博客

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
PHP行动:现实世界中的示例和应用程序PHP行动:现实世界中的示例和应用程序Apr 14, 2025 am 12:19 AM

PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务:用于购物车功能和支付处理。2)内容管理系统:用于动态内容生成和用户管理。3)API开发:用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践,PHP应用的效率和可维护性得以提升。

PHP:轻松创建交互式Web内容PHP:轻松创建交互式Web内容Apr 14, 2025 am 12:15 AM

PHP可以轻松创建互动网页内容。1)通过嵌入HTML动态生成内容,根据用户输入或数据库数据实时展示。2)处理表单提交并生成动态输出,确保使用htmlspecialchars防XSS。3)结合MySQL创建用户注册系统,使用password_hash和预处理语句增强安全性。掌握这些技巧将提升Web开发效率。

PHP和Python:比较两种流行的编程语言PHP和Python:比较两种流行的编程语言Apr 14, 2025 am 12:13 AM

PHP和Python各有优势,选择依据项目需求。1.PHP适合web开发,尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能,语法简洁,适合初学者。

PHP的持久相关性:它还活着吗?PHP的持久相关性:它还活着吗?Apr 14, 2025 am 12:12 AM

PHP仍然具有活力,其在现代编程领域中依然占据重要地位。1)PHP的简单易学和强大社区支持使其在Web开发中广泛应用;2)其灵活性和稳定性使其在处理Web表单、数据库操作和文件处理等方面表现出色;3)PHP不断进化和优化,适用于初学者和经验丰富的开发者。

PHP的当前状态:查看网络开发趋势PHP的当前状态:查看网络开发趋势Apr 13, 2025 am 12:20 AM

PHP在现代Web开发中仍然重要,尤其在内容管理和电子商务平台。1)PHP拥有丰富的生态系统和强大框架支持,如Laravel和Symfony。2)性能优化可通过OPcache和Nginx实现。3)PHP8.0引入JIT编译器,提升性能。4)云原生应用通过Docker和Kubernetes部署,提高灵活性和可扩展性。

PHP与其他语言:比较PHP与其他语言:比较Apr 13, 2025 am 12:19 AM

PHP适合web开发,特别是在快速开发和处理动态内容方面表现出色,但不擅长数据科学和企业级应用。与Python相比,PHP在web开发中更具优势,但在数据科学领域不如Python;与Java相比,PHP在企业级应用中表现较差,但在web开发中更灵活;与JavaScript相比,PHP在后端开发中更简洁,但在前端开发中不如JavaScript。

PHP与Python:核心功能PHP与Python:核心功能Apr 13, 2025 am 12:16 AM

PHP和Python各有优势,适合不同场景。1.PHP适用于web开发,提供内置web服务器和丰富函数库。2.Python适合数据科学和机器学习,语法简洁且有强大标准库。选择时应根据项目需求决定。

PHP:网络开发的关键语言PHP:网络开发的关键语言Apr 13, 2025 am 12:08 AM

PHP是一种广泛应用于服务器端的脚本语言,特别适合web开发。1.PHP可以嵌入HTML,处理HTTP请求和响应,支持多种数据库。2.PHP用于生成动态网页内容,处理表单数据,访问数据库等,具有强大的社区支持和开源资源。3.PHP是解释型语言,执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时,可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能