जावास्क्रिप्ट में "निर्यात डिफ़ॉल्ट" क्या है?


570

फ़ाइल: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

मैंने पहले कभी नहीं देखा export default। क्या इसके लिए कोई समतुल्य सामान है export defaultजिसे समझना आसान हो सकता है?



2
exportयहाँ कीवर्ड विवरण । वर्तमान में यह मूल रूप से किसी भी वेब ब्राउज़र द्वारा समर्थित नहीं है।
आरबीटी

3
यह अब सभी ब्राउज़रों में समर्थित है लेकिन IE।
ब्रायन डि पाल्मा

1
बहुत अच्छा जवाब stackoverflow.com/a/36426988/5473170
सूरज जैन

देखो, जवाब के लिए ऊपर ^ देखो; भ्रम के लिए नीचे / देखें। मैंने u da wai दिखाया है
एंड्रयू

जवाबों:


456

यह यहाँ वर्णित ES6 मॉड्यूल प्रणाली का हिस्सा है । उस प्रलेखन में एक सहायक उदाहरण भी है:

यदि कोई मॉड्यूल डिफ़ॉल्ट निर्यात को परिभाषित करता है:

export default function() { console.log("hello!") }

तब आप कर्ली ब्रेसिज़ को छोड़ कर उस डिफ़ॉल्ट निर्यात को आयात कर सकते हैं:

import foo from "foo";
foo(); // hello!

अपडेट: जून 2015 तक, मॉड्यूल सिस्टम and15.2 में परिभाषित किया गया है और exportविशेष रूप से सिंटैक्स को ECMAScript 2015 विनिर्देश के the15.2.3 में परिभाषित किया गया है ।


1
@GeenHenk मुझे लगता है कि उम्मीद की जा रही है क्योंकि ES6 अभी भी एक मसौदा है। मैंने एक अद्यतन लिंक और एक अस्वीकरण प्रदान किया है।
17

7
मैं यह नहीं देखता कि निर्यात डिफ़ॉल्ट फ़ंक्शन () {} निर्यात से अलग कैसे है = फ़ंक्शन () {} ....
अलेक्जेंडर मिल्स

1
उन मामलों के बारे में क्या है जहां यह पसंद है export const Foo = () => {}और फिर फ़ाइल के अंत में export default Fooमैं इसे प्रतिक्रिया उदाहरणों के एक समूह में देखता हूं। दो निर्यातों के साथ क्या है?
फ्लेवर्सस्केप

डिफ़ॉल्ट और नामित निर्यात के साथ एक उदाहरण देखना अच्छा होगा। दूसरे शब्दों में, ऐसा निर्यात जो संतुष्ट करेगाimport foo, { bar, baz } from './foo';
गमकिंस

1
उत्तर देने के लिए धन्यवाद, लेकिन दूसरे उदाहरण में फू का उपयोग थोड़ा अस्पष्ट है; क्या foo है और आपने पहली फ़ाइल को कैसे नाम दिया है; आप कैसे आ सकते हैं import foo from "foo"? क्या कोई ऐसी वस्तु थी जिसे फू ने आयोजित किया था, क्योंकि पहले उदाहरण में आपका निर्यात किया गया फ़ंक्शन अनाम है। @pswg
nosahama

159

export default एक स्क्रिप्ट फ़ाइल से एकल वर्ग, फ़ंक्शन या आदिम निर्यात करने के लिए उपयोग किया जाता है।

निर्यात के रूप में भी लिखा जा सकता है

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

इसका उपयोग इस फ़ंक्शन को किसी अन्य स्क्रिप्ट फ़ाइल में आयात करने के लिए किया जाता है

App.js में कहें , आप कर सकते हैं

import SafeString from './handlebars/safe-string';

थोड़ा निर्यात के बारे में

