web前端開發(fā)工程是是一個很新的職業(yè)，在國內(nèi)乃至國際上真正開始受到重視的時間不超過五年。web前端開發(fā)，是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。隨著人們對用戶體驗的要求越來越高，前端開發(fā)的技術(shù)難度越來越大，web前端開發(fā)工程師這一職業(yè)終于從設(shè)計和制作不分的局面中獨立出來。

       早期的前端其實就是table布局，后來發(fā)展到所謂的div+css網(wǎng)站重構(gòu)，再到現(xiàn)在的讓人眼花繚亂的各種各樣的新技術(shù)，web前端技術(shù)發(fā)展是非常快速的，因此選擇了前端這個行業(yè)就意味著不停的學(xué)習(xí)吧。讓我們先看看張克軍繪制的前端知識體系結(jié)構(gòu)：

      前端開發(fā)的核心是HTML+CSS+JavaScript。本質(zhì)上他們構(gòu)成了一個MVC框架，即HTML作為信息模型（Model），css控制樣式（View），JavaScript負責(zé)調(diào)度數(shù)據(jù)和實現(xiàn)某種展現(xiàn)邏輯（Controller）。

      HTML

      1.標(biāo)簽的分類，

      2.標(biāo)簽表示一個元素

      3.按性質(zhì)分類：block-level 和 inline-level

      4.按語義分類：

            Headings:h1,h2,h3,h4,h5,h6

            paragraphs:p

            Text formatting:em,strong,sub,del,ins,small

            Lists:ul,li,ol,dl,dt,dd

            Tables:table,thead,tbody,tr,th,td

            Forms and input: form,input,select,textarea

            Others:div,span,a,img,<!---->

            HTML5:header,footer,article,section

       XHTML

       XHTML于2000年的1月26日成為W3C標(biāo)準(zhǔn)。W3C將XHTML定義為的HTML版本，XHTML將逐漸取代HTML。XHTML是通過把HTML和XML各自的長處加以結(jié)合形成的。XHTML語法規(guī)則如下：

      屬性名和標(biāo)簽名稱必須小寫

      屬性值必須加引號

      屬性不能簡寫

      用ID屬性代替name屬性

      XHTML元素必須被正確地嵌套

      XHTML元素必須被關(guān)閉

     標(biāo)簽語義化

     為表達語義而標(biāo)記文檔，而不是為了樣式，結(jié)構(gòu)良好的文檔可以向瀏覽器傳達盡可能多的語義，不論是瀏覽器位于掌上電腦還是時髦的桌面圖形瀏覽器。結(jié)構(gòu)良好的文檔都能向用戶傳達可視化的語義即使是在老的瀏覽器，或是在被用戶關(guān)閉了CSS的現(xiàn)代瀏覽器中。同時結(jié)構(gòu)良好的HTML代碼也有助于搜索引擎索引你的網(wǎng)站。

      不要使用table布局，table是用來表格顯示的。

      不要到處濫用div標(biāo)簽，div是用來分塊用的。

      不要使用樣式標(biāo)簽，如font，center，big，small，b，i，樣式可以用CSS來控制，b和i可以用strong和em來代替。

      不要使用換行標(biāo)簽<br />和空格來控制樣式，請用CSS。

      盡量不要使用內(nèi)聯(lián)CSS

      CSS

      1.css基礎(chǔ)知識

        層疊和繼承

        優(yōu)先級

        盒模型

        定位

        浮動

     2.css進階

        css sprite

        瀏覽器兼容性

        IE haslayout和block format content

        css frameworks 

        css3

        css性能優(yōu)化

        less and sass

        css sprite主要用于前端性能優(yōu)化的一種技術(shù)，原理是通過多張背景圖合成在一張圖片上從而減少http請求，加快載入速度。

        瀏覽器兼容性

        絕大部分情況下，我們需要考慮瀏覽器的兼容性，目前正在使用的瀏覽器版本非常多，IE6，IE7，IE8，IE9，IE10，Chrome，F(xiàn)irefox，Safari。

        IE haslayout和block format content

        IE haslayout是一個Internet explore for Windows的私有概念，他決定了一個元素如何顯示以及約束其包含的內(nèi)容、如何與其他元素交互和建立聯(lián)系、如何響應(yīng)和傳遞應(yīng)用程序事件、用戶事件等。而有些HTML元素則默認就有l(wèi)ayout。目前只有IE6和IE7有這個概念。BFC是W3C css2.1規(guī)范中的一個概念，他決定了元素如何應(yīng)對其內(nèi)容進行定位。以及與其他元素的關(guān)系和相互作用。這個其實和瀏覽器的兼容性有關(guān)，因為決大部分的兼容性問題都是他們引起的。參考：css BFC和IE haslayout介紹。

        css framework

        css框架是一系列css文件的集合體，包含了基本的元素重置，頁面排版、網(wǎng)格布局、表單樣式，通用規(guī)則等代碼塊，用于簡化web前端開發(fā)的工作，提高工作效率。目前常見框架有：

       960 grid system

       blueprint css

       bluetrip

       minimum page

       還是一個比較出名的和特殊的框架是Twitter的bootstrap，bootstrap是快速開發(fā)web應(yīng)用程序前端的工具包。它是一個css和HTML的集合，它使用了的瀏覽器技術(shù)，給你的web開發(fā)提供了時尚的版式，表單，buttons，表格，網(wǎng)格系統(tǒng)等等。它是基于less開發(fā)的，不支持IE6，在IE7和IE8里效果也不咋地。

       css3

       雖然css3還沒有正式成為標(biāo)準(zhǔn)，但是IE9+，Chrome，F(xiàn)irefox等現(xiàn)代瀏覽器都支持css3。css3提供了好多以前需要用JavaScript和切圖才能搞定的功能，目前主要功能更有：圓角、多背景、@font-face、動畫與漸變、漸變色、box陰影、RGBa-加入透明色、文字陰影。

       css性能優(yōu)化

       css代碼是控制頁面顯示樣式與效果的最直接“工具”  ，但是在性能調(diào)優(yōu)時他們通常會被web開發(fā)工程師所忽略，而事實上不規(guī)范的css會對頁面渲染的效率有嚴重影響，尤其是對于結(jié)構(gòu)復(fù)雜的web2.0頁面，這種影響更是不可磨滅的。所以，寫出規(guī)范的、高性能的css代碼會極大地提高應(yīng)用程序的效率。

       less and sass

       less和sass都是css預(yù)處理器，用來為css增加一些編輯的特性，無需考慮瀏覽器的兼容問題，例如你可以在css中使用變量、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧，可以讓你的css更加簡潔。適應(yīng)性更強，代碼更直觀等諸多好處。

        sass基于ruby開發(fā)，less既可以在客戶端運行，也可以借助node.js或者rhino在服務(wù)器端運行。

     話不多說，先上代碼：

     for(var j=0;j<10;J++){

         setTimeout(function(){console.log(j);},5000)

     }

     看到這三行代碼，你也許會不耐煩道：又要講閉包？要吐槽了好么？別急，讓我們先來思考一下，這段代碼在瀏覽器中的執(zhí)行結(jié)果是什么？

     <!-- more -->

     甲：順序打印0到9？

     乙：這題我見過，打印十個10！

     哪個答案正確？

     執(zhí)行結(jié)果顯示，瀏覽器打印出十個10，貌似乙對了，但是如果你足夠細心，你會發(fā)現(xiàn)幾個問題：為什么會循環(huán)打印十個10,而不是0到9？

     從結(jié)果來看，for循環(huán)執(zhí)行完跳出之后，才開始執(zhí)行setTimeout（所以j才等于10），為什么不是每次迭代都執(zhí)行一次setTimeout呢？

