React Native中常用的導(dǎo)入導(dǎo)出方式主要包括三種：require() 、 import '' 和 @providesModule
1 require方式
由CommonJS提供支持识樱。
CommonJS是nodejs也就是服務(wù)器端廣泛使用的模塊化機(jī)制。 該規(guī)范的主要內(nèi)容是壶愤，模塊必須通過(guò)module.exports 導(dǎo)出對(duì)外的變量或接口，通過(guò) require() 來(lái)導(dǎo)入其他模塊的輸出到當(dāng)前模塊作用域中馏鹤。
導(dǎo)出方式
- 導(dǎo)出變量
var x = 5;
module.exports.x = x;
- 導(dǎo)出函數(shù)
var addX = function (value) {
return value + x;
};
module.exports.addX = addX;
- 導(dǎo)出多個(gè)文件
module.exports = {
TripComputation: require('./TripComputation'),
FlightComputation:require("./FlightComputation"),
};
導(dǎo)入方式
var app = require('./app.js');
限制
require()的導(dǎo)入方式征椒，在代碼塊外部、內(nèi)部均可以使用
2 import方式
由ES6提供支持
ES6正式提出了內(nèi)置的模塊化語(yǔ)法湃累，我們?cè)跒g覽器端無(wú)需額外引入requirejs來(lái)進(jìn)行模塊化勃救。
export導(dǎo)出
- 導(dǎo)出變量
export var color = "red";
export let name = "cz";
export const age = 25;
- 導(dǎo)出函數(shù)
export function add(num1,num2){
return num1+num2;
}
- 導(dǎo)出類(lèi)
export class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
}
- 導(dǎo)出對(duì)象
function multiply(num1, num2) {
return num1 * num2;
}
export {multiply}
- 導(dǎo)出時(shí)重命名
//重命名變量
export color as newColor;
//重命名函數(shù)
export {multiply as newMultiply}
//重命名類(lèi)
export Rectangle as NewRectangle
- 導(dǎo)出默認(rèn)值
export default function(num1, num2) {
return num1 + num2;
}
模塊的默認(rèn)值是使用 default 關(guān)鍵字所指定的單個(gè)變量、函數(shù)或類(lèi)治力，而你在每個(gè)模塊中只能設(shè)置一個(gè)默認(rèn)導(dǎo)出蒙秒。
function sum(num1, num2) {
return num1 + num2;
}
export { sum as default };
使用重命名語(yǔ)法來(lái)導(dǎo)出默認(rèn)值。
import導(dǎo)入
- 導(dǎo)入一個(gè)（變量宵统、函數(shù)晕讲、類(lèi)）
一個(gè)文件導(dǎo)入的內(nèi)容相當(dāng)于一個(gè)模塊，若是從這個(gè)模塊中導(dǎo)入一個(gè)變量榜田、函數(shù)或類(lèi)益兄，則相當(dāng)于從一個(gè)對(duì)象中進(jìn)行解構(gòu)。
import {sum} from './example.js'
- 導(dǎo)入多個(gè)（變量箭券、函數(shù)净捅、類(lèi)）
import {sum, multiply} from './example.js'
- 導(dǎo)入整個(gè)模塊
將整個(gè)模塊當(dāng)做單一對(duì)象導(dǎo)入，該模塊的所有導(dǎo)出都會(huì)作為對(duì)象的屬性存在,這種導(dǎo)入格式被稱(chēng)為命名空間導(dǎo)入辩块。
import * as example from './example.js';
example.sum(1,2);
example.multiply(2,3);
- 重命名導(dǎo)入
import { sum as add} from './example.js'
- 導(dǎo)入默認(rèn)值
//導(dǎo)出默認(rèn)值
export default function(num1, num2) {
return num1 + num2;
}
//導(dǎo)入默認(rèn)值蛔六，sum 被用于代表目標(biāo)模塊所默認(rèn)導(dǎo)出的函數(shù)，因此無(wú)需使用花括號(hào)
import sum from "./example.js";
//默認(rèn)值和非默認(rèn)值在同一個(gè)文件中導(dǎo)出
export let color = "red";
export default function(num1, num2) {
return num1 + num2;
}
//同時(shí)導(dǎo)入默認(rèn)值和非默認(rèn)值废亭，默認(rèn)名稱(chēng)必須位于非默認(rèn)名稱(chēng)之前
import sum,{color} from "./example.js"
導(dǎo)入的再導(dǎo)出
- 有時(shí)想在當(dāng)前的模塊中將已導(dǎo)入的內(nèi)容再導(dǎo)出去
//寫(xiě)法一
import {sum} from './example.js'
……
export {sum}
//寫(xiě)法二
export {sum} from './example.js'
//重命名的寫(xiě)法
export { sum as add } from "./example.js";
//整個(gè)模塊導(dǎo)出法
export * from "./example.js";
使用限制
export 與 import必須被用在其他語(yǔ)句或表達(dá)式的外部国章，而不能使用在if等代碼塊內(nèi)部。原因之一是模塊語(yǔ)法需要讓 JS 能靜態(tài)判斷需要導(dǎo)出什么豆村，正因?yàn)榇艘菏蓿阒荒茉谀K的頂級(jí)作用域使用 export與import。
3 @providesModule
由ReactNative提供支持
以上兩種方式掌动，到導(dǎo)入時(shí)均使用文件的相對(duì)路徑四啰，若是文件層次較深，則相對(duì)路徑寫(xiě)起來(lái)容易搞錯(cuò)粗恢，讀的時(shí)候也不易辨別柑晒。因此，ReactNative提供了一個(gè)關(guān)鍵字@providesModule眷射，可以直接根據(jù)模塊名稱(chēng)進(jìn)行導(dǎo)入匙赞。
- 導(dǎo)出
在文件的頂部佛掖，嵌套一個(gè)多行注釋?zhuān)袬providesModule放在注釋里。
ps: 帶有@providesModule的多行注釋?zhuān)欢ㄒ俏募牡谝粋€(gè)多行注釋涌庭。
/**
* @providesModule CommonComponent
*/
import {
Dimensions
} from 'react-native';
export default class Common {
...
}
- 導(dǎo)入
// 以前需要這樣
// import CommonComponent from './../Common/CommonComponent'
// 現(xiàn)在可以直接用類(lèi)名
import CommonComponent from 'CommonComponent'
限制
只能在RN這種環(huán)境下用芥被，不能用于前端的項(xiàng)目。
缺陷
- 容易造成命名重復(fù)脾猛，需要開(kāi)發(fā)者規(guī)則命名規(guī)則撕彤，比如添加前綴、后綴猛拴。
- 無(wú)法根據(jù)引入模塊的路徑查找文件，可以根據(jù)模塊名稱(chēng)進(jìn)行全文搜索蚀狰。
原理
RN在打包腳本的時(shí)候會(huì)檢測(cè)該類(lèi)型文件愉昆，并在整個(gè)項(xiàng)目文件查找到對(duì)應(yīng)文件替換成對(duì)應(yīng)的模塊代碼。打出來(lái)的包還是跟導(dǎo)入相對(duì)路徑是一樣的麻蹋。
4 擴(kuò)展
文件路徑
以上的導(dǎo)入方式跛溉，均是使用文件路徑導(dǎo)入文件的，文件路徑的使用方式如下：
- 以 / 為起始扮授，表示從根目錄開(kāi)始解析芳室；
- 以 ./ 為起始堪侯，表示從當(dāng)前目錄開(kāi)始解析模暗；
- 以 ../ 為起始梯嗽，表示從上級(jí)目錄開(kāi)始解析齿尽；
參考：
https://blog.csdn.net/crystal6918/article/details/74906757/
https://segmentfault.com/a/1190000004593603
http://www.reibang.com/p/810abc8792be
