如何在JavaScript中導(dǎo)入另一模塊導(dǎo)出的綁定

態(tài)的 import 語句用于導(dǎo)入由另一個(gè)模塊導(dǎo)出的綁定。無論是否聲明了 strict mode，導(dǎo)入的模塊都運(yùn)行在嚴(yán)格模式下。在瀏覽器中，import 語句只能在聲明了 type="module" 的 script 的標(biāo)簽中使用。

此外，還有一個(gè)類似函數(shù)的動態(tài) import()，它不需要依賴 type="module" 的 script 標(biāo)簽。

在 script 標(biāo)簽中使用 nomodule 屬性，可以確保向后兼容。

在您希望按照一定的條件或者按需加載模塊的時(shí)候，動態(tài) import() 是非常有用的。而靜態(tài)型的 import 是初始化加載依賴項(xiàng)的最優(yōu)選擇，使用靜態(tài) import 更容易從代碼靜態(tài)分析工具和 tree shaking 中受益。

語法

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");//這是一個(gè)處于第三階段的提案。

defaultExport：導(dǎo)入模塊的默認(rèn)導(dǎo)出接口的引用名。

module-name：要導(dǎo)入的模塊。通常是包含目標(biāo)模塊的 .js 文件的相對或絕對路徑名，可以不包括 .js 擴(kuò)展名。某些特定的打包工具可能允許或需要使用擴(kuò)展或依賴文件，它會檢查比對你的運(yùn)行環(huán)境。只允許單引號和雙引號的字符串。

name：導(dǎo)入模塊對象整體的別名，在引用導(dǎo)入模塊時(shí)，它將作為一個(gè)命名空間來使用。

export, exportN

被導(dǎo)入模塊的導(dǎo)出接口的名稱。

alias, aliasN：將引用指定的導(dǎo)入的名稱。

描述

name 參數(shù)是“導(dǎo)入模塊對象”的名稱，它將用一種名稱空間來引用導(dǎo)入模塊的接口。export 參數(shù)指定單個(gè)的命名導(dǎo)出，而 import * as name 語法導(dǎo)入所有導(dǎo)出接口，即導(dǎo)入模塊整體。以下示例闡明該語法。

導(dǎo)入整個(gè)模塊的內(nèi)容

這將myModule插入當(dāng)前作用域，其中包含來自位于/modules/my-module.js文件中導(dǎo)出的所有接口。

import * as myModule from '/modules/my-module.js';

在這里，訪問導(dǎo)出接口意味著使用模塊名稱（在本例為“myModule”）作為命名空間。例如，如果上面導(dǎo)入的模塊包含一個(gè)接口 doAllTheAmazingThings()，你可以這樣調(diào)用：

myModule.doAllTheAmazingThings();

導(dǎo)入單個(gè)接口

給定一個(gè)名為 myExport 的對象或值，它已經(jīng)從模塊 my-module 導(dǎo)出（因?yàn)檎麄€(gè)模塊被導(dǎo)出）或顯式地導(dǎo)出（使用 export 語句），將 myExport 插入當(dāng)前作用域。

import {myExport} from '/modules/my-module.js';

導(dǎo)入多個(gè)接口

這將 foo 和 bar 插入當(dāng)前作用域。

import {foo, bar} from '/modules/my-module.js';

導(dǎo)入帶有別名的接口

你可以在導(dǎo)入時(shí)重命名接口。例如，將 shortName 插入當(dāng)前作用域。

import {reallyReallyLongModuleExportName as shortName}
  from '/modules/my-module.js';

導(dǎo)入時(shí)重命名多個(gè)接口

使用別名導(dǎo)入模塊的多個(gè)接口。

import {
  reallyReallyLongModuleMemberName as shortName,
  anotherLongModuleName as short
} from '/modules/my-module.js';

僅為副作用而導(dǎo)入一個(gè)模塊

整個(gè)模塊僅為副作用（中性詞，無貶義含義）而導(dǎo)入，而不導(dǎo)入模塊中的任何內(nèi)容（接口）。這將運(yùn)行模塊中的全局代碼，但實(shí)際上不導(dǎo)入任何值。

import '/modules/my-module.js';

