web前端工做五年了，我來告訴你如何系統的學習如今的JavaScript

1、入門

1：熟悉DIV+CSS佈局

使用DIV+CSS佈局標準網頁，可使前端XHTML代碼更少、結構更清晰，這有利於輕鬆用JavaScript操做DOM

好比，要展現一個3行3列的列表，若是用傳統的表格佈局，如今要你用JavaScript動態生成這個列表，那麼就須要一個循環嵌套

若是採用li結構加CSS浮動佈局，一次循環就行了。固然，WEB標準化不是必定不能使用表格，個人意思是結構清晰的XHTML更易於把JavaScript效果或功能整合到項目中。

2：掌握幾種開發測試工具

做爲一個開發人員，熟悉測試工具是必須的，這有助於提升你發現問題和解決問題的效率，對於特別大的項目更是如此。JavaScript學我推薦用Hbuilder

3.熟悉JavaScript每個方法的做用

這一要求聽起來彷佛有點不太實際，我想這個要求對於像C#、JAVA這些大型語言來講確實是，由於這些語言類庫實在太龐大了，相信沒有人能夠全面記住它，並且也是沒有必要所有記住，好比用JAVA作網頁與手機開發所關注的類庫是不同的。

而JavaScript則不是，它的內置方法函數真的很少，先全面熟悉一下，開發起來也將駕輕就熟，而大部分方法都是JavaSCript框架中用其基本的函數實現的。

好比trim()這個不少語言都有的去行頭行尾空格的方法，就是在jQuery中實現的。

再好比，若是你是從其它比較強大的語言轉過來玩JavaScript，你又可能認爲JavaScript應該有MD5加密的方法，固然這也是沒有的，但有人用JavaScript實現了這樣的方法，即JavaScript MD5。說到底JavaScript內置方法少的可憐，但不少牛人寫了一些新方法增長JavaScript功能，好比prototype框架主要是對JavaScript基礎函數進行原型擴展的。

4.瞭解DOM編程

瞭解DOM編程算是學習JavaScript過程必須掌握，且比較重要的課程，由於JavaScript除了編寫一些純數據處理的邏輯外，更多的是在動態更改XHTML的結構和內容，以達到界面動態更新的目的，而這些工做都要依賴DOM編程。jQuery框架在這方面封裝的至關好，提供了豐富的DOM操做方法，可讓你輕鬆找到頁面任何地方的一個DOM節點（XHTML標籤），而後進行相關操做（增、刪、改、查）。對於有過用其它語言操做XML文檔經驗的朋友，相信這一塊很快上手。

5.接觸並使用AJAX

Ajax的優勢就是異步交互

AJAX對於用戶以及服務器來講都是有好處的，對於用戶，提供更好的用戶體驗，最典型的一個應用場景：註冊頁面的用戶名可用性預檢測，傳統的可能會遇到這樣的問題：用戶填寫了一堆資料後提交表單，結果被服務器告知這個用戶被註冊了，要用戶從新填寫資料註冊，這對於大型多用戶網站那是很致命的，由於用戶輸10個用戶名可能有一半已被使用了。對於服務器來講，減小網頁流量，由於AJAX後，通常是按需加載數據的，不會由於局部更新而從新加載整個頁面。好比一個網頁佔三屏高，咱們能夠默認只加載第一屏的內容，當用戶拉動滾動條往下的時候，再加載二三屏的內容。另外像WEB在線地圖應用也是AJAX使用的典範。

2、提升

1. 深刻理解JavaScript this關鍵字

JavaScript this的做用與指向跟不少真正面向對象的開發語言是有很大差異的，它不始終指向當前對象，是會變化的。若是不注意這個問題，就有可能遇到看似沒錯的代碼報錯或不執行等問題。

2.學習JavaScript OOP編程

OOP是個好東西，它使程序員思考問題更有組織性，代碼的組織也更清晰。JavaScript 也能夠OOP，但與一些傳統的OOP語言一樣存在較大差異，因此要真正用熟JavaScript OOP也是須要下點功夫的。

3.瞭解閉包

JavaScript閉包也是被談得比較多的一個話題，閉包使JavaScript變量做用域變得複雜起來，但這一特性又使這門語言變的更靈活了。

4.學習規範開發

團隊精神相信你們是聽過很多了，就任一個公司作開發，固然離不開團隊，團隊要想合做愉快，每一個成員的編碼必需符合必定規範，這也是每一個公司對程序員的基本要求。關於規範一般指變量命名、文件組織、註釋規範等，這方面知識與其它語言的規範是有相通性的。

5.找本算法的書讀一讀

我認爲學會並使用一門語言並非什麼難事，難的應該是用語言這基本的語法與語句去解決一些複雜的問題。要解決一些複雜的問題，可能會用上一些算法，有些算法實現多是一個團隊在作的，好比中科院中文分詞的具體實現，另外像遊戲經常使用自動尋徑A*算法等。也許你認爲你不可能在JavaScript開發上遇到這麼複雜的問題，其實這還要看你在作什麼項目，若是你是在開發大型網頁遊戲，一般面臨更多具備挑戰性的難題，若是你有讀過一些算法書籍，瞭解一些常見問題的解決方法，在開發過程當中天然會如虎添翼。另外，熟悉算法顯然對於你往後接觸其它開發語言也是有幫助的。

3、習慣

1. 兼容、BUG問題作好筆記

CSS與JavaScript瀏覽器兼容問題最好作好筆記，由於這些問題，或者說BUG是比較詭異的，這些問題瀏覽器不會提示你錯在哪裏，IDE也不會提示你，特別是CSS兼容問題，這就會致使你在開發過程碰到這樣的問題會卡老半天得不到解決。即便以前解決過同類問題，之後可能又會碰上，結果以前沒有作好筆記增強記憶，註定你要再受罪一次，由於這些兼容問題不是一兩個，臨時記憶效果是不明顯的。以我經驗，不少問題是在IE6下發生的，如今IE6連微軟本身都但願加速它滅亡，這對於前端開發的咱們來講固然是一個好消息。

2.閱讀優秀的代碼，好比jQuery

閱讀優秀代碼絕對也是自我提升的好方法，這不只能夠了解優秀代碼的組織規範，更能夠了解一些功能的實現思路。好比jQuery就是一個很是值的學習的JavaScript框架。固然了，要閱讀這樣專業的JavaScript框架，JavaScript基礎要紮實，否則看的過程當中會遇到太多疑問，甚至對本身的信心也是一種打擊。

注意

1. 在JavaScript入門以前避免直接使用JavaScript框架作開發

若是你沒有任何JavaScript基礎，請不要直接使用JavaScript框架作開發，我認爲這可能會誤導你對一門語言的認識，好比你直接使用了jQuery用點連起來的語句寫法，你是否會認爲這是JavaScript語法的一種呢？再好比你使了prototype你不要把框架擴展後的基類方法認爲是JavaScript內置的。我認爲JavaScript框架是用來提升效率的，它絕對不是JavaScript入門應該學習的。

2.網上找的不少例子可能不是跨瀏覽器兼容的

有不少JavaScript效果源碼是N年前某網友寫的，N年前是IE的天下，因而一些前端懶得解決腳本跨瀏覽器兼容問題，使寫出來的腳本只適用於IE。當你獲得這樣的一段代碼，請不要說垃圾，也不要爲此發牢騷，由於這些代碼並非沒有一點價值的，若是你瞭解JavaScript跨瀏覽器兼容問題，相信你能夠很輕鬆經過少需修改使代碼有更好的兼容性。

 

web前端/H5/javascript學習羣：250777811

歡迎你們關注個人微信號公衆號，公衆號名稱：web前端EDU。掃下面的二維碼或者收藏下面的二維碼關注吧（長按下面的二維碼圖片、並選擇識別圖中的二維碼）