जैसा कि नाम कहता है, इसका उपयोग स्क्रिप्ट फ़ाइलों या मॉड्यूल से कार्यों, वस्तुओं, कक्षाओं या अभिव्यक्तियों को निर्यात करने के लिए किया जाता है

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

इसे आयात और उपयोग किया जा सकता है

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

या

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

जब निर्यात डिफ़ॉल्ट का उपयोग किया जाता है, तो यह बहुत सरल है। स्क्रिप्ट फाइलें सिर्फ एक चीज का निर्यात करती हैं। cube.js

export default function cube(x) {
  return x * x * x;
};

और App.js के रूप में इस्तेमाल किया

import Cube from 'cube';
console.log(Cube(3)); // 27

78

export default function(){}फ़ंक्शन का कोई नाम नहीं होने पर उपयोग किया जा सकता है। किसी फ़ाइल में केवल एक डिफ़ॉल्ट निर्यात हो सकता है। विकल्प एक नामित निर्यात है।

यह पृष्ठexport default विस्तार से वर्णन करता है और साथ ही साथ मॉड्यूल के बारे में अन्य विवरण जो मुझे बहुत उपयोगी लगा।


14
आप चाहें तो डिफ़ॉल्ट और नामित निर्यात का उपयोग कर सकते हैं।
बरगी

@Greg गम पृष्ठ पुराना है। यह
expljs.com/es6/ch_modules.html पर

@rajakvk, True, लेकिन मूल पृष्ठ को शुरू करने वालों के लिए बहुत अधिक पृष्ठभूमि जानकारी है।
ग्रेग गम

7
यह उत्तर स्वीकार किए गए से बेहतर है क्योंकि यह बताता है कि defaultमेरे लिए क्या मतलब है और मेरे लिए इस शब्द के बारे में सवाल था।
डेरियस सिकोरस्की

1
@DariuszSikorski स्वीकृत उत्तर बताता है कि defaultइसका क्या अर्थ है, यह कि डिफ़ॉल्ट निर्यात को ब्रेसिज़ का उपयोग किए बिना आयात किया जा सकता है। यह उत्तर वास्तव में बहुत गलत है क्योंकि यह कहता है कि आप केवल defaultतब उपयोग कर सकते हैं जब किसी फ़ाइल में केवल एक निर्यात होता है, जो बिल्कुल भी सच नहीं है। आपके पास एक ही फ़ाइल में कई निर्यात हो सकते हैं, लेकिन निश्चित रूप से उनमें से केवल 1 को ही सेट किया जा सकता है default
realUser404

39

मैं यह पोस्ट इसलिए लिख रहा हूं क्योंकि (मुझे लगता है कि मैं थका हुआ हूं) मैं न तो काफी समझा और न ही एमडीएन, न ही अन्य लोगों का वर्णन करता हूं और किसी चीज को समझने का सबसे अच्छा तरीका यह है कि मैं इसे अन्य लोगों को सिखाऊं। यह सिर्फ मैं सवाल का एक सरल जवाब नहीं दिख रहा है।

जावास्क्रिप्ट में "निर्यात डिफ़ॉल्ट" क्या है?

डिफ़ॉल्ट निर्यात में आयात का नामकरण पूरी तरह से स्वतंत्र है और हम अपनी पसंद के किसी भी नाम का उपयोग कर सकते हैं।

मैं एक सरल उदाहरण के साथ इस लाइन का उदाहरण दूंगा।

मान लें कि हमारे पास 3 मॉड्यूल हैं और एक index.html:

  • modul.js
  • modul2.js
  • modul3.js
  • index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

आउटपुट है:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

तो अब स्पष्टीकरण है :

यदि आप किसी मॉड्यूल के लिए किसी एक चीज को निर्यात करना चाहते हैं तो 'एक्सपोर्ट डिफॉल्ट' का उपयोग किया जाता है।

तो बात यह है कि महत्वपूर्ण है "आयात है blabla './modul3.js' से" - हम बजाय कह सकते हैं:

