Nếu bạn bắt đầu học javascript trong những năm gần đây, hoặc sử dụng một số font-end frameworks/libraries như React
thì việc sử dụng import
và export
là rất thường xuyên. Cho những bạn không để ý tới cú pháp sử dụng module mới của ES6 thì có thể phân biệt và hiểu được sự khác nhau giữa export by named và export default, nhưng bạn có thể missed cách import bằng alias
và sử dụng chúng như thế nào cho hiệu quả trong project.
Tóm tắt cơ bản về import
và export
Javascript module (có thể ví dụ nó như một file js my-module.js) có thể export các functions, objects, constants cho những module bên ngoài sử dụng. Đây là những quy ước cơ bản khi làm việc với javascript module (code reuse, separation of concerns). Trong các modules, chúng ta có thể exports bằng 2 cách sau:
- Sử dụng
export
riêng cho từng functions, objects. - Sử dụng
export default
cho một function hoặc object.
Khi một module cần sử dụng các functions, objetcs từ một module khác, thì có thể sử dụng một số cách import sau:
- Import tất cả exports vào trong module hiện tại:
import * from "my-module.js"
- Import một số function, object cụ thể:
import { func1, obj2 } from "my-module.js"
- Import function đã export default:
import func from "my-module.js"
- Run global code của module nhưng không import bất cứ thứ gì:
import "my-module.js"
- Import dynamic một module:
import("my-module.js").then((module) => { //...do something })
Hầu hết developers, đặc biệt là React developer thì chúng ta hay sử dụng import một function theo tên và import default. Có một số trường hợp bạn có thể sử dụng import all hay import dynamic (mình sẽ có bài giải thích về những cách import này).
Import alias có thể giải quyết hiệu quả trong trong một số trường hợp, thay vì sử dụng named đã định nghĩa ở exporting module, bạn có thể sử dụng một tên khác tự định nghĩa trong module đang sử dụng export đó.
Vì sao sử dụng import alias lại quan trọng?
Nhiều trường hợp chúng ta import function từ nhiều module khác nhau nhưng nhưng chúng export cùng một named. Lúc đó javascript báo lỗi như sau:
1 2 3 4 5 6 7 | Failed to compile<span class="token punctuation">.</span> <span class="token operator">/</span>Users<span class="token operator">/</span>my_name<span class="token operator">/</span>Project<span class="token operator">/</span>One<span class="token operator">/</span>src<span class="token operator">/</span>pages<span class="token operator">/</span>index<span class="token punctuation">.</span>js SyntaxError<span class="token operator">:</span> <span class="token operator">/</span>Users<span class="token operator">/</span>my_name<span class="token operator">/</span>Project<span class="token operator">/</span>One<span class="token operator">/</span>src<span class="token operator">/</span>pages<span class="token operator">/</span>index<span class="token punctuation">.</span>js<span class="token operator">:</span> Identifier <span class="token string">'Card'</span> has already been <span class="token function">declared</span> <span class="token punctuation">(</span><span class="token number">6</span><span class="token operator">:</span><span class="token number">9</span><span class="token punctuation">)</span> <span class="token number">4</span> <span class="token operator">|</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../components/button'</span> <span class="token number">5</span> <span class="token operator">|</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Card <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../components/card'</span> <span class="token operator">></span> <span class="token number">6</span> <span class="token operator">|</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Card <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-elements'</span> |
Một trong số những trường hợp hay gặp vấn đề này là chúng ta sử dụng import các component của một library bên ngoài.
Cho ví dụ. Sử dụng trực tiếp component library trong page-level của project thông thường sẽ không được recommended, như vâỵ sẽ khó khăn cho việc update và maintain component sau này. Thay vào đó chúng ta thường tạo ra các custom component cho phù hợp với yêu cầu dự án như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token comment">// Card.js in project/src/components/card</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Card <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"third-library"</span> <span class="token keyword">const</span> <span class="token function-variable function">Card</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token comment">// using third-library card </span> <span class="token comment">// custom something for your project needs</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token function-variable function">ListCard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token comment">// like above</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token punctuation">{</span> Card<span class="token punctuation">,</span> ListCard <span class="token punctuation">}</span> <span class="token comment">// ---</span> <span class="token comment">// Index.js in project/src/pages</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Card <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'.../components/card'</span> <span class="token comment">// ... index page code</span> |
Ở ví dụ trên thì chúng ta có thể thấy sẽ báo lỗi không thể compile Card.js bởi vì khai báo bị lỗi (có 2 biến cùng tên Card)
Sử dụng import alias để giải quyết vấn đề
Bây giờ chúng ta sẽ sử dụng cách import alias để giải quyết vấn đề trên, cho phép chúng ta import các component của exporting module có cùng tên.
Khi import một component theo named từ một module:
1 2 3 4 | <span class="token comment">// my-module.js</span> <span class="token comment">// ... code ..</span> <span class="token keyword">export</span> <span class="token punctuation">{</span> Something1<span class="token punctuation">,</span> Something2<span class="token punctuation">}</span> |
Chúng ta có thể sử dụng alias với keyword as
:
1 2 | <span class="token keyword">import</span> <span class="token punctuation">{</span> Something1 <span class="token keyword">as</span> MySomething <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"my-module.js"</span> |
Khi importing một default export:
1 2 3 4 | <span class="token comment">// my-module.js</span> <span class="token comment">// ... code ..</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Something |
Chúng ta có thể sử dụng alias trực tiếp:
1 2 | <span class="token keyword">import</span> MySomething <span class="token keyword">from</span> <span class="token string">"my-module.js"</span> |
Với những ví dụ ở trên, chúng ta có thể sử dụng import alias để giải quyết error compile import Card của bài toán ban đầu:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// Card.js in project/src/components/card</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Card <span class="token keyword">as</span> LibCard <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"third-library"</span> <span class="token keyword">const</span> <span class="token function-variable function">Card</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token comment">// using third-library card </span> <span class="token comment">// custom something for your project needs</span> <span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token function-variable function">ListCard</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token comment">// like above</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token punctuation">{</span> Card<span class="token punctuation">,</span> ListCard <span class="token punctuation">}</span> |
Nếu Button được export default, chúng ta cũng có thể sử dụng alias:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token comment">// Button.js in project/src/components/button</span> <span class="token keyword">import</span> LibButton <span class="token keyword">from</span> <span class="token string">"library-button"</span> <span class="token keyword">const</span> <span class="token function-variable function">MyButton</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token comment">// code</span> <span class="token punctuation">)</span> <span class="token keyword">export</span> <span class="token keyword">default</span> MyButton <span class="token comment">// ---</span> <span class="token comment">// Index.js in project/src/pages</span> <span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'.../components/button/Button.js'</span> <span class="token comment">// ... index page code</span> |
Kết luận
Hy vong các bạn sử dụng hiệu quả import alias trong các projects của mình, ở những bài tiếp theo mình sẽ giải thích về import all và dynamic import, cám ơn mọi người đã theo dõi!