require 和 import 詳解

wanghui 發布于2019-08-23 14:00 / 2544人閱讀

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

前言

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”的縮寫，意思就是”異步模塊定義”。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。

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

1.2.1 用法

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

1.2.1 模塊寫法

define(id?, dependencies?, factory)

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

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

factory: 工廠方法，返回一個模塊函數

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

// 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();// 依賴前置，提前執行
　　　　　　b.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

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

1.3 CMD

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

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();    // 依賴就近，延遲執行
});

2 import

特點：

1.編譯時加載

2.只引用定義

3.按需加載

可對比require的特點，發現import完勝require,推薦用import取代require

2.1.1 用法

import有兩種模塊導入方式：命名式導入（名稱導入）和默認導入（定義式導入），以及 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－從將要導入模塊中收到的導出值的名稱

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

defaultMember－從導出模塊，導入默認導出成員

alias, aliasN－別名，對指定導入成員進行的重命名

module-name－要導入的模塊。是一個文件名

as－重命名導入成員名稱（“標識符”）

from－從已經存在的模塊、腳本文件等導入

import()

import()返回一個 Promise 對象。

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

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

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

2.2.1 模塊寫法

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

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－導出的“標識符”。導出后，可以通過這個“標識符”在另一個模塊中使用* import引用

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

－繼承模塊并導出繼承模塊所有的方法和屬性

as－重命名導出“標識符”

from－從已經存在的模塊、腳本文件…導出

參考資料

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 .. :)

GPU云服務器云服務器 equals和區別詳解 sar指標原理和詳解 cookie和session詳解 required

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99938.html

前端模塊化詳解

摘要：提倡依賴前置，在定義模塊的時候就要聲明其依賴的模塊。適用場景按需加載條件加載動態的模塊路徑注關于模塊化，詳細見阮一峰的入門模塊與模塊化區別模塊化的規范和兩種。模塊化開發方便代碼的管理，提高代碼復用性，降低代碼耦合，每個模塊都會有自己的作用域。當前流行的模塊化規范有CommonJS，AMD，CMD，ES6的import／export CommonJS的主要實踐者就是nodejs,一般...

zhangfaliang 2019-08-23 17:11 評論0 收藏0
前端模塊化詳解(完整版)

摘要：二模塊化規范概述應用由模塊組成，采用模塊規范。模塊化語法命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能。前言在JavaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹，此時...

Sanchi 2019-08-02 13:56 評論0 收藏0
前端模塊化詳解(完整版)

摘要：二模塊化規范概述應用由模塊組成，采用模塊規范。模塊化語法命令用于規定模塊的對外接口，命令用于輸入其他模塊提供的功能。前言在JavaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹，此時...

Pines_Cheng 2019-08-23 14:12 評論0 收藏0
JavaScrip模塊系統詳解

摘要：是一個字符串，它表示模塊的標識。模塊標準主要有兩部分聲明語法和可編程的加載配置模塊如何以及有條件地加載模塊模塊的基礎在的模塊系統中，有兩種命名的和默認的。在這幾天的工作中，我需要調用同事編寫的兼容jQuery和React的通用組件。他為了兼容jQuery風格的調用和React的組件化，分別export了一個default和幾個方法函數。在調用的過程中，出現了一些小插曲：React代碼...

testbird 2019-08-20 13:39 評論0 收藏0
【JS基礎】一文看懂前端模塊化規范

摘要：參考資料前端模塊化詳解完整版入門近一萬字的語法知識點補充徹底搞清楚中的和和詳解前言前端的模塊化之路經歷了漫長的過程，想詳細了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版)，這里根據幾位大佬們寫的文章，將模塊化規范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺得有用的小伙伴可以點個贊，筆芯。什么是模塊將一個復雜的程序依據一定的規則(規范)封裝成幾個塊(文件)...

HelKyle 2019-08-23 17:09 評論0 收藏0