JS 模塊導入/導出

wall2flower 發布于2019-08-22 11:19 / 1508人閱讀

摘要：本文主要介紹幾種模塊導入導出的方法。默認導出如果只在一個文件中提供了一個導出的口，就可以使用默認導出在中可以看到輸入同樣是模塊導入導出方法，使用的模塊方法，要比中的也就是模塊方法更加的差異非常大。

在開發中基本不會將所有的業務邏輯代碼放在一個JS文件中，特別是在使用前端框架，進行組件化開發中時，會復用相應的組件。這時，就會用到模塊導入/導出的方法了。

當然，上面提到有模塊的概念，也是在JS用于服務器端編程的時候才會出現，我們在使用前端框架時，使用npm run dev,不就是啟動了一個node服務。對于JavaScript模塊化編程的起源可以追溯到2009年，Ryan Dahl在github上發布了node 的最初版本。

本文主要介紹幾種模塊導入/導出的方法。

node 中模塊導出/導入

平時我們接觸最多的模塊導入的例子，就是使用npm安裝各種開源模塊，然后在項目中使用例如import,require的方法引入，或者更加直白的直接使用script標簽引入入node_module中對應模塊打包過后的源文件。

為什么可以直接引入這些npm模塊呢？一般在每個模塊的源文件里面，都會找到modules.exports方法。用來導出變量。比如下面我們在使用gulp打包壓縮時，經常使用到的gulp-rename這個插件通過npm安裝后，在node_modules中的gulp-rename/index.js

"use strict";

var Stream = require("stream");
var Path = require("path");

function gulpRename(obj) {

  var stream = new Stream.Transform({objectMode: true});
     ...  

  return stream;
}

module.exports = gulpRename;

看到的基本思路就是，定義了gulpRename 方法，然后把它拋出去。

node中的module都遵循CommonJS規范。在CommonJS中有一個全局的require()方法，用于加載模塊；module.export 和 export 方法，導出模塊。

這里比較重要的一點是：我們在寫模塊時用到的exports對象實際上只是對module.exports的引用，所有在一些js庫的源碼中，經常可以看到這樣的寫法：
exports = module.exports = somethings

 // export.js 文件中

var export1 = "from export1"
var export2 = function(){
   return "from export2";
}
exports.export2 = export2;


 // modules.js 文件中
 var module1 = "from module1";
 var module2 = function(e){
   return "from funModule2";
 }

 module.exports.str1 = module1;
 module.exports.fun2 = module2;

最后在common.js文件中引入exports.js文件和 modules.js 文件，

var md1 = require("./module.js")
console.log(md1);


var export3 = require("./export");
console.log(export3);

最后在gitbash中，使用node 執行相應的commons.js文件；

在使用exports方法是，不能直接exprots = {},這樣改變了exports方法的引用，相應就無法實現導出模塊的功能了。

es6導出方法

es6中也同樣提出了比較好用的模塊導出的方法，包括兩種。

命名導出
如果在一個文件中想要導出多個不同的變量，可以分別對不同的變量命名，然后分別導出，避免相互污染。

 

 // export3.js 文件
   export const myModules = {c:1 }
   export const myModules2 = {d:2 }

 // import.js 文件
 import {myModule1,myModule2} from "./export3.js" ;
 console.log(myModule1);
 console.log(myModule2);

 // index.html 文件


  
    
    es6

然后，我們嘗試使用最經新出的打包工具parcel(node版本在8.0以下安裝會報錯)小試牛刀，具體已經安裝完成了，在命令行中輸入 parcel index.html,就會在1234 端口啟動服務，主要為了能夠在http://localhost:1234/中看到console。

默認導出

如果只在一個文件中提供了一個導出的口，就可以使用默認導出

    //export4.js   

    const str2 ="hello world";
    export default str2 ;

    // import2.js
    import anyName  from "./export4.js"
    console.log(anyName);

在index.html 中可以看到輸入 hello world

同樣是模塊導入導出方法，使用es6的模塊方法，要比node中的（也就是CommonJS模塊）方法更加的差異非常大。
主要有如下兩點差別：

CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

具體解釋，可以移步到ES6模塊與CommonJS模塊的差異

本文只是列出一些用法與代碼示例，來比較不同的模塊方法，列出一些更加深入講解的文章，方便后面自己仔細研究。

import、require、export、module.exports 混合詳解 -- 尚妝前端團隊

Module 的加載實現 --- ECMAScrip6入門

module.exports與exports？？關于exports的總結

CommonJS 系列

云服務器 GPU云服務器 js導入導出excel數據導出導入導入導出導入?導出

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

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

JS module的導出和導入

摘要：默認導出默認導出也被稱做定義式導出。導出一個函數導出一個類默認導出可以理解為另一種形式的命名導出，默認導出可以認為是使用了名稱的命名導出。同樣的，在導入時可以使用指令導入這些默認值。最近看了些Vue框架寫的程序，發現自己的前端知識還停留在幾年以前，發現現在Javascript程序里有各種各樣的對module的導入和到處，導入乍一看跟python的語法挺像的無非就是把from和impo...

muzhuyu 2019-08-23 15:26 評論0 收藏0
ES6之路之模塊詳解

摘要：例如我們導入模塊，可以這么導入桃翁歡迎關注公眾號前端桃園報錯不能定義相同名字變量報錯，不能重新賦值小豬可以看到導入綁定這里不理解綁定，文章后面會解釋時，形式類似于對象解構，但實際上并無關聯。歡迎訪問個人站點簡介何為模塊一個模塊只不過是一個寫在文件中的 JavaScript 代碼塊。模塊中的函數或變量不可用，除非模塊文件導出它們。簡單地說，這些模塊可以幫助你在你的模塊中編寫...

huashiou 2019-08-22 17:13 評論0 收藏0
ES6: import和export

摘要：一模塊化前端模塊化的好處都已經被說爛了，歸納為兩點避免全局變量污染有效的處理依賴關系終于引入了模塊的概念，最近學習了下，順便記下筆記。命名導出命名導出就是明確導出的變量名稱和值。其中表示導出模塊所有的命名輸出。一、模塊化前端模塊化的好處都已經被說爛了，歸納為兩點：避免全局變量污染有效的處理依賴關系 ES2015終于引入了模塊的概念，最近學習了下，順便記下筆記。二、準備工作...

wapeyang 2019-08-21 17:50 評論0 收藏0
一篇文章弄懂 JavaScript 中的 import

摘要：無論是否聲明了，導入的模塊都運行在嚴格模式下。這通常是包含模塊的文件的相對或絕對路徑名，可以不包括擴展名。引用時將用作一種命名空間的模塊對象的名稱。導出參數指定單個命名導出，而語法導入所有導出。導入默認值在無論是對象函數類等有效時可用。 import 語句用于導入由另一個模塊導出的綁定。無論是否聲明了 strict mode，導入的模塊都運行在嚴格模式下。import語句不能在嵌入式腳...

why_rookie 2019-08-23 13:56 評論0 收藏0
富婆給你說require、import和export

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。目前，主要有兩個庫實現了規范和。這些導出對象用名稱進行區分，稱之為命名式導出。簡單粗暴，富婆給你說，其實我也沒太搞明白，最近看了一篇文章我才理清了一點點思路，最近整日沉迷于肥宅快樂水，技術都跟不上了，來篇文章，提神醒腦，朝著我的富婆夢更近一步，早日走上富婆路，包養我家大狼狗！！！為什么有模塊概念...

cod7ce 2019-08-02 16:16 評論0 收藏0