require 和 import 詳解

wanghui 發(fā)布于2019-08-23 14:00 / 2552人閱讀

摘要：第二行，在第一行之后運行，因此必須等加載完成。類似于，但是是依賴就近，延遲執(zhí)行，是依賴前置，提前執(zhí)行。是一個文件名重命名導(dǎo)入成員名稱標識符從已經(jīng)存在的模塊腳本文件等導(dǎo)入返回一個對象。

前言

JS模塊化編程是前端小伙伴們必不可少的知識，下面妹子將于自認為比較清晰的方式列舉出來。

1 require

特點：

1.運行時加載

2.拷貝到本頁面

3.全部引入

1.1 CommonJS

Node.js就是用CommonJS思想。
在CommonJS中，有一個全局性方法require()，用于加載模塊。

1.1.1 用法

var math = require("math");
math.add(2, 3);

var math = require("math");
const Math = new math(2, 3)
Math.add();

1.1.2 模塊寫法

模塊寫法分exports和module.exports。

exports.add = (x,y) => x+y;

module.exports = class math {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return  x+y;
  }
};

1.2 AMD

require.js和cujo.js就是用AMD思想。

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

第二行math.add(2, 3)，在第一行require(‘math’)之后運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應(yīng)用就會停在那里等。
這對服務(wù)器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對于瀏覽器，這卻是一個大問題，因為模塊都放在服務(wù)器端，等待時間取決于網(wǎng)速的快慢，可能要等很長時間，瀏覽器處于”假死”狀態(tài)。
因此，瀏覽器端的模塊，不能采用”同步加載”（synchronous），只能采用”異步加載”（asynchronous）。這就是AMD規(guī)范誕生的背景。

1.2.1 用法

//require([module], callback);
require(["math"], function (math) {
　math.add(2, 3);
});

1.2.1 模塊寫法

define(id?, dependencies?, factory)

id:字符串，模塊名稱(可選)

dependencies: 是我們要載入的依賴模塊(可選)，使用相對路徑。,注意是數(shù)組格式

factory: 工廠方法，返回一個模塊函數(shù)

一個模塊不依賴其他模塊寫法

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

模塊還依賴其他模塊

define(["a","b"], function(a,b){
　　　　function foo(){
　　　　　　a.doSomething();// 依賴前置，提前執(zhí)行
　　　　　　b.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

當(dāng)require()函數(shù)加載上面這個模塊的時候，就會先加載Lib.js文件。

1.3 CMD

sea.js就是用CMD思想。
CMD是"Common Module Definition"的縮寫。類似于requirejs，但是seajs是依賴就近，延遲執(zhí)行，requirejs是依賴前置，提前執(zhí)行。

1.3.1 用法

seajs.config({
  alias: {
    "jquery": "http://modules.seajs.org/jquery/1.7.2/jquery.js"
  }
});

seajs.use(["./hello", "jquery"], function(hello, $) {
  $("#beautiful-sea").click(hello.sayHello);
});

1.3.1 模塊寫法

define(function(require, exports, module) {
  var $ = require("jquery");

  exports.sayHello = function() {
    $("#hello").toggle("slow");
  };
   var b = require("b");
   b.doSomething();    // 依賴就近，延遲執(zhí)行
});

2 import

特點：

1.編譯時加載

2.只引用定義

3.按需加載

可對比require的特點，發(fā)現(xiàn)import完勝require,推薦用import取代require

2.1.1 用法

import有兩種模塊導(dǎo)入方式：命名式導(dǎo)入（名稱導(dǎo)入）和默認導(dǎo)入（定義式導(dǎo)入），以及 import()。

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

name－從將要導(dǎo)入模塊中收到的導(dǎo)出值的名稱

member, memberN－從導(dǎo)出模塊，導(dǎo)入指定名稱的多個成員

defaultMember－從導(dǎo)出模塊，導(dǎo)入默認導(dǎo)出成員

alias, aliasN－別名，對指定導(dǎo)入成員進行的重命名

module-name－要導(dǎo)入的模塊。是一個文件名

as－重命名導(dǎo)入成員名稱（“標識符”）

from－從已經(jīng)存在的模塊、腳本文件等導(dǎo)入

import()

import()返回一個 Promise 對象。

// 報錯
if (x === 2) {
  import MyModual from "./myModual";
}

引擎處理import語句是在編譯時，這時不會去分析或執(zhí)行if語句，所以import語句放在if代碼塊之中毫無意義，因此會報句法錯誤，而不是執(zhí)行時錯誤。沒辦法像require樣根據(jù)條件動態(tài)加載。
于是提案引入import()函數(shù)，編譯時分析if語句,完成動態(tài)加載。

if(x === 2){
  import("myModual").then((MyModual)=>{
    new MyModual();
  })
}

2.2.1 模塊寫法

export有兩種模塊導(dǎo)出方式：命名式導(dǎo)出（名稱導(dǎo)出）和默認導(dǎo)出（定義式導(dǎo)出），命名式導(dǎo)出每個模塊可以多個，而默認導(dǎo)出每個模塊僅一個。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
 
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
 
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

name1… nameN－導(dǎo)出的“標識符”。導(dǎo)出后，可以通過這個“標識符”在另一個模塊中使用* import引用

default－設(shè)置模塊的默認導(dǎo)出。設(shè)置后import不通過“標識符”而直接引用默認導(dǎo)入

－繼承模塊并導(dǎo)出繼承模塊所有的方法和屬性

as－重命名導(dǎo)出“標識符”

from－從已經(jīng)存在的模塊、腳本文件…導(dǎo)出

參考資料

https://raoenhui.github.io/es6/2018/12/06/import

http://es6.ruanyifeng.com/#docs/module#import

https://www.cnblogs.com/liaojie970/p/7376682.html

Happy coding .. :)

云服務(wù)器 GPU云服務(wù)器 equals和區(qū)別詳解 sar指標原理和詳解 cookie和session詳解 required

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99938.html

發(fā)表評論

登陸后可評論

0條評論

wanghui

男|高級講師

我要關(guān)注我要私信

TA的文章

代理模式C++實現(xiàn)

閱讀 1917·2021-11-25 09:43
Hadoop 入門筆記—核心組件 YARN

閱讀 1423·2021-11-22 14:56
【C++】list詳解

閱讀 3288·2021-11-22 09:34
Python爬蟲案例50篇-第8篇- 抓取某訊招聘的北京工作崗位

閱讀 2027·2021-11-15 11:37
WPTao淘寶客插件配置淘寶聯(lián)盟和京東聯(lián)盟API信息

閱讀 2282·2021-09-01 10:46
react知識點整理50問（未完待續(xù)）

閱讀 1408·2019-08-30 15:44
CSS背景與邊框

閱讀 2304·2019-08-30 13:15
使用原生js實現(xiàn)輪播圖效果

閱讀 2403·2019-08-29 13:07

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

require 和 import 詳解

1.1.1 用法

1.1.2 模塊寫法

1.2.1 用法

1.2.1 模塊寫法

1.3.1 用法

1.3.1 模塊寫法

2.1.1 用法

import()

2.2.1 模塊寫法

相關(guān)文章

前端模塊化詳解

前端模塊化詳解(完整版)

前端模塊化詳解(完整版)

JavaScrip模塊系統(tǒng)詳解

【JS基礎(chǔ)】一文看懂前端模塊化規(guī)范

發(fā)表評論

0條評論

wanghui

男|高級講師

TA的文章

代理模式C++實現(xiàn)

Hadoop 入門筆記—核心組件 YARN

【C++】list詳解

Python爬蟲案例50篇-第8篇- 抓取某訊招聘的北京工作崗位

WPTao淘寶客插件配置淘寶聯(lián)盟和京東聯(lián)盟API信息

react知識點整理50問（未完待續(xù)）

CSS背景與邊框

使用原生js實現(xiàn)輪播圖效果

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

require 和 import 詳解

1.1.1 用法

1.1.2 模塊寫法

1.2.1 用法

1.2.1 模塊寫法

1.3.1 用法

1.3.1 模塊寫法

2.1.1 用法

import()

2.2.1 模塊寫法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！