1、為什么會循環(huán)打印十個10？

      許多人習(xí)慣用第二個問題中的執(zhí)行結(jié)果來回答這個問題：“for循環(huán)執(zhí)行完畢跳出之后才開始執(zhí)行setTimeout，所以才打印了十個10”。這樣的答案，只能說是既應(yīng)付了自己，又應(yīng)付了別人。其實，要解答第一個問題，首先要解答第二個問題。

2、為什么不是每一次迭代都執(zhí)行一次setTimeout？

     大家都知道，JavaScript在ES6出現(xiàn)以前，是沒有塊狀作用域的，這就意味著，在for循環(huán)中用var定義的變量j，其實是屬于全局的，那其實整個全局作用域中只有一個j，每次for循環(huán)都是更新這個j。

       那么現(xiàn)在的關(guān)鍵問題在于，為什么整個for循環(huán)會先于setTimeout執(zhí)行，而不是我們正常理解的，一次迭代執(zhí)行一次。這就涉及到了JavaScript的核心特性：單線程。

       JavaScript設(shè)計的初衷，是瀏覽器用來與用戶進行交互和DOM操作的，這就決定了它必須是單線程的。設(shè)想JavaScript同時有兩個線程，一個線程在DOM節(jié)點內(nèi)添加內(nèi)容，一個線程刪除該節(jié)點，瀏覽器就會出現(xiàn)混亂。所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成為了這門語言的核心特征，將來也不會改變。

      單線程就意味著，所有任務(wù)需要排隊，前一個任務(wù)結(jié)束，才會執(zhí)行下一個任務(wù)，如果前一個任務(wù)耗時很長，后一個任務(wù)就不得不一直等著。

      為了優(yōu)化單線程的性能，JavaScript將任務(wù)分成兩種，一種是同步任務(wù)（synchronous），另一種是異步任務(wù)（asynchronous）。同步任務(wù)指的是，在主線程上排隊執(zhí)行的任務(wù)，只有前一個任務(wù)執(zhí)行完畢，才能執(zhí)行后一個任務(wù)；異步任務(wù)指的是，不進入主線程，而進入“任務(wù)隊列（task queue）”的任務(wù)，只用主線程中的同步任務(wù)執(zhí)行完畢，異步任務(wù)才會進入執(zhí)行隊列執(zhí)行。只要主線程空了，就會去讀取“任務(wù)隊列”，這就是JavaScript的運作機制。這個過程會不斷重復(fù)。

       而setTimeout就被JavaScript定義為異步任務(wù)。每次for循環(huán)的迭代，都將setTimeout中的回調(diào)函數(shù)加入任務(wù)隊列等待執(zhí)行。也就是說，只有同步任務(wù)中的for循環(huán)完全結(jié)束，主線程中才會去任務(wù)列表中找到尚未執(zhí)行的十個setTimeout（十次迭代）回調(diào)函數(shù)并順序執(zhí)行（先進先出）。而此時，j已經(jīng)經(jīng)過循環(huán)結(jié)束變成了10，所以此時主線程執(zhí)行的，是十個一模一樣的打印i的回調(diào)函數(shù)，即打印十個10,。至此完美回答了第一和第二個問題，文章開頭的代碼與下面的代碼其實是等價的：

       for(var i=0;i<10;i++){

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

            setTimeout(console.log(i),5000);

}

       小小的一個setTimeout，牽扯出了很多JavaScript的深層次問題，可見JavaScript還有許多地方是值得深入探究的。

