從畢業到現在也工作了一年多了，在這一年多里面，我感覺我是很幸運的，有和諧的團隊氛圍、哲學的leader和開放的環境。在這樣的環境中，我的成長不僅僅局限于技術棧的積累，更重要的是收獲了一個清晰的發展方向，讓自己在前端的道路上看的更遠，更清晰。這里主要分享下我在成長道路上一點收獲和想法，主要講述了一些前端領域需要注意的地方，希望可以帶給新人一些啟發，讓他們在前端的道路上走的順暢點。
一、可用
有多少人是和我一樣，因為簡單的幾行HTML+CSS，花費極短的時間就可以看到一個酷炫的頁面而愛上前端的？正因為在大學期間有幸接觸到html讓我愛上了前端的及時性，遠遠比枯燥的C/C++/Java有趣多了，動動手指就可以看到效果，難道不是一件讓人很興奮的事情嗎？
言歸正傳，初入前端，自以為能寫幾行html+css構建一個頁面就是已經很有成就感了，在加上JS/JQ做點動效就天下我有的感覺。在這個階段我們想的很簡單，這段代碼能用就行。
我們看到寫出來代碼能夠在瀏覽器上跑起來，這已經是成功了。這個階段我們不奢求什么，也沒有想多復雜，只要能看到效果就是成功了。
此階段，擁有舍我其誰的傲氣，覺得自己無所不能（說笑哈）。
下面隨便寫個例子，看看你們能分析出什么問題來(隨便寫的代碼，不確保可運行哈！)。
<style>
.wrapper{
width: 1024px;
height: 60px;
margin: 0 auto;
padding: 10px;
}
.item-singular{
width: 200px;
float: left;
height: 40px;
padding: 5px 0;
background: #eeeeee;
}
.item-singular{
width: 200px;
float: left;
height: 40px;
padding: 5px 0;
background: #dddddd;
}
</style>
<div class="wrapper">
<div class="nav">
<ul>
<li class="item-singular">
<span>第一行</span>
</li>
<li class="item-plural">
<span>第二行</span>
</li>
<li class="item-singular">
<span>第三行</span>
</li>
<li class="item-plural">
<span>第三行</span>
</li>
</ul>
</div>
</div>
<script>
$("item-singular").on("click", function(){
$("item-plural").css("color", "#82c2fc");
});
$("item-plural").on("click", function(){
$("item-singular").css("color", "#e78170");
});
</script>
好好看看哦，據說可圈可點的問題很多哈，下面會有解釋的。
二、 優雅
經歷過一段前端生涯后，回頭看看自己寫的代碼，你會發現真的是不堪入目，暗自恥笑自己當初坐井觀天（我當初還在想其他人看到我這么糟糕的代碼會怎么吐槽我）！
這個時候，你會開始思考如何寫一段優雅代碼，一段不會讓自己都覺得惡心的代碼。這個階段其實很重要，因為這可能會決定你很久一段時間的代碼風格。
為什么這么說呢，因為這是第一次思考該如何寫一段優雅的代碼，也許你會在網上找教程或者review大神的代碼，一旦這些決定了你的思想，這就會跟隨你很長一段時間，甚至一輩子！
所以，在這個時候你應該慎重思考并總結。最好能找一個有經驗的前輩來review你的代碼，讓他給提點意見。
何為優雅的代碼，這是仁者見，仁智者見智了，但我覺得基本的要求應該是簡單有效、邏輯清晰、可維護。
何為優雅，我給不了你答案，但我可以分享下自己的做法：
理解需求：你需要清除的明白這個需求要求有什么效果、實現什么功能、解決什么問題。
這時候最忌諱的是拿到需求，簡單了解了一下就開發敲代碼的壞習慣，因為很多問題都是從此開始的。思考邏輯：最好可以在草紙上畫出整個需求的流程圖，明確到每一個操作的步驟，每一個分支。
技術選型（可行性分析）：明確用戶定位，選擇相應的技術方案。最簡單的例子就是你的用戶用的是什么瀏覽器，你需要兼容到IE幾。深層次來講就是分析哪種前端技術適合這個項目，既能保證項目質量和性能，又能提高開發效率。
愉快的搬磚…………
你要相信，這一切都不會浪費的時間，反而可以大大提高你的開發效率，同時保證項目質量。
三、 性能
在你能編寫一手優雅的代碼之后，你就必須關注性能方面了。如何提高性能是區別技術水平的一個重要指標。
也許你會想性能怎么體現，現在的瀏覽器那么高級，哪里會有什么性能瓶頸。如果你這樣想就是你還沒有意識到性能的重要性。
性能是微妙的，不易察覺，但是卻實實在在存在的。性能的差異在平時可能看不出來，但是在達到某一個臨界點，就會很明顯的體現出來，甚至會讓你的項目崩潰。讓我們來看一個小小的例子：
var testArr = [1,2,3,4,5,6,7,8,9,10];
for(var idx = 0; idx < testArr.length; idx++){
// TODO
}
for(var idx = 0, length = testArr.length; idx < length; idx++){
// TODO
}
這是一段很簡單的循環代碼，他們實現的功能一樣，但是他們性能卻有差異。第一個循環，每次做判斷的時候都會去計算testArr的長度，而第二個循環卻把testArr的長度賦值給了length，所以只需要計算一次就可以。
其實想要提高性能，并沒有多大的門檻，很多小的細節都可以優化性能，這些都需要大家平時去積累去探索，久而久之，你會發現自己并不需要刻意去優化什么，但是寫出來的代碼性能卻比別人要好。
說了這么多屁話，其實也就是想提醒大家有空可以關注下性能方面的知識，這對成長和發展有很大的幫助。
性能可大可小，小到代碼的優化，大到架構的調整，但是無論大小，都必須從基礎做起，如果你連隨手可以拿來優化代碼的小技巧都不愿當成習慣，那還拿什么來談性能。
用戶體驗
用戶體驗這已經不是關系代碼層面了，而是在一個思想領域的提升。這種思想應該從一而終的貫徹到我們的生涯中，必須時刻在我們的開發中體現。
用戶體驗是前端開發開發者必須承擔的職責，我們是最接近用戶的開發者，用戶體驗的細節最直接的是從我們這里體現。所以這就要求我們必須站在用戶角度的思考問題，在工作中，我們不能夠拿到需求就直接進行開發，而是需要對用戶體驗進行深入思考，如果存在交互或者設計問題我們應該及時提出，向設計和產品反饋。
用戶體驗是什么？
用戶體驗（User Experience，簡稱UE/UX）是一種純主觀在用戶使用產品過程中建立起來的感受。但是對于一個界定明確的用戶群體來講，其用戶體驗的共性是能夠經由良好設計實驗來認識到。計算機技術和互聯網的發展，使技術創新形態正在發生轉變，以用戶為中心、以人為本越來越得到重視，用戶體驗也因此被稱做創新2.0模式的精髓。
簡單的例子來說，用戶在視覺和交互式直接影響著用戶的體驗，界面的顏色、操作流程、響應速度、學習成本等等都屬于用戶體驗的一部分。
用戶體驗是一種妙不可言的，不像視覺，架構，交互那樣是可以事先假設和設計，一百個人就有一百種用戶體驗，我們能做的就是根據用戶操作習慣和反饋進行模擬優化，做出最能讓用戶感到滿意的產品。
如何打造用戶體驗？
用戶體驗主要體現在五個層次：
- 戰略層——目標、群體、需求
- 范圍層——功能和內容，我們想要什么和用戶需要什么
- 結構層——交互信息與信息架構，如何將產品的功能連接成一個完整的產品
- 框架層——主要體現在視覺、界面設計等方面，如何讓用戶感到愉悅
- 表現層——最接近用戶的體驗，確保設計、交互、信息等展示給用戶
有需要了解用戶體驗的可以前往這里了解漫談用戶體驗五要素
具體實施有已下幾個要點：
- 有用——確保該功能是對用戶有用，如果一個功能在用戶群體中只用5%的人會使用，那么這個功能是否可以隱藏或者削減；
- 易用——這關系到交互流程，用最少的流程，最小的學習成本去設計交互。
- 友好——從視覺和文案讓用戶感到愉悅，比如一個很常見的菊花（loading）就可以讓用戶感覺等待時間的減少，還有最近很多產品都在做的情感化體驗。
- 視覺——視覺是用戶第一時間能感受到，視覺方面不僅僅需要美感，還需要起到引導作用。
- 品牌——iPhone就是一個奇跡般的品牌設計，用戶對品牌的認可會增進用戶對產品的認可和增加用戶的體驗好感。
那么，作為前端我們能做什么？上面說的不應該都是產品和設計師去考慮的嗎？不，這些同樣也是我們的職責，我們作為最接近的用戶的群體，我們應該比設計和產品擁有更多用戶體驗思維。
產品也許不熟知技術，可能在思考的功能的時候并不能把握功能易用性，設計注重的設計美學，在完成設計稿的時候可以忽略了交互的一致性，而我們作為最熟悉產品的人，難道我們不應該在這些方面提出我們的建議。
舉個栗子：
1、產品說要增加一個查詢功能，要非常詳細，一行顯示；
2、后端拿到需求，需要查找N個數據庫，N格表，平均耗時5秒才能返回數據
3、設計按照產品的需求，弄了一個設計稿，一行需要展示20個字段信息；
最終到我們手里了，怎么辦？我們是直接按照需求將這個功能開發出來嗎？我想任何有經驗的前端開發者都不會立即按照這些進行開發。
我們需要思考，一行顯示那么數據，布局應該如何劃分，小屏該如何展示，是否可以將一些不必要的信息隱藏，怎么樣才能降低用戶的等待時間…………
我們思考過后，最終方案可能就是：
1、后端只需返回必要信息，盡量減少查詢時間；
2、一行顯示合適的數據量；
3、點擊詳細情況再進行異步獲取數據；
前端是貫穿整個產品的關鍵點，我們是最能發現問題的群體，所以這些都是需要我們去推動，只要有不合理的地方我們都應該提出質疑，去向產品、技術、設計去反饋，去推動用戶體驗的改善，而不是僅僅關心我們代碼。
前端開發者需要把控的用戶體驗細節應該體現在方方面面，無論是字號、顏色、行距、交互等等都需要進行思考這些設計是否有利于提升用戶體驗。
推薦大家讀一篇文章一個頁面重構工程師眼中的“用戶體驗”，里面講述了大部分前端必須關注的用戶體驗細節。
吐槽一下
之前我在一家快遞公司的公眾號進行了投訴，我能感覺到他們的交互設計師一定是一個“大牛”，一個交互至少可以“減少”70%的投訴率。他們是這樣做的，當你進入投訴頁面，輸入完投訴內容點擊確定按鈕，它會彈窗讓你確定是否輸入完成（藍色確定按鈕在右邊），確定后彈出是否確定投訴（藍色確定按鈕在右邊），最后彈出一個是否提交投訴內容，關鍵點來了，藍色的按鈕竟然是取消按鈕，確定按鈕是灰色的放在了左邊。根據用戶的操作的慣性，70%的用戶都會直接點擊取消！
這家快遞公司的交互真是用心良苦，完全顛覆了交互設計的理念。
后記
這篇文章講了那么多的廢話，卻沒有將一些實質性的內容，因為寫那么多廢話只是想讓初入前端的新人在這方面有一些意識。引導一些新人能多關注下代碼的其他方面，幫助他們在前端的道路走得更加順暢一些。
代碼解讀
回到最開始舉例的那個代碼，我給大家解說下在我眼中的不足：
<style>
.wrapper{
width: 1024px;
height: 60px;
margin: 0 auto;
padding: 10px;
}
.item-singular{
width: 200px;
float: left;
height: 40px;
padding: 5px 0;
background: #eeeeee;
}
.item-plural{
width: 200px;
float: left;
height: 40px;
padding: 5px 0;
background: #dddddd;
}
</style>
<!--
樣式問題：
1、沒有抽離公共樣式，item-singular， item-plural可以將公共樣式抽離到一個item，增加可維護性；
2、樣式書寫順序不規范，導致重排，降低了渲染性能;
3、使用浮動后沒有清除浮動
4、css命名不規范
書寫順序參考：
1.位置屬性(position, top, right, z-index, display, float，padding, margin等)
2.大小(width, height)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
-->
<div class="wrapper">
<div class="nav">
<ul>
<li class="item-singular">
<a href="javascripy:;">第一行</a>
</li>
<li class="item-plural">
<a href="javascripy:;">第二行</a>
</li>
<li class="item-singular">
<a href="javascripy:;">第三行</a>
</li>
<li class="item-plural">
<a href="javascripy:;">第三行</a>
</li>
</ul>
</div>
</div>
<!--
html問題的主要問題是層級過深，考慮渲染應該減少不必要的dom節點。其次是語義化不明確。可以按照如下優化：
<nav class="nav">
<a href="javcascript:;" class="nav__item nav__item--singular" title="額外說明">第一行</a>
<a href="javcascript:;" class="nav__item nav__item--plural" title="額外說明">第二行</a>
<a href="javcascript:;" class="nav__item nav__item--singular" title="額外說明">第三行</a>
<a href="javcascript:;" class="nav__item nav__item--plural" title="額外說明">第四行</a>
</nav>
其實最好還是需要加上無障礙標簽，提高頁面可讀性
-->
<script>
$("item-singular").on("click", function(){
$("item-plural").css("color", "#82c2fc");
});
$("item-plural").on("click", function(){
$("item-singular").css("color", "#e78170");
});
</script>
<!--
script問題在與沒有緩存；所有使用次數在兩次或以上的元素都應該用變量將查找結果保存起來，這樣可以避免重復進行查找；
其次，在js中才做樣式，應該使用addClass/removeClass進行操作，而不是直接操作css，不利于可維護性
-->
也許我發現的問題也不是很多，但是可以看出，就這簡簡單單的幾句代碼也是擁有很大的優化空間，一入前端深似海，我們都需要好好努力啊！
參考資料
轉載自瘋子的博客
