ES2020 - Dynamic import
TIL
770
White

anonystick.com viết ngày 13/07/2020

Bài viết gốc từ https://anonystick.com

ES2020 - Dynamic import

ES2020 javascript đã cung cấp cho developers thêm nhiều chức năng như Optional Chaining, Nullish coalescing Operator... Và trong đó có một tính năng tuyệt vời đó là Dynamic Imports. Và do đó, trong bài viết này, tipjs sẽ giúp bạn hiểu và khi nào sử dụng về Dynamic import trong javascript. Ngoài ra, các bạn nên xem thêm về những tính năng javascript trên ES2020.

Static Import()

Đầu tiên chúng tôi nói về khái niệm import() được giới thiệu trong ES2015 (hay còn gọi là ES6). Cho phép chúng ta sử dụng những module như chúng ta từng viết dưới Nodejs. Với cú pháp sau:

<script type="module" src="main.mjs"></script>

Viêch phát triển này rất hay, khi chúng ta có thể sử dụng import and export trên browser, một cách thuận lợi. Nhưng ở đâu đó vẫn còn một số người khó tính như tôi chẳng hạn, thì việc này còn có một nhược điểm đó là, với sự khai báo như thế này, thì việc module luôn được load khi user tải lại trang.

Nghĩa là, 10 users sử dụng web thì chỉ có 2 users sử dụng chức năng của module này thôi. Nhưng có đến 10 lần load. Đó là một sự lãng phí và làm chậm sự trải nghiệm của người dùng. Chính vì vậy ở ES2020 đã giới thiệu chức năng Dynamic import().

Dynamic import()

Để nói cho các bạn hiểu sâu hơn cho nên chúng ta sẽ đi vào một ví dụ cụ thể mà tôi đã soạn ra, chính vì vậy các bạn hãy tập trung vào ví dụ này, chỉ cần hiểu ví dụ này thì bạn đã nắm về chức năng Dynamic import rồi. Tôi sẽ tạo một file add.js khai báo module như sau

const add = (a, b) => a + b;

export default add;

Sau đó, tôi viết tiếp file index.html và sử dụng module như sau

import module ES6

Trước đây, chúng ta sử dụng es2015 thì trên file index.html thì chúng ta sẽ thường sử dụng module như thế này.

<html>
  <head>
    <title>ES2020 features</title>
  </head>
  <body>
    <input type="text" id="num1"> + <input type="text" id="num2"> <button id="equal"> = </button> <input type="text" id="num3">

    <script type="module">
        //nếu copy vui lòng để nguồn: anonystick.com -> tks
        //Không thể load sau khi click button =, mà phải load trước.... 
        import add from './js/add.js';
        document.getElementById('equal').addEventListener('click', (el) => {

            document.getElementById('num3').value = add(+document.getElementById('num1').value, +document.getElementById('num2').value) 
        })
    </script>
  </body>
</html>

Bạn thấy đấy, trên kia tôi có nói đến là 10 users vào, thì chúng ta sẽ load 10 lần file ./js/add.js. Nhưng thật sử chỉ có 2 users sử dụng mà thôi. Thật đáng tiếc phải không? Code trên thì tôi không cần phải giải thích nguyên lý hoạt động nữa, vì nó quá basic rồi.

import module ES2020

Nhưng đối với ES2020 javascript thì giờ đây chúng ta sẽ sử dụng dynamic import file ./js/add.js thuỳ thích. Điều đó có nghĩa là chỉ khi user nào đó click vào chức năng tính toán thì lúc đó ./js/add.js mới thực sự load. Hãy xem code dưới đây:

<!DOCTYPE html>
<html>
  <head>
    <title>ES2020 features</title>
  </head>
  <body>

    <input type="text" id="num1"> + <input type="text" id="num2"> <button id="equal"> = </button> <input type="text" id="num3">

    <script>
        document.getElementById('equal').addEventListener('click', (el) => {
            //nếu copy vui lòng để nguồn: anonystick.com -> tks
            // co thể load sau khi user click, rất thoải mái cho nhứng trường hợp như dowload
            import('./js/add.js')
            .then(module => {
                document.getElementById('num3').value = module.default(+document.getElementById('num1').value, +document.getElementById('num2').value) 

            }) //returns 11
            .catch(error => console.log(error));
        })
  </script>
  </body>
</html>

Nhìn vào code trên, bạn đã thấy, sau khi event click được active thì lúc đó import('./js/add.js') sẽ được load mà không cần phải tải ngay lúc đầu. Như vậy là bạn đã hiểu... Tôi hỏi lại bạn đã hiểu thực sự về ES2020 Dynamic Import???

Chưa đâu, nếu bạn không tinh ý thì sẽ bỏ qua một chi tiết mà những người nhiều kinh nghiệm sẽ đặt ngay câu hỏi là : "Như đoạn code trên thì mỗi lần user click thì sẽ import() lại file './js/add.js'??? Có đúng không? ". Một câu hỏi rất hay, và câu trả lời đó là:

Không, sẽ không tải lại, nó chỉ tải một lần duy nhất, khi event click được active đầu tiên mà thôi. Ở lần thứ 2 , 3 ...n thì sẽ không phải tải lại nữa. Không tin ư? Hãy thử copy code về chạy xem nào!!!

Khi nào nên sử dụng dynamic import ES2020

Câu hỏi này tuỳ thuộc vào kỹ năng, kinh nghiệm của mỗi người, và có thể theo hoàn cảnh khác nhau. Nhưng ở đây có mẫu số chung cho việc đó. Như đoạn code trên, thì sử dụng khi cần được tính toán trong việc vay ngân hàng mua xe chằng hạn. Bạn có thể thấy đa số những web bán xe đều có chức năng "Tính toán tiền mua xe lăn bánh", thì nên sử dụng chức năng này. Bởi vì ít ai dùng chức năng đó.

Thứ 2 đó là tôi thấy nhiều website đề cập đến việc export file ra excels. Thì cũng nên sử dụng chức năng dynamic import này. Vâng vâng và ...

Tóm lại

Nói chúng, bài viết này đã quá đủ để bất kỳ bạn nào hiểu và sử dụng tính năng dynamic import ES2020 này rồi. Và nó tuỳ thuộc vào kỹ năng, và hoàn cảnh của mỗi devjs để phát huy tính sáng tạo. Làm nhanh hệ thống, giúp người dùng trả nghiệm tốt nhất ứng dụng của mình.

Ngoài ra, các bạn nên xem thêm về những tính năng javascript trên ES2020. Nếu bạn thấy hay có thể copy về web của bạn, nhưng hãy để lại dấu răng của tôi.

Bài viết gốc từ https://anonystick.com

anonystick.com 13-07-2020

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

anonystick.com

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
0 5
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 2 năm trước
0 5
White
4 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết gần 2 năm trước
4 0
White
24 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết 4 năm trước
24 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!