"इम्पोर्ट पैमलैंडर्सन फ्रॉम './modul3.js" और फिर पैमलैंडरसन (); जब हम 'डिफॉल्ट डिफॉल्ट' का उपयोग करते हैं तो यह ठीक काम करेगा और मूल रूप से यह यह है - यह हमें डिफ़ॉल्ट रूप से जो कुछ भी पसंद है उसे नाम देने की अनुमति देता है


Ps यदि आप उदाहरण का परीक्षण करना चाहते हैं - पहले फाइलें बनाएं, फिर ब्राउज़र में CORS की अनुमति दें -> यदि आप ब्राउज़र के url में फ़ायरफ़ॉक्स प्रकार का उपयोग कर रहे हैं: के बारे में: config -> खोज के लिए "privacy.file_unique_origin ->> बदलें इसे "झूठा" -> खुले index.html -> कंसोल को खोलने के लिए F12 दबाएं और आउटपुट देखें -> आनंद लें और डिफ़ॉल्ट रूप से कॉर्स सेटिंग्स वापस करने के लिए मत भूलना।

Ps2 मूर्ख चर नामकरण के लिए क्षमा करें

अधिक जानकारी @ link2medium , link2mdn1 , link2mdn2


4
इसे सर्वश्रेष्ठ उत्तर के रूप में स्वीकार किया जाना चाहिए लेकिन मैंने वह किया जो मैं अपने उत्थान का उपयोग कर सकता था।
जरमोस

1
आपका बहुत बहुत धन्यवाद!
मिलाएं

1
यह स्वीकार किए जाते हैं जवाब होना चाहिए उठाया-हाथ
nosahama

16

जैसा कि इस MDN पेज पर बताया गया है

दो अलग-अलग प्रकार के निर्यात हैं, नाम और डिफ़ॉल्ट। प्रति मॉड्यूल कई नामित निर्यात हो सकते हैं लेकिन केवल एक डिफ़ॉल्ट निर्यात [...] नामांकित निर्यात कई मानों को निर्यात करने के लिए उपयोगी होते हैं। आयात के दौरान, संबंधित वस्तु के समान नाम का उपयोग करना अनिवार्य है। लेकिन डिफ़ॉल्ट निर्यात को किसी भी नाम से आयात किया जा सकता है

उदाहरण के लिए:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

6

मेरे उत्पीड़न में डिफ़ॉल्ट निर्यात के बारे में महत्वपूर्ण है, कि इसे किसी भी नाम से आयात किया जा सकता है!

अगर वहाँ फ़ाइल foo.js है जो डिफ़ॉल्ट निर्यात करता है:

export default function foo(){}

इसका उपयोग करके bar.js में आयात किया जा सकता है:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import


0

दो अलग-अलग प्रकार के निर्यात हैं, नाम और डिफ़ॉल्ट । आपके पास प्रति मॉड्यूल कई नामित निर्यात हो सकते हैं लेकिन केवल एक डिफ़ॉल्ट निर्यात है। प्रत्येक प्रकार उपरोक्त में से एक से मेल खाता है। स्रोत: एमडीएन

जिसका नाम एक्सपोर्ट है

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

डिफ़ॉल्ट निर्यात

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// आप डिफ़ॉल्ट आयात के लिए एक अलग नाम का उपयोग कर सकते हैं

import Foo from 'path-to-file' // this will assign any default export to Foo.

-3

निर्यात डिफ़ॉल्ट का उपयोग एकल वर्ग, फ़ंक्शन या आदिम निर्यात करने के लिए किया जाता है।

निर्यात डिफ़ॉल्ट फ़ंक्शन () {} का उपयोग तब किया जा सकता है जब फ़ंक्शन का कोई नाम न हो। किसी फ़ाइल में केवल एक डिफ़ॉल्ट निर्यात हो सकता है।

अधिक पढ़ें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.