阿里巴巴_BBC_UED 王萌：無論你是設(shè)計、用研還是產(chǎn)品，如何把復(fù)雜籠統(tǒng)的問題拆解成一個個小的、可執(zhí)行開展的問題，都是一項必不可少的能力，今天阿里這篇好文幫你迅速掌握起來！

引言：

在一秒鐘內(nèi)看到本質(zhì)的人和花半輩子也看不清一件事本質(zhì)的人，自然是不一樣人生。——電影《教父》 本文沒辦法幫你一秒鐘看清人/事，而且也不奢望能做到，但希望能和大家一起朝這個方向做些努力。

編者按：可能有敏銳的同學(xué)已經(jīng)意識到了，現(xiàn)在很多公司招人，職位都叫產(chǎn)品設(shè)計師，簡言之就是既要會界面設(shè)計，更要懂交互、產(chǎn)品等，這也給一心鉆研精美圖標(biāo)和酷炫動效的同學(xué)提個醒，未來UI設(shè)計師與交互的界限會越來越模糊，不想提前退休，可別光顧著折騰軟件，好好讀下今天這4個建議。

編者按：今天這篇推薦一下，聊的是用戶體驗中最讓人揪心的三個流程：授權(quán)征詢、注冊與加載等待。作者總結(jié)了不少實用的方法，能夠迅速地提高這三個方面的體驗，建議學(xué)習(xí) >>>

Lina：訪談是定性研究中最基礎(chǔ)的方法。相對于分析客觀數(shù)據(jù)的定量研究方法，不論是一對一的深度訪問還是一對多的座談會，都會產(chǎn)生研究人員與用戶的互動，而互動關(guān)系會極大影響到訪談的質(zhì)量和效果。

很多人認為訪談就是“問答”，研究人員按照研究目的設(shè)定一系列的問題，通過詢問用戶，獲得相應(yīng)的答案，看上去似乎比定量研究簡單許多。然而事實上并非如此。訪談是需要對用戶的態(tài)度及行為做研究分析，而出于每個人的自我防御心理，用戶很難將自己真實的想法告訴研究人員。如何獲得用戶真實的情感態(tài)度，是非常考驗每一位研究者研究技術(shù)的地方。下面就結(jié)合之前的項目經(jīng)歷，跟大家探討一下訪談技巧的問題。

互聯(lián)網(wǎng)時代的成功故事里，機遇和運氣是增添它們傳奇色彩的決定性因素。一個零售企業(yè)適逢互聯(lián)網(wǎng)萌芽，在90年代這個網(wǎng)絡(luò)拓荒期逐漸膨脹成為響徹北美的互聯(lián)網(wǎng)巨頭，這是亞馬遜的故事。而Facebook的開頭則更有意思一些，校園創(chuàng)業(yè)，友情與背叛，在移動端設(shè)備過度階段引領(lǐng)社交網(wǎng)絡(luò)變革，成就了另外一個走上互聯(lián)網(wǎng)時代的年輕富豪。

空狀態(tài)，或稱零數(shù)據(jù)狀態(tài)，很多時候不太招設(shè)計師的待見。我們基本都是在主要流程界面的設(shè)計工作完成之后才會回過頭來考慮完善一下，因為從表現(xiàn)上來看，空狀態(tài)給人的感覺就是臨時性的，有些微不足道。不要被空狀態(tài)的名字所迷惑，實際上，這個狀態(tài)在引導(dǎo)性、愉悅性和保留用戶等方面的潛質(zhì)對于產(chǎn)品體驗在細節(jié)當(dāng)中的成敗有著不可忽視的作用。

人機交互系統(tǒng)輸出信息是有益的或者讓人分心的，要有一條明確的分界線。

　　Business Insider旗下研究機構(gòu)BI Intelligence最近做出評估預(yù)測，到2020年全球范圍內(nèi)銷售的9200萬輛汽車將使用與互聯(lián)網(wǎng)連接的硬件設(shè)備。想象一下數(shù)以千萬計的車輛應(yīng)用系統(tǒng)每時每刻都在進行數(shù)據(jù)輸入輸出，將帶來怎樣的用戶交互體驗。共享數(shù)據(jù)的輔助下，行車安全性可以得到大幅度提升，提前的線路規(guī)劃策略也能夠降低燃油消耗量。系統(tǒng)是如何判斷哪些數(shù)據(jù)對駕駛者或者車載系統(tǒng)本身有所幫助，那些相關(guān)性不大的數(shù)據(jù)是否會讓行車駕駛更復(fù)雜、更麻煩、更危險?