<mark id="10v55"></mark>
<small id="10v55"><video id="10v55"></video></small>

  • <tr id="10v55"></tr>
    <menuitem id="10v55"></menuitem>

    編程課程列表 > JavaScript 原生模塊
    JavaScript 原生模塊
    • 信用卡 • 花唄
    • 放心購,7天內不滿意可退款
    收藏

    JavaScript 原生模塊

    圖文課程 18 節 40 個小點 171人參與
    ¥15

    JS 模塊 目前已獲得全部主流瀏覽器的支持。

    什么是 JavaScript 模塊

    JS modules 其實是一系列功能的集合。以前你可能聽過說 Common JS ,AMD 等模塊標準,不一樣標準的模塊功能都是相似的,都容許你 import 或者 export 一些東西。

    JavaScript 模塊目前有標準的語法,在模塊中,你能夠經過 export 關鍵字,導出一切東西(變量,函數,其它聲明等等)

    //lib.mjs
    export const repeat = (string) => `${string} ${string}`;
    export function shout(string) {
      return `${string.toUpperCase()}!`;
    }

    而想要導入該模塊,只須要在其它文件中使用import 關鍵字引入便可

    //main.mjs
    import {repeat, shout} from './lib.mjs';
    repeat('hello');
    // → 'hello hello'
    shout('Modules in action');
    // → 'MODULES IN ACTION!'

    模塊中還能夠導出默認值

    //lib.mjs
    export default function(string) {
      return `${string.toUpperCase()}!`;
    }

    具備默認值的模塊能夠以任意名字導入到其它模塊中jquery

    //main.mjs
    import shout from './lib.mjs';
    //     ^^^^^

    模塊和傳統的script 標簽引入腳本有一些區別,以下:

    • JS模塊默認使用嚴格模式
    • 模塊中不支持使用 html 格式的注釋,即<!-- TODO: Rename x to y. -->
    • 模塊會建立本身的頂級詞義上下文,這意味著,當在模塊中使用var foo = 42; 語句時,并不會建立一個全局變量foo, 所以也不能經過window.foo在瀏覽器中訪問該變量。
    • import 和 export 關鍵字只在模塊中有效。

    因為存在上述不一樣,經過傳統方式引入的腳本 和 以模塊方式引入的腳本,就會有相同的代碼,也會產生不一樣的行為,于是 JS 執行環節須要知道那些腳本是模塊。

    在 瀏覽器中使用模塊

    在 瀏覽器中,經過設置 <script> 元素的type 屬性為 module 能夠聲明其實一個模塊。

    <script type="module" src="main.mjs"></script>
    <script nomodule src="fallback.js"></script>

    支持type="module"的瀏覽器會忽略帶有nomudule屬性的的<script>元素,這樣就提供了降級處理的空間。其意義不只如此,支持type="module"的環境意味著其也支持箭頭函數,async-await等新語法功能,這樣引入的腳本無須再作轉義處理了。

    歡迎你開啟JavaScript原生模塊之旅!

    點擊下載編程獅App,手機隨時隨地繼續學>>

    IT技術編程開發學習交流群

    該課程暫無評價噢!
    √天堂资源中文最新版,√天堂资源最新版在线,女人脱了内裤露P毛A片