Javascript'te "varsayılan dışa aktarma" nedir?

Dosya: SafeString.js

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

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

export default SafeString;

Daha export defaultönce hiç görmedim . export defaultBunun anlaşılması daha kolay olabilecek eşdeğer şeyler var mı?

Burada açıklanan ES6 modül sisteminin bir parçasıdır . Bu dokümanda yararlı bir örnek var:

Bir modül varsayılan bir dışa aktarma tanımlarsa:

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

kıvırcık parantezleri atlayarak bu varsayılan dışa aktarmayı içe aktarabilirsiniz:

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

Güncelleme: Haziran 2015 itibarıyla modül sistemi §15.2'de ve exportözellikle sözdizimi ECMAScript 2015 şartnamesinin §15.2.3'ünde tanımlanmıştır .

export default bir komut dosyasından tek bir sınıf, işlev veya ilkel dışa aktarmak için kullanılır.

İhracat ayrıca şu şekilde de yazılabilir:

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

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

Bu, bu işlevi başka bir komut dosyasına almak için kullanılır

App.js'de söyleyin ,

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

İhracat hakkında biraz

Adından da anlaşılacağı gibi, komut dosyaları veya modüllerinden işlevleri, nesneleri, sınıfları veya ifadeleri dışa aktarmak için kullanılır

Utiliites.js

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

Bu, şu şekilde içe aktarılabilir ve kullanılabilir:

App.js

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

Veya

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

Dışa aktarma varsayılanı kullanıldığında, bu çok daha basittir. Komut dosyaları yalnızca bir şeyi dışa aktarır. cube.js

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

ve App.js olarak kullanılır

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

export default function(){}işlevin adı olmadığında kullanılabilir. Bir dosyada yalnızca bir varsayılan dışa aktarma olabilir. Alternatif, adlandırılmış bir dışa aktarmadır.

Bu sayfada , export defaultçok yararlı bulduğum modüller hakkındaki ayrıntılar ve diğer ayrıntılar açıklanmaktadır .

Bu yazıyı yazıyorum çünkü (yorgun olduğumu varsayıyorum) ne tam olarak anlamadım ne de MDN, ne diğer insanların açıklaması ve bir şeyi anlamanın en iyi yolu onu diğer insanlara öğretmektir. Sadece sorunun basit bir cevabını göremiyorum.

Javascript'te "varsayılan dışa aktarma" nedir?

Varsayılan olarak dışa aktarma içe aktarma adlandırma tamamen bağımsızdır ve istediğimiz herhangi bir adı kullanabiliriz.

Bu çizgiyi basit bir örnekle açıklayacağım.

Diyelim ki 3 modülümüz ve bir index.html var:

• 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>

Çıktı:

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!

Yani daha uzun açıklama :

Bir modül için tek bir şeyi dışa aktarmak istiyorsanız 'dışa aktarma varsayılanı' kullanılır.

Yani önemli olan şey '' ./modul3.js '' den blabla ithal et '' diyebiliriz;

" pamelanderson'u './modul3.js'den içe aktarın " ve ardından pamelanderson (); Bu, 'varsayılanı dışa aktar' seçeneğini kullandığımızda iyi çalışır ve temelde budur - varsayılan olduğunda istediğimiz şeyi adlandırmamıza izin verir .

Ps Örneği test etmek istiyorsanız - önce dosyaları oluşturun, ardından tarayıcıda CORS'lara izin verin -> tarayıcının url'sinde firefox türü kullanıyorsanız: about: config -> "privacy.file_unique_origin" için arama yapın -> değiştir konsolu açmak ve çıktıyı görmek için F12 tuşuna basın.

Ps2 Aptal değişken adlandırma için özür dilerim

Daha fazla bilgi @ link2medium , link2mdn1 , link2mdn2

Bu MDN sayfasında açıklandığı gibi

İki farklı dışa aktarma türü vardır, adlandırılmış ve varsayılan. Modül başına birden çok adlandırılmış dışa aktarma yapabilirsiniz, ancak yalnızca bir varsayılan dışa aktarma [...] Adlandırılmış dışa aktarmalar birkaç değeri dışa aktarmak için kullanışlıdır. İçe aktarma sırasında, karşılık gelen nesnenin aynı adını kullanmak zorunludur, ancak varsayılan bir dışa aktarma herhangi bir adla içe aktarılabilir

Örneğin:

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

Benim düşünceme göre, varsayılan ihracat ile ilgili önemli , HERHANGİ bir isim ile ithal edilebilir olmasıdır!

varsayılan olarak dışa aktarılan foo.js dosyası varsa:

export default function foo(){}

kullanarak bar.js içine alınabilir:

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

İki farklı dışa aktarma türü vardır, adlandırılmış ve varsayılan . Modül başına birden çok adlandırılmış dışa aktarma yapabilirsiniz, ancak yalnızca bir varsayılan dışa aktarma yapabilirsiniz. Her tip yukarıdakilerden birine karşılık gelir. Kaynak: MDN

Adlandırılmış Dışa Aktarma

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'

Varsayılan Dışa Aktarma

export default class DefaultExport1 { }

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

// varsayılan içe aktarma için farklı bir ad kullanabilirsiniz

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

dışa aktarma varsayılanı tek bir sınıfı, işlevi veya ilkeli dışa aktarmak için kullanılır.

export default function () {}, işlevin adı olmadığında kullanılabilir. Bir dosyada yalnızca bir varsayılan dışa aktarma olabilir.

daha fazla oku