導(dǎo)入默認(rèn)值

引入模塊可能有一個(gè) default export（無論它是對象，函數(shù)，類等）可用。然后可以使用 import 語句來導(dǎo)入這樣的默認(rèn)接口。

最簡單的用法是直接導(dǎo)入默認(rèn)值：

import myDefault from '/modules/my-module.js';

也可以同時(shí)將 default 語法與上述用法（命名空間導(dǎo)入或命名導(dǎo)入）一起使用。在這種情況下，default 導(dǎo)入必須首先聲明。例如：

import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace

Copy to Clipboard

或者

import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports

當(dāng)用動態(tài)導(dǎo)入的方式導(dǎo)入默認(rèn)導(dǎo)出時(shí)，其工作方式有所不同。你需要從返回的對象中解構(gòu)并重命名 "default" 鍵。

(async () => {
  if (somethingIsTrue) {
    const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
  }
})();

動態(tài) import

標(biāo)準(zhǔn)用法的 import 導(dǎo)入的模塊是靜態(tài)的，會使所有被導(dǎo)入的模塊，在加載時(shí)就被編譯（無法做到按需編譯，降低首頁加載速度）。有些場景中，你可能希望根據(jù)條件導(dǎo)入模塊或者按需導(dǎo)入模塊，這時(shí)你可以使用動態(tài)導(dǎo)入代替靜態(tài)導(dǎo)入。下面的是你可能會需要?jiǎng)討B(tài)導(dǎo)入的場景：

當(dāng)靜態(tài)導(dǎo)入的模塊很明顯的降低了代碼的加載速度且被使用的可能性很低，或者并不需要馬上使用它。
當(dāng)靜態(tài)導(dǎo)入的模塊很明顯的占用了大量系統(tǒng)內(nèi)存且被使用的可能性很低。
當(dāng)被導(dǎo)入的模塊，在加載時(shí)并不存在，需要異步獲取。
當(dāng)導(dǎo)入模塊的說明符，需要?jiǎng)討B(tài)構(gòu)建。（靜態(tài)導(dǎo)入只能使用靜態(tài)說明符）
當(dāng)被導(dǎo)入的模塊有副作用（這里說的副作用，可以理解為模塊中會直接運(yùn)行的代碼），這些副作用只有在觸發(fā)了某些條件才被需要時(shí)。（原則上來說，模塊不能有副作用，但是很多時(shí)候，你無法控制你所依賴的模塊的內(nèi)容）

請不要濫用動態(tài)導(dǎo)入（只有在必要情況下采用）。靜態(tài)框架能更好的初始化依賴，而且更有利于靜態(tài)分析工具和 tree shaking 發(fā)揮作用。

關(guān)鍵字 import 可以像調(diào)用函數(shù)一樣來動態(tài)的導(dǎo)入模塊。以這種方式調(diào)用，將返回一個(gè) promise。

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

這種使用方式也支持 await 關(guān)鍵字。

let module = await import('/modules/my-module.js');

示例

標(biāo)準(zhǔn)導(dǎo)入

下面的代碼將會演示如何從輔助模塊導(dǎo)入以協(xié)助處理 AJAX JSON 請求。

模塊：file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    callback(this.responseText)
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

主程序：main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });

Copy to Clipboard

動態(tài)導(dǎo)入

此示例展示了如何基于用戶操作去加載功能模塊到頁面上，在例子中通過點(diǎn)擊按鈕，然后會調(diào)用模塊內(nèi)的函數(shù)。當(dāng)然這不是能實(shí)現(xiàn)這個(gè)功能的唯一方式，import() 函數(shù)也可以支持 await。

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
  link.addEventListener("click", e => {
    e.preventDefault();

    import('/modules/my-module.js')
      .then(module => {
        module.loadPageInto(main);
      })
      .catch(err => {
        main.textContent = err.message;
      });
  });
}

規(guī)范

Specification

ECMAScript Language Specification
# sec-imports

瀏覽器兼容性

Report problems with this compatibility data on GitHub

desktop

mobile

server

Chrome

Edge

Firefox

Opera

Safari

Chrome Android

Firefox for Android

Opera Android

Safari on iOS

Samsung Internet

WebView Android

Deno

Node.js

import

Toggle history

10.1

Toggle history

10.3

Toggle history

8.0

Toggle history

1.0

Toggle history

13.2.0

footnotemore

Toggle history

Available in workers

Toggle history

footnote

Toggle history

footnote

Toggle history

13.0

Toggle history

1.0

Toggle history

Legend

Tip: you can click/tap on a cell for more information.

Full supportFull support

No supportNo support

See implementation notes.

User must explicitly enable this feature.

定快捷鍵有時(shí)候是非常方便的交互，這里簡單寫個(gè)demo

1:多快捷鍵

/**
 * 快捷搜索聚焦事件 ctrl + b
 */
$(window).keydown(function (event) {
    if (event.ctrlKey && window.event.keyCode == 66) {
        layer.msg('搜索框已聚焦，請輸入搜索關(guān)鍵詞')
        $('input[name="keywords"]').focus()
    }
});

2：單快捷鍵

$(document).keydown(function(event){
//根據(jù)鍵盤的ASCII碼值，設(shè)置快捷鍵執(zhí)行相應(yīng)代碼，可用&設(shè)置多個(gè)鍵
        if(event.keyCode=='65'){
            $("#b1").click();

        }

}）

付：鍵盤所有按鍵對應(yīng)的ASCII碼值

文我們將介紹如何操作或賦值給html屬性，更改樣式

v-bind

從一個(gè)例子來看我們?yōu)槭裁匆褂胿-bind綁定：

//index.html
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue模板和組件</title>
 </head>
 <body>
 <div id="databinding">
 {{ title }}<br />
 <a href="hreflink" target="_blank"> Click Me </a> <br />
 <a href="{{ hreflink }}" target="_blank">Click Me </a> <br />
 <a v-bind:href="hreflink" target="_blank">Click Me </a> <br />
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
</html>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 title: "數(shù)據(jù)綁定",
 hreflink: "http://www.google.com"
 }
});

當(dāng)我們打開Chrome瀏覽器控制臺的后發(fā)現(xiàn)，生成的html中只有第三個(gè)是對的，也就是說只有使用了v-bind的才真正的綁定了數(shù)據(jù)

綁定class

要綁定class 我們就需要用v-bind:class,我們還是直接看一個(gè)示例

//indedx.html
<style>
 .active {
 background: red;
 }
 </style>
 <div id="classbinding">
 <div v-bind:class="{active:isactive}">
 <b>{{ title }}</b>
 </div>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "CLASS BINDING",
 isactive: true
 }
});

代碼中我們定義了一個(gè).active，如果變量isactive是true則應(yīng)用顏色，否則不應(yīng)用

綁定多個(gè)class

同樣的我們可以給html綁定多個(gè)class

//index.html
<style>
 .info {
 color: #00529b;
 background-color: #bde5f8;
 }
 div {
 margin: 10px 0;
 padding: 12px;
 }
 .active {
 color: #4f8a10;
 background-color: #dff2bf;
 }
 .displayError {
 color: #d8000c;
 background-color: #ffbaba;
 }
 </style>
 <div id="classbinding">
 <div
 class="info"
 v-bind:class="{ active: isActive, 'displayError': hasError }"
 >
 {{ title }}
 </div>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "This is class binding example",
 isActive: false,
 hasError: false
 }
});

綁定數(shù)組

同樣的我們可以綁定一個(gè)數(shù)組，代碼如下

//index.html
<style>
 .info {
 color: #00529b;
 background-color: #bde5f8;
 }
 div {
 margin: 10px 0;
 padding: 12px;
 font-size: 25px;
 }
 .active {
 color: #4f8a10;
 background-color: #dff2bf;
 }
 .displayError {
 color: #d8000c;
 background-color: #ffbaba;
 }
 </style>
 <div id="classbinding">
 <div v-bind:class="[infoclass, errorclass]">{{ title }}</div>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "This is class binding example",
 infoclass: 'info',
 errorclass: 'displayError'
 }
});

組件模板以及組件添加class

//index.html
<style>
 .info {
 color: #00529b;
 background-color: #bde5f8;
 }
 div {
 margin: 10px 0;
 padding: 12px;
 font-size: 25px;
 }
 .active {
 color: #4f8a10;
 background-color: #dff2bf;
 }
 .displayError {
 color: #d8000c;
 background-color: #ffbaba;
 }
 </style>
 <div id="classbinding">
 <new_component class="active"></new_component>
 </div>
//app.js
var vm = new Vue({
 el: '#classbinding',
 data: {
 title: "This is class binding example",
 infoclass: 'info',
 errorclass: 'displayError',
 isActive: false,
 haserror: true
 },
 components: {
 'new_component': {
 template: '<div class = "info">Class Binding for component</div>'
 }
 }
});

綁定style

我們也可以綁定style

//index.html
<div id="databinding">
 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
 {{ title }}
 </div>
 </div>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 title: "Inline style Binding",
 activeColor: 'red',
 fontSize: '30'
 }
});

分配一個(gè)style對象

//index.html
<div id = "databinding">
 <div v-bind:style = "styleobj">{{title}}</div>
</div>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 title : "Inline style Binding",
 styleobj : {
 color: 'red',
 fontSize :'40px'
 }
 }
 });

表單輸入綁定

//index.html
 <div id="databinding">
 <h3>文本框</h3>
 <input v-model="name" placeholder="" />
 <h3>Name ：{{ name }}</h3>
 <hr />
 <h3>文本域</h3>
 <textarea v-model="textmessage" placeholder=""></textarea>
 <h1>
 <p>{{ textmessage }}</p>
 </h1>
 <hr />
 <h3>Checkbox</h3>
 <input type="checkbox" id="checkbox" v-model="checked" /> {{ checked }}
 <h3>Select</h3>
 <select v-model="languages">
 <option disabled value="">Please select one</option>
 <option>Java</option>
 <option>Javascript</option>
 <option>Php</option>
 <option>C</option>
 <option>C++</option>
 </select>
 <h3>{{ languages }}</h3>
 </div>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 name: '',
 textmessage: '',
 checked: false,
 languages: "Java"
 }
});

修飾符

//index.html
 <div id="databinding">
 <span style="font-size:25px;">年齡：</span>
 <input v-model.number="age" type="number" />
 <br />
 <span style="font-size:25px;">延遲:</span>
 <input v-model.lazy="msg" />
 <h3>{{ msg }}</h3>
 <br />
 <span style="font-size:25px;">實(shí)時(shí) : </span
 ><input v-model.trim="message" />
 <h3>{{ message }}</h3>
</div>
//app.js
var vm = new Vue({
 el: '#databinding',
 data: {
 age: 0,
 msg: '',
 message: ''
 }
});

當(dāng)我們使用了數(shù)字修飾符之后，如number表示只能是數(shù)字，lazy表示在離開文本框后出現(xiàn)顯示，trim刪除在開頭和結(jié)尾輸入的任何空格。

總結(jié)一下

本篇我們介紹了Vue的綁定，包括數(shù)據(jù)、屬性、以及修飾符等，如果對你有幫助，請點(diǎn)個(gè)關(guān)注吧！謝謝！

在線咨詢

上一篇：coupang店鋪商品上架步驟詳解
下一篇：如何解決打開網(wǎng)頁屏幕不停閃爍的問題

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何在JavaScript中導(dǎo)入另一模塊導(dǎo)出的綁定

描述

導(dǎo)入整個(gè)模塊的內(nèi)容

導(dǎo)入單個(gè)接口

導(dǎo)入多個(gè)接口

導(dǎo)入帶有別名的接口

導(dǎo)入時(shí)重命名多個(gè)接口

僅為副作用而導(dǎo)入一個(gè)模塊

導(dǎo)入默認(rèn)值

動態(tài) import

標(biāo)準(zhǔn)導(dǎo)入

模塊：file.js

主程序：main.js

動態(tài)導(dǎo)入

規(guī)范

瀏覽器兼容性

Legend

v-bind

綁定class

綁定多個(gè)class

綁定數(shù)組

組件模板以及組件添加class

綁定style

分配一個(gè)style對象

表單輸入綁定

修飾符

總結(jié)一下

您的項(xiàng)目需求