詳解JS模塊導(dǎo)入導(dǎo)出
開發(fā)中基本不會將所有的業(yè)務(wù)邏輯代碼放在一個JS文件中，特別是在使用前端框架，進行組件化開發(fā)中時，會復(fù)用相應(yīng)的組件。這時，就會用到模塊導(dǎo)入/導(dǎo)出的方法了。
當(dāng)然，上面提到有模塊的概念，也是在JS用于服務(wù)器端編程的時候才會出現(xiàn)，我們在使用前端框架時，使用npm run dev,不就是啟動了一個node服務(wù)。 對于JavaScript模塊化編程的起源可以追溯到2009年，Ryan Dahl在github上發(fā)布了node 的最初版本。
本文主要介紹幾種模塊導(dǎo)入/導(dǎo)出的方法。
node 中模塊導(dǎo)出/導(dǎo)入
平時我們接觸最多的模塊導(dǎo)入的例子，就是使用npm安裝各種開源模塊，然后在項目中使用例如import,require的方法引入，或者更加直白的直接使用script標簽引入入node_module中對應(yīng)模塊打包過后的源文件。
為什么可以直接引入這些npm模塊呢？一般在每個模塊的源文件里面，都會找到modules.exports方法。用來導(dǎo)出變量。比如下面我們在使用gulp打包壓縮時，經(jīng)常使用到的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規(guī)范。在CommonJS中有一個全局的require()方法，用于加載模塊；module.export 和 export 方法，導(dǎo)出模塊。
這里比較重要的一點是： 我們在寫模塊時用到的exports對象實際上只是對module.exports的引用，所有在一些js庫的源碼中，經(jīng)常可以看到這樣的寫法：
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 執(zhí)行相應(yīng)的commons.js文件；
在使用exports方法是，不能直接exprots = {},這樣改變了exports方法的引用， 相應(yīng)就無法實現(xiàn)導(dǎo)出模塊的功能了。
es6導(dǎo)出方法
es6中也同樣提出了比較好用的模塊導(dǎo)出的方法，包括兩種。
命名導(dǎo)出
如果在一個文件中想要導(dǎo)出多個不同的變量，可以分別對不同的變量命名，然后分別導(dǎo)出，避免相互污染。
// 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 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>es6</title>
</head>
<body>
<script src="./import.js"></script>
</body>
</html>
然后，我們嘗試使用最經(jīng)新出的 打包工具parcel(node版本在8.0以下安裝會報錯)小試牛刀， 具體已經(jīng)安裝完成了，在命令行中輸入 parcel index.html,就會在1234 端口啟動服務(wù)，主要為了能夠在http://localhost:1234/中看到console。
默認導(dǎo)出
如果只在一個文件中提供了一個導(dǎo)出的口，就可以使用默認導(dǎo)出
//export4.js const str2 ="hello world"; export default str2 ; // import2.js import anyName from "./export4.js" console.log(anyName);
在index.html 中 <script src="./import2.js"></script>可以看到輸入 hello world
同樣是模塊導(dǎo)入導(dǎo)出方法，使用es6的模塊方法，要比node中 的（也就是CommonJS模塊）方法更加的差異非常大。
主要有如下兩點差別：
CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。
以上就是我們本次給大家介紹的關(guān)于JS模塊導(dǎo)入導(dǎo)出問題的全部內(nèi)容，如果大家還有任何不明白的地方可以在下方的留言區(qū)域討論，感謝你對腳本之家的支持。
相關(guān)文章
自己做的模擬模態(tài)對話框?qū)崿F(xiàn)代碼
最近做完一個項目，發(fā)現(xiàn)瀏覽器兼容問題，模態(tài)對話框只有IE支持，但是IE9又不能支持帶框架的對話框，那個對話框的大小打死都設(shè)置不了，在網(wǎng)上查說因為好多功能被IE9屏蔽了，于是自己做了一個模擬對話框的東西2012-05-05
這篇文章主要介紹了基于bootstrap實現(xiàn)收縮導(dǎo)航條的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本來想用css3來實現(xiàn)，但后來腦袋一熱就用了js，省的別人你ie怎么沒效果啊！在騰訊微博app上看到的一個效果，鼠標擊哪里就撕了哪里，跟撕報紙似的，任意點擊左邊面的灰色區(qū)域，查看效果，當(dāng)時覺得很有意思，問了下高人，突然覺悟了，原來如此。。2013-05-05
這篇文章主要介紹了jQuery實現(xiàn)騰訊信用界面(自制刻度尺)樣式,下文還總結(jié)了關(guān)于jquery中extend的方法，需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)簡單的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了原生JS實現(xiàn)的雪花飄落動畫效果,涉及javascript數(shù)值運算及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
本文為大家介紹下使用js實現(xiàn)可以供選擇的彈出框，具體的實現(xiàn)如下，感性的朋友可以參考下，希望對大家學(xué)習(xí)有所幫助2013-09-09
ECharts實現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏
這篇文章主要為大家介紹了ECharts實現(xiàn)數(shù)據(jù)超出Y軸最大值max但不隱藏實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
圖片橫向滾動效果，大家可能都已經(jīng)很熟悉了，本文為大家介紹下使用js實現(xiàn)橫向滾動效果，喜歡的朋友可以參考下，希望對大家有所幫助2013-09-09
js實現(xiàn)無限層級樹形數(shù)據(jù)結(jié)構(gòu)(創(chuàng)新算法)
這篇文章主要介紹了js實現(xiàn)無限層級樹形數(shù)據(jù)結(jié)構(gòu)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02