1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
translation_of: Web/JavaScript/Reference/Statements/export
---
<div>{{jsSidebar("Statements")}}</div>
<p><strong><code>export</code></strong> ifadesi JavaScript modülleri oluştururken fonksiyonların, nesnelerin ve temel değerlerin dışarı aktarılmasını sağlayarak, diğer programlar tarafından {{jsxref("Statements/import", "import")}} ifadesiyle kullanılmasını sağlar.</p>
<div class="note">
<p>Bu özellik şu an için yerel olarak sadece Safari'de uygulanmıştır. <a href="https://github.com/google/traceur-compiler">Traceur Compiler</a>, <a href="http://babeljs.io/">Babel</a> veya <a href="https://github.com/rollup/rollup">Rollup</a> gibi bir çok transpiler tarafından da uygulanmaktadır.</p>
</div>
<h2 id="Sözdizim">Sözdizim</h2>
<pre class="syntaxbox">export { <em>isim<var>1</var></em>, <em>isim</em><var>2</var>, …, <em>isim</em><var>N</var> };
export { <var>degisken1</var> as <var>isim1</var>, <var>degisken2</var> as <var>isim2</var>, …, <var>isimN</var> };
export let <var>isim1</var>, <var>isim2</var>, …, <var>isimN</var>; // ayrıca var, function
export let <var>isim1</var> = …, <var>isim2</var> = …, …, <var>isimN</var>; // ayrıca var, const
export default <em>ifade</em>;
export default function (…) { … } // ayrıca class, function*
export default function isim1(…) { … } // ayrıca class, function*
export { <var>isim1</var> as default, … };
export * from …;
export { <em>isim</em><var>1</var>, <em>isim</em><var>2</var>, …, <em>isim</em><var>N</var> } from …;
export { <var>import1</var> as <var>isim1</var>, <var>import2</var> as <var>isim2</var>, …, <var>isimN</var> } from …;</pre>
<dl>
<dt><code>isimN</code></dt>
<dd>Dışa aktarılacak belirleyici (böylece {{jsxref("Statements/import", "import")}} kullanılarak diğer programda içe aktarılabilir).</dd>
</dl>
<h2 id="Açıklama">Açıklama</h2>
<p>İki çeşit dışa aktarım vardır. Her biri aşağıdaki sözdizimlerden birine karşılık gelmektedir:</p>
<ul>
<li>İsimlendirilmiş dışa aktarım:
<pre class="brush: js">// önceden tanımlı bir fonksiyonu dışa aktarır
export { birFonksiyon };
// bir sabiti dışa aktarır
export const karekok = Math.sqrt(2);</pre>
</li>
<li>Varsayılan dışa aktarım (fonksiyon):
<pre class="brush: js">export default function() {} </pre>
</li>
<li>Varsayılan dışa aktarım (sınıf):
<pre class="brush: js">export default class {} </pre>
</li>
</ul>
<p>İsimlendirilmiş dışa aktarımlar birden fazla değeri dışarı aktarmak için kullanışlıdır. İçe aktarım sırasında, aynı isimle ve buna karşılık gelen değeri ile kullanılabilecektir.</p>
<p>Varsayılan dışa aktarımla ilgili olarak, her bir modül için sadece bir adet varsayılan dışa aktarım vardır. Varsayılan dışa aktarım bir fonksiyon, bir sınıf, bir nesne veya başka bir şey olabilir. Dışa aktarımı en basit olacağından dolayı bu değer dışa aktarılan "ana" değer olarak nitelendirilecektir.</p>
<p>Varsayılanların dışa aktarımı: Aşağıdaki sözdizimi varsayılan dışa aktarımı içe aktaran modülde gerçekleşmeyecektir:</p>
<pre>export * from …;</pre>
<p>Eğer varsayılanı dışa aktarmak isterseniz, aşağıdakini yazınız:</p>
<pre>import mod from "mod";
export default mod;</pre>
<h2 id="Örnekler">Örnekler</h2>
<h3 id="İsimlendirilmiş_dışa_aktarımları_kullanmak">İsimlendirilmiş dışa aktarımları kullanmak</h3>
<p>Modül içerisinde, aşağıdaki kodu kullanabiliriz:</p>
<pre class="brush: js">// modül "benim-modulum.js"
function kup(x) {
return x * x * x;
}
const deger = Math.PI + Math.SQRT2;
export { kup, deger };
</pre>
<p>Bu yolla, başka bir kod içerisinde (karşılaştır <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code>), şunu yapabiliriz:</p>
<pre class="brush: js">import { kup, deger } from 'benim-modulum';
console.log(kup(3)); // 27
console.log(deger); // 4.555806215962888</pre>
<h3 id="Varsayılanın_dışa_aktarımının_kullanılması">Varsayılanın dışa aktarımının kullanılması</h3>
<p>Eğer modülümüz için tek bir değeri dışa aktarmak istiyorsak veya bir son değere sahip olmak istiyorsak, varsayılan dışa aktarımı kullanabiliriz:</p>
<pre class="brush: js">// modül "benim-modulum.js"
export default function kup(x) {
return x * x * x;
}
</pre>
<p>Sonra, başka bir kod içerisinde, varsayılan dışa aktarımı içe aktarmak anlaşılır olacaktır:</p>
<pre class="brush: js">import kup from 'benim-modulum';
console.log(kup(3)); // 27
</pre>
<p>Dikkate alınız ki <code>var</code>, <code>let</code> veya <code>const</code> anahtar kelimelerini <code>export default</code> ile kullanamazsınız.</p>
<h2 id="Spesifikasyonlar">Spesifikasyonlar</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spesifikasyon</th>
<th scope="col">Durum</th>
<th scope="col">Açıklama</th>
</tr>
<tr>
<td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>İlk tanım.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Tarayıcı_uyumluluğu">Tarayıcı uyumluluğu</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Özellik</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Temel destek</td>
<td>61 (60 w/ flag)</td>
<td>{{CompatNo}} (54 w/ flag)</td>
<td>{{CompatNo}} (15 w/flag)</td>
<td>{{CompatNo}}</td>
<td>10.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Özellik</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Temel destek</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>10.3</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Ayrıca_bakınız">Ayrıca bakınız</h2>
<ul>
<li>{{jsxref("Statements/import", "import")}}</li>
<li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li>
<li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
</ul>
|
