我的前端入門經歷

2016/01/30 來源：cnblogs

前言

大致想來，接觸前端已有兩年左右的時間，也曾迷茫過，所幸堅持了下來，也終於入門了。兩年來看過不少書，接觸過不少新技術，隨著知識邊界的不斷擴展，也越來越感覺到自己的不足，還有更多的知識點需要掌握。平時，有不少人問我怎麼學習前端的，一般我是不回復這類問題，不是不願意，而是回答不了。因為自己也才剛入門，沒有什麼能力指導別人，還有就是不同的人有不同的知識儲備和編程基礎，總的來說就是各有各的情況，我的學習方法或許只適合我本人。這篇文章並不是為了指引其他小夥伴入門，僅僅是一個個人的階段性回顧。

初始接觸

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

知識儲備

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

在學習基礎的知識的過程中，並沒有忘記拓展自己的知識邊界，也看了不少其他相關書籍。下面是一些書籍列表：

在學習的過程中，為了練習網站布局，大致重構了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等，但於學生的我來說缺少一些應用場景，也僅僅停留在學過而已，只對其概念有所了解。

個人感覺對於新技術不要盲目，打好基礎才是王道，無論是什麼樣的技術只有結合具體項目才有用武之地，不能人云亦云，一擁而上。我們要隨著項目實踐不斷拓展自己的知識邊界，而不是閉門造車。

免責聲明：本文內容來源于cnblogs，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。