初學者接觸web前端須要注意什麼？避免走上彎路

初學Web前端要注意什麼？如何學好JS模塊化編程？JavaScript是前端三要素之一，也是不少初學Web前端的人遭遇的第一條攔路虎。不少同窗表示JavaScript涵蓋的知識點太多太複雜、應用也是五花八門徹底摸不着頭腦。但只要咱們一點一點由基礎到進階的學習，就必定能學好JavaScript，接下來小編就給你們分享有關JavaScript模塊化編程的知識。

模塊是實現特定功能的一組方法，模塊化是一種規範、一種約束，這種約束會大大提高開發效率。JS模塊化思想是將每一個JS文件看做是一個模塊，每一個模塊經過固定的方式引入，而且經過固定的方式向外暴露指定的內容。

模塊化須要實現的功能

1.解決命名衝突。當代碼達到必定規模，功能不少的時，命名衝突就會出現，模塊化能夠很好的解決命名衝突的問題。

在這裏小編建了一個前端學習交流扣扣羣：132667127，我本身整理的最新的前端資料和高級開發教程，若是有想須要的，能夠加羣一塊兒學習交流

2.實現依賴管理。當一個頁面要加載多個JS而且他們之際有些還有依賴關係，這時候就須要慎重仔細的排列這些JS的順序，以保證每一個組件都能正常運行，而模塊化以後就不用爲此多費心思。

3.提升複用性和代碼可讀性。一個功能爲一個模塊，每一個模塊相互獨立，互不影響，代碼組件封裝能夠重複利用，去除這個模塊不影響其它的。

JavaScript模塊化發展

閉包與命名空間

這是最容易想到的也是最簡便的解決方式，早在模塊化概念提出以前不少人就已經使用閉包的方式來解決變量重名和污染問題。這樣每一個JS文件都是使用IIFE包裹的，各個JS文件分別在不一樣的詞法做用域中，相互隔離，最後經過閉包的方式暴露變量。每一個閉包都是單獨一個文件，每一個文件仍然經過script標籤的方式下載，標籤的順序就是模塊的依賴關係。

面向對象開發

這種方法只是閉包方式的小改進，約束js文件返回必須是對象，對象其實就是一些個方法和屬性的集合。這樣的優勢：1)規範化輸出，更加統一的便於相互依賴和引用;2)使用‘類’的方式開發，便於後面的依賴進行擴展。本質上這種方法只是對閉包方法的規範約束，並無作什麼根本改動。

YUI

雅虎出品的一個工具，模塊化管理只是一部分，其還具備JS壓縮、混淆、請求合併(合併資源須要server端配合)等性能優化的工具，可謂是現有JS模塊化的鼻祖。經過YUI全局對象去管理不一樣模塊，全部模塊都只是對象上的不一樣屬性，至關因而不一樣程序運行在操做系統上。

CommonJs

2009年Nodejs發佈，Commonjs發佈以後，就成了Node裏面標準的模塊化管理工具。同時Node還推出了npm包管理工具，npm平臺上的包均知足Commonjs規範，隨着Node與npm的發展，Commonjs影響力也愈來愈大，而且促進了後面模塊化工具的發展，具備里程碑意義的模塊化工具。

AMD和RequireJS

AMD是"AsynchronousModuleDefinition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到全部依賴加載完成以後(前置依賴)，這個回調函數纔會運行。

RequireJs是JS模塊化的工具框架，是AMD規範的具體實現。可是有意思的是，RequireJs誕生以後，推廣過程當中產生的AMD規範。RequireJs的優勢：1)動態並行加載js，依賴前置，無需再考慮js加載順序問題;2)核心仍是注入變量的沙箱編譯，解決模塊化問題;3)規範化輸入輸出，使用起來方便;4)對於不知足AMD規範的文件能夠很好地兼容。

CMD和SeaJs

CMD規範由國內(阿里)誕生，借鑑了Commonjs的規範與AMD規範，在二者基礎上作了改進。特色：1)define定義模塊、require加載模塊、exports暴露變量;2)不一樣於AMD的依賴前置，CMD推崇依賴就近(須要的時候再加載);3)推崇api功能單一，一個模塊幹一件事。

SeaJs是CMD規範的實現，跟RequireJs相似，CMD也是SeaJs推廣過程當中誕生的規範。CMD借鑑了不少AMD和Commonjs優勢，一樣SeaJs也對AMD和Commonjs作出了不少兼容。

ES6中的模塊化

ES6規範中終於將模塊化歸入JavaScript標準，今後JS模塊化被官方扶正，也是將來JS的標準。ES6中的模塊化在Commonjs的基礎上有所不一樣，增長了關鍵字import、export、default、as、from，而不是全局對象。兩者有兩點主要的區別：1)CommonJS模塊輸出的是一個值的拷貝，ES6模塊輸出的是值的引用;2)CommonJS模塊是運行時加載，ES6模塊是編譯時輸出接口。