前端工程师应该具备的三种思维

r囧r小猫 2022-08-08 00:48 227阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:698px; color:rgb(0,0,0); font-family:微软雅黑,Tahoma,Helvetica,SimSun,sans-serif; font-size:14px; line-height:25.200000762939453px"> 
 <tbody style="word-wrap:break-word"> 
  <tr style="word-wrap:break-word"> 
   <td style="word-wrap:break-word"> 
    <div style="word-wrap:break-word"> 
     <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; text-align:center"> <a href="http://www.html5cn.org/data/attachment/portal/201409/11/152936e29rel5xs5regrz5.png" style="word-wrap:break-word; color:rgb(51,51,51); text-decoration:none" rel="nofollow"><span style="font-size:14px; word-wrap:break-word"><img src="http://www.html5cn.org/data/attachment/portal/201409/11/152936e29rel5xs5regrz5.png" alt="" style="word-wrap:break-word; border:none; max-width:620px"></span></a></p> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word">&nbsp; &nbsp; &nbsp; &nbsp;如果你是一个天才工程师（马上可以离开），可以独立完成一个很多事情，你可以是一个怪咖，因为我相信没有一个人不会不佩服你。但现实归现实，多数人都不是天才，而我们在职场上也不是单打独斗，我们需要团队合作，需要协调和配合，需要考虑除了代码以外的更多事情。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>前端工程师，也不仅仅只是负责接资料，捞数据，做个回应。当然只做这些也并没有不对，但我们需要和后端工程师沟通，我们也需要和设计沟通，也需要和 PM 沟通，怎么做才是对这三方都比较有好处？</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">逻辑思维</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>在开始写某一段代码的时候，想一下它会用在哪里，会重复用吗？ 它以后会不会变，如果会变，那可以怎样变？一般网页结构的变化，虽然有很多但是也有一个根据，这个根据就是可以预先估计好的。没有一个案子，是不会「不改」的，很多时候你都是要一边做一边改，甚至可能会来个乾坤大挪移。当真的需要发生变动和修改的时候，你有什么对策？这些都是需要想好，并且建立在一个逻辑上。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>通常专业的设计师，设计一个网页的元素都是同质性很高，等比或对比的，所以代码按理也是可以重复用的。所以为何你要学会用 CSS preprocessor (Sass,stylus,less)，写一个 Mixin 或一个变量，一开始用你会觉得很麻烦，但是用了你就回不去了，不但提高你的效率还提高了你的准确率。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>工程师的世界就如武林，大家都各自修炼，每天都有新的祕籍，大家都很好奇跑去修炼一下，希望有天成为武林高手。这也是提升你见识和专业的潜动力，如果你没有好奇心，看的和懂得东西太少，逻辑自然不会跟上时代。要保持不断的<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=13" style="word-wrap:break-word; color:rgb(68,68,68)!important; text-decoration:none!important; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">学习</a>，来磨练自己的逻辑思维。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>逻辑思维某程度，就是你的程序专业能力，除了能写出来还要可维护，可阅读。当事情建立在一个很好的逻辑上，那么出错几率就会比较低，和你工作的人也会比较愉快。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>可以把一件事做的很好，那是师傅；可以把一件事做好和预测未来的事，那才是专家。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">商业思维</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>PM、老板或者客户，都会问你，「你需要多少时间」，如果说的太短，可能会做不完；如果说的太长，也不可能，这是一个怎么回答怎么死的问题。有时候，需要换一个立场，站在第三方的角度思考。我们的完成度，和他们的完成度可能是不一样的。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>我们把案子的细节分成两种情况，一种是你已经有经验，可以预估时间的；一种是你没有做过或你很陌生的，你没有时间估计的基础。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>那么提出一个，他们可以最低接受的标准，例如一个 App 网站，最低标准需要一个首页，和一个链接去下载 app 的 2 个按钮，这些都是可以预估的。而剩下的，你需要 Research 一下，之后再给一个比较有根据的时间。估计一个案子需要多少时间做完，是非常非常的重要，因为你消耗的是一组人的时间，不是你自己的（除非你自己一个人做，或者你是老板）。如果你估算错了，后面就会延期，做不出来没有很大的关系，最重要是把问题解决，提出你的解决方法，什么样的方法才可以达到解决问题的目的。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>换一个立场提出解决方案，对事情是有帮助的，对公司或客户是有帮助的，客户不会在乎你解决不了手机网页看不到 20 个栏位的 table 那个问题，但是客户很乐意听你说，这样的 Table 不好看，可以换一个显示的方法。客户也不太在意你是用 Rails 还是 php（有些是很在意，他们假装他们懂），可以购物和发文就好。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>前端工程师可能很容易接触到客户的投诉，所以有些东西没有想好，就会很麻烦。做个网站，换作你是网友或客户，你会满意你自己做的网站吗？</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">设计思维</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>很多时候，前端工程师本身也是设计师，但是也有很多是本身是前端工程师也是后端工程师，设计和前端是分割不开的。当然我这里说的设计，不是真的要你弄一个画面或完整的设计图。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word">It’s not just what it looks like and feels like. Design is how it works. —Steve Jobs</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>前端的设计是指一个画面或元素，如何被执行和创造，移动或消除，这个设计在不同的宽度和高度，不同的装置看，效果是怎样，考虑进去就是你的设计思维，怎么把设计师的画面弄成一个活生生的网页，要用设计师的角度去思考，才能有办法把设计图的概念充分的表达出来。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>话说早前，收到一个「设计图」，上面有一个「X」，我问客户这是什么，他说是「回上一页」，为何回上一页是「X」，这不是一个 popup 也不是一个 modal，同时这个图上还有很多不同颜色和大小的「X」，分别代表了「删除」、「关闭」、「滑下」，这是一个不太合理的设计。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>设计的思维，会直接影响你写的代码结构和网页结构，因为你看不出设计的重点在哪里，怎么写才可以达到设计师要求的效果，你没有办法好好的组织你的结构和元素，就无法好好把网页拼凑出来。这不但大大降低了你的效率，做出来的东西也不会一致。可能一个网站，就出现几种本该一样，结果「很像」但是不一样的按钮，因为你用了几个 class 和不同结构来做。你一开始就没有好好思考设计。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word">你可以做什么</span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="word-wrap:break-word"><span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span></span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>没事要练功，FB 逛几分钟就好，不需要留恋太久。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>做好一个网站，自己玩一下，给你朋友玩一下，问一下他们的意见？多问几个。</span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><br style="word-wrap:break-word"> </span> 
    </div> 
    <div style="word-wrap:break-word"> 
     <span style="font-size:14px; word-wrap:break-word"><span style="word-wrap:break-word; line-height:1.8em">&nbsp; &nbsp; &nbsp; &nbsp;</span>多看设计图，看思考一下你会怎么做。</span> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>