個人前端入門經歷

前言

大體想來，接觸前端已有兩年左右的時間，也曾迷茫過，所幸堅持了下來，也終於入門了。兩年來看過很多書，接觸過很多新技術，隨着知識邊界的不斷擴展，也愈來愈感受到本身的不足，還有更多的知識點須要掌握。平時，有很多人問我怎麼學習前端的，通常我是不回覆這類問題，不是不肯意，而是回答不了。由於本身也纔剛入門，沒有什麼能力指導別人，還有就是不一樣的人有不一樣的知識儲備和編程基礎，總的來講就是各有各的狀況，個人學習方法或許只適合我本人。這篇文章並非爲了指引其餘小夥伴入門，僅僅是一個我的的階段性回顧。

初始接觸

最初接觸前端仍是本科時候，是大二仍是大三業已忘記，學了一些HTML/CSS，並無深刻了解，畢竟年輕嘛！不知道學什麼，什麼又都想了解一點。只是感受，本身能夠用程序寫出來一張頁面是很酷的事情，作頁面遠比寫C++代碼有趣多了。碩士階段，一個項目須要一個完整登錄模塊，那個網站是ASP.NET作的，爲此就學習了兩個月左右的ASP，作了一個完整的登錄註冊模塊，算是對web開發有了一個粗淺的認識。一位師兄是前端方向的，導師也讓跟着他學點東西，看他拿到了網易的offer，就感受到前端仍是頗有前途的，就轉向了前端。當時也沒想着畢業後從事前端工做，僅僅是爲了學點東西而已，對於將來擇業仍是偏向於事業單位或研究所。沒想到接觸的越多，瞭解的越多，越就喜歡從事這個行業。

知識儲備

本人接觸或學習一門知識或者技術，通常先把背景知識瞭解後，知道其應用場景及意義後纔會進行系統學習，學習前端知識也是這樣。先去w3school學習了前端包括的幾大核心知識HTML/CSS/JavaScript，固然也把網站上全部的知識點都瀏覽了一遍，包括PHP、XML等等。對web開發有了一個大概認知以後，就開始系統的學習前端知識。

在學習基礎的知識的過程當中，並無忘記拓展本身的知識邊界，也看了很多其餘相關書籍。下面是一些書籍列表：

• 《JavaScript基礎教程》
• 《JavaScript基礎與實例教程》
• 《Head First HTML與CSS》
• 《HTM5與CSS3權威指南》
• 《響應式Web設計 :HTML5和CSS3實戰》
• 《網頁設計與配色經典案例解析》
• 《超人氣網站是這樣建成的》
• 《網站設計解構 :有效的交互設計框架和模式》
• 《Web 2.0界面設計模式》
• 《CSS創意課 :全球優秀交互頁面設計》
• 《響應式Web圖形設計》
• 《Sass與Compass實戰》

在學習的過程當中，爲了練習網站佈局，大體重構了HTML5中國、京東等網站的網頁。

在掌握了必定的前端基本知識後，感受JavaScript是前端裏面最核心的一部分，就把學習重心放在了JavaScript上，看了下列書籍：

• 《JavaScript高級程序設計》
• 《JavaScript啓示錄》
• 《高性能JavaScript》

高級程序設計本書無疑是一本經典之做，講解的很是全面、細緻，但我的感受並不適合初學者，由於裏面有很多知識點並非初學者能夠深入理解的。同一句話的含義對於資深程序猿和菜鳥程序猿是不一樣的，高級程序設計本書適合有必定基礎的人閱讀，最好讀多遍，這樣才能深入理解JavaScript語言本質。

對高質量代碼的不懈追求是一個優秀工程師必備的素質，要想寫出高質量的代碼就須要對web性能優化相關知識有必定的瞭解，我就閱讀了如下書目：

• 《高性能網站建設進階指南 :Web開發者性能優化最佳實踐》
• 《JavaScript設計模式》
• 《編寫可維護的JavaScript》
• 《JavaScript函數式編程》
• 《WEB性能權威指南》
• 《WebKit核心技術揭祕》
• 《Web前端黑客技術揭祕》

不少招聘前端工程師的職位要求每每都會對後端知識儲備有所要求，LAMP是不少公司的後臺技術選型搭配，就學習了最好的語言--PHP，看了：

• 《PHP與MySql程序設計》

代碼是寫出來的，只有多寫代碼，才能養成良好的編程習慣，寫出高質量、可維護的代碼，在儲備知識的過程當中不要忘記動手實踐，只有在不斷的實踐才能不斷的提升本身的編程水平。

項目實踐

對於大部分在校學生來講，並無多少好的項目讓你去作，沒有項目作也就不能積累項目經驗。很多人作的第一個項目就是本身的我的博客，我也不例外。下面就是關於這個我的博客的一些經驗：

這是一個閒來無事練手之做，也是對本身長時間學習前端知識的一個檢驗。從需求的分析、頁面的設計，再到概要設計及編程實現，以及上線和測試，一個完整的流程走下來，對軟件開發有了更深入的認識，收穫了不少。由後臺管理系統和用戶瀏覽頁面兩個部分構成。下面就詳細的敘述一下這個博客所用到的一些編程語言和框架類庫及收穫。   

• 前端實現

JavaScript/HTML/CSS毫無疑問是必不可少的，在寫JavaScript代碼時用的jQuery庫，它是輕量級的js庫，兼容CSS3和各類瀏覽器，jQuery使用戶能更方便地處理HTML、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery給開發者提供了很大的便利，固然若是寫的是一個複雜的應用或者調用很頻繁的程序，最好仍是用原生的JS寫，畢竟最高效的仍是原生的。推特的開源框架 BootStrap是一款很流行的前端框架，Bootstrap 讓前端開發更快速、簡單，本博客也使用了它。爲對HTML進行更新時簡化代碼，提升代碼利用率，還使用百度前端團隊開發JS模板引擎。爲了使博客的界面更加的漂亮，爲博客注入一絲活力，也使用了粒子跟隨插件。爲了更好的管理博客，使用Datatables插件，以及一個所見即所得的基於BootStrap的富文本編輯器。

• 後端實現

關於後端，原本準備學一點Node.js，把博客放在咱們實驗室本身的服務器上，但一想離開後就不容易維護了，就選擇了PHP和MYSQL，這樣方便在新浪SAE上發佈。之前也看過一些PHP的教程，但沒怎麼使用過，很快也就把知識還給做者了。因此爲了搭建後臺，就選擇了一款輕量級的框架-CodeIgniter。簡單易學，很快就能夠上手，對於新浪SAE上也有專門的優化。CodeIgniter 是一個小巧但功能強大的 PHP 框架，做爲一個簡單而「優雅」的工具包，它能夠爲 PHP 程序員創建功能完善的 Web 應用程序。這個框架很容易上手，想本身作一些網站的小夥伴能夠學習一下，在學習以前最好對PHP和MYSQL有一些瞭解，從w3school能夠了解一些基礎知識。磨刀不誤砍柴工，對基礎知識有必定的瞭解以後，能夠快捷高效的使用CodeIgniter框架，也能夠避免一些低級錯誤。新浪SAE上的MYSQL版本較低，你在本地上建立的數據庫可能不能夠直接導入到SAE平臺數據庫中，這時候你就得本身動手重新建立了。 

還作一些其餘的項目練手，好比老年衛視，鐘錶式日曆插件，故事續寫網站等。

新技術

一入前端深似海，有太多的知識須要學習，也有很多的新技術、新概念不斷涌現。學習或者瞭解過less/sass、angular、node、react、grunt等，但於學生的我來講缺乏一些應用場景，也僅僅停留在學過而已，只對其概念有所瞭解。

我的感受對於新技術不要盲目，打好基礎纔是王道，不管是什麼樣的技術只有結合具體項目纔有用武之地，不能人云亦云，蜂擁而上。咱們要隨着項目實踐不斷拓展本身的知識邊界，而不是閉門造車。