前端之旅——實踐出真知

這又是一篇與技術不太相關的文章，別打我！！！別打臉！！！

      前面在寫CSS、HTML等相關文章的時候，基礎的東西基本是一筆帶過。基礎文章有太多網站去寫，好比菜鳥教程、w3school等等。我不太懂許多人開博客的緣由，就爲了拷貝別人的文章？每次遇到困難去網上找解決辦法的時候，經常翻出來的都是相同的內容，標點符號都不帶變的。不少問題是別人在工做中遇到的，他的問題與環境還有必定的聯繫，別人的解決辦法可能解決不了他的問題也複製過去。

      記得以前學服務器部署，按着教程都作完了，最後就是訪問不到，換了不少關鍵詞查到的文章差不了多少。因而只能一步一步去看哪兒最可能出問題，再根據問題去找對應教程，最後問題找到了，教程裏少寫了一步。有很多人就是一個CtrlC、CtrlV工具，我徹底不信每一個人遇到問題的環境是徹底一致的，正好那個方法能解決他的問題。以前看到一個新聞說有的人爲了github上的star花錢僱人去點，大概就是這樣一幫人開博客徹底就是爲了去矇蔽面試官。

      固然，面試官又不傻！

      再回到主題，emmmmmm，好像原本也沒什麼主題。關於基礎的東西，寫一寫，練一練，就知道是怎麼回事了。對於有些人來講，他們對CSS很熟悉，對HTML也很熟悉，可就是在項目上不知所措。我從學校畢業就是這樣，學的東西全是散裝的，學完PS不知道能夠作網頁，覺得PS就只能P圖。有時候，散裝的也不太可怕，可怕的是散的太厲害。我在學校學習的時候，那時候啥也不懂，老師講HTML和CSS也不會單獨給你講它們是怎麼回事。就像我寫的博文，就告訴咱們一個大概，但這個大概有點水的厲害，最後具體操做怎麼作，用Dreamweaver（DW）拖，拖表格佈局。DIV這種佈局方式徹底一筆帶過，由於這種佈局方式不穩定性太多，她乾脆不講了。最重點的是CSS的寫法有點尬，她是經過DW彈出的編輯框一個一個去生成。整套內容全靠軟件，講編程語言不提語言，雖然說是玩具語言，但這也實在說不過去吧。

      會寫CSS以後回頭看DW，用DW去操做的過程，直接寫都寫完了。這就屬於散的太厲害，你對CSS、HTML再熟悉，老師交給你這種垃圾玩法，工做中會是什麼樣子？反正我當年看到招聘需求手寫CSS便渾身不寒而慄，最後以爲本身設計學得還能夠（ps：會用軟件而已）就靠設計找工做，網頁設計都不敢投。在實際工做中我也有遇到過學院派，當時去一家公司對接，那家公司前端作不過來，準備包出來。當我看到她用的DW，我差點笑出聲，不是由於這工具，而是我明白了爲啥慢。只是切片寫靜態徹底是忙得過來的，用啥工具關係也沒什麼大影響，但DW能夠看出處於什麼段位。別問我怎麼知道的，問下度娘寫JS推薦用什麼開發工具。由於是作移動端，先了解了下她們的適配方式，而後瞭解了下她們的流程，基本上證實了個人推論。

      她的適配方式和我當時用的差很少：以設計稿定寬，用rem單位，根據設計圖寬與手機屏幕寬的比例設置根字體大小。根字體默認正常值給的100px，這利於計算，基本上加個小數點就OK了。當時，我還不知道，看到她用DW再加上0.3333rem這種值的時候，猜測根字體不是這麼好計算的一個值。DW是沒有px to rem的轉換工具，會有一個計算過程，像HBuilder自帶轉換、VS Code有插件、Sublime Text也有插件等等。她並無藉助這些工具，後來當她給我她的Demo我才知道根值，算是有些管中窺豹的感受。這種轉換能夠用工程化思惟去解決，按着本來的像素去寫，最後將轉換工做交給工具。還有一個更方便的方式，那就是藍湖，它讓前端寫靜態更快速。她給的文件也頗有問題，沒有公共CSS和JS，至少有兩個文件少不了：重置默認的公共CSS、用於適配的JS。不善藉助工具，不瞭解前端技術，不會提取公共資源，這些都是致使她忙不過來的緣由。

      講這個例子，我得聲明一點，我不是爲了踩低別人來擡高本身，也不是要攻擊學院派。切個片就能給我牛成這個樣子，還不至於。我想表達的是咱們要學會去了解當下的技術結構，用它來給本身帶來更多的便利。學會了基礎，還得去學會綜合應用，學會了綜合運用還要學會偷懶，學會了偷懶還要學會下一個招數……技術在於折騰，生命不息折騰不止！我我的更偏向於在實踐中不斷進步！有人會說，我不知道工做中會須要用到些什麼？並非說工做中須要些什麼，應該是這個職業有些什麼技能。最初模仿別人的網站學會了寫靜態，接着想作一個本身的博客知道了兼容性，接着以爲不夠炫酷又加了點特技，接着想到技術有點落後再更新了技術：實踐就是一層一層地涉及未曾接觸的領域。這就是學習，當你盯着公式的時候，哇，好簡單！關鍵你得作題啊，要否則你就會拿它去計算相聲了！

      當我在《CSS擴展語言》的時候，本來想寫一下sass、less、stylus之間的差別，後來一想沒什麼用。想到以前看到CSS3新語法涉及到了變量，說明它在改變但還不夠好。因而以sass列舉了一些語法，來講明擴展語言的好處。寫完了以後，想以這種手法來聊一下構建工具，轉念一想這樣徹底沒有必要。構建工具太多了，它們各有特色，具體的得根據技術選型。固然，多瞭解一點並不是什麼壞事，這件事別人已經作了，我就很少費脣舌。

      最後我決定開始搭建一個項目，如今網上講實戰的教程真的太少，要麼是培訓機構收費教程，要麼就講個大概給源碼。說到底，那些教程好多都是新手demo，包括好多完整項目都是練手的東西，算不得企業級項目。其實腦子轉個彎就想獲得，真正的大神已經懶得寫代碼了，還給你寫整個項目，瘋啦！我不是什麼大神，儘管作過項目，也都是本身搭建的。我這樣作是想把整個思路寫下來，本身也能進步！本身全新弄一個項目，從需求到架構到最後成型全憑藉本身的力量完成，必定能學到很多的東西！

      以前作移動端嘗試過使用淘寶的lib-flexiable適配，不太好用，淘寶前端本身都拋棄了。我決定選用vw/vh，對於我來講是一個全新的嘗試，框架用vue準備使用vue-cli3。大體技術選型就這樣，接下來將進入實踐時間！