初學者接觸web前端需要注意什么

本篇內容主要講解“初學者接觸web前端需要注意什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“初學者接觸web前端需要注意什么”吧!

模塊化需要實現的功能

1. 解決命名沖突。當代碼達到一定規(guī)模，功能很多的時，命名沖突就會出現，模塊化可以很好的解決命名沖突的問題。

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

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

JavaScript模塊化發(fā)展

閉包與命名空間

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

面向對象開發(fā)

這種方法只是閉包方式的小改進，約束js文件返回必須是對象，對象其實就是一些個方法和屬性的集合。這樣的優(yōu)點：1)規(guī)范化輸出，更加統一的便于相互依賴和引用;2)使用‘類’的方式開發(fā)，便于后面的依賴進行擴展。本質上這種方法只是對閉包方法的規(guī)范約束，并沒有做什么根本改動。

YUI

雅虎出品的一個工具，模塊化管理只是一部分，其還具有JS壓縮、混淆、請求合并(合并資源需要server端配合)等性能優(yōu)化的工具，可謂是現有JS模塊化的鼻祖。通過YUI全局對象去管理不同模塊，所有模塊都只是對象上的不同屬性，相當于是不同程序運行在操作系統上。

CommonJs

2009年Nodejs發(fā)布，Commonjs發(fā)布之后，就成了Node里面標準的模塊化管理工具。同時Node還推出了npm包管理工具，npm平臺上的包均滿足Commonjs規(guī)范，隨著Node與npm的發(fā)展，Commonjs影響力也越來越大，并且促進了后面模塊化工具的發(fā)展，具有里程碑意義的模塊化工具。

AMD和RequireJS

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

RequireJs是JS模塊化的工具框架，是AMD規(guī)范的具體實現。但是有意思的是，RequireJs誕生之后，推廣過程中產生的AMD規(guī)范。RequireJs的優(yōu)點：1)動態(tài)并行加載js，依賴前置，無需再考慮js加載順序問題;2)核心還是注入變量的沙箱編譯，解決模塊化問題;3)規(guī)范化輸入輸出，使用起來方便;4)對于不滿足AMD規(guī)范的文件可以很好地兼容。

CMD和SeaJs

CMD規(guī)范由國內(阿里)誕生，借鑒了Commonjs的規(guī)范與AMD規(guī)范，在兩者基礎上做了改進。特點：1)define定義模塊、require加載模塊、exports暴露變量;2)不同于AMD的依賴前置，CMD推崇依賴就近(需要的時候再加載);3)推崇api功能單一，一個模塊干一件事。

SeaJs是CMD規(guī)范的實現，跟RequireJs類似，CMD也是SeaJs推廣過程中誕生的規(guī)范。CMD借鑒了很多AMD和Commonjs優(yōu)點，同樣SeaJs也對AMD和Commonjs做出了很多兼容。

ES6中的模塊化

ES6規(guī)范中終于將模塊化納入JavaScript標準，從此JS模塊化被官方扶正，也是未來JS的標準。ES6中的模塊化在Commonjs的基礎上有所不同，增加了關鍵字import、export、default、as、from，而不是全局對象。二者有兩點主要的區(qū)別：1)CommonJS模塊輸出的是一個值的拷貝，ES6模塊輸出的是值的引用;2)CommonJS模塊是運行時加載，ES6模塊是編譯時輸出接口。

到此，相信大家對“初學者接觸web前端需要注意什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！