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