<progress id="uuezx"></progress>
<th id="uuezx"></th>
  • <li id="uuezx"><acronym id="uuezx"><cite id="uuezx"></cite></acronym></li>

    初學者接觸web前端需要注意些什么?一起來看看

    很多同學在學習前端這塊的時候,對JavaScript表示非??鄲?,因為涵蓋的知識點太多也太復雜,其應用也是五花八門讓人摸不著頭腦,那么初學者接觸web前端需要注意什么呢?課工場合肥北大青鳥的陸老師帶大家了解一下。

    其實對于JavaScript這塊只要我們一點一點由基礎到進階的學習,就一定能學好,接下來陸老師就給大家分享有關JavaScript模塊化編程的知識。

     

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

    模塊化需要實現的功能:

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

    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模塊是編譯時輸出接口。

    上下文導航
    相關內容
    全國熱線

    0551-69117050

    咨詢服務熱線:8:00-23:00

    合肥一元教育咨詢有限公司版權所有 如有圖片侵權請及時聯系本站,將及時刪錯或更改

    皖ICP備13012660號-1

    在線咨詢
    電話咨詢
    Tel:0551-69117050
    微信

    掃一掃
    歡迎微信咨詢

    QQ咨詢
    返回頂部