Modern JavaScript Development Flashcards
Modern JavaScript Development
- Ngày xưa thường viết code Javascript của mình vào một tập lệnh lớn hoặc có thể là nhiều tập lệnh
- Nhưng ngày nay , chúng tôi chia dự án của mình thành nhiều modul và modul có thể chia sẻ dữ liệu giữa chúng
=> làm cho code có tổ chức và dễ bảo trì
Bước đầu tiên chúng tôi sẽ gói tất cả các mô đun của chúng tôi lại với nhau thành một tệp lớn .
- Tốt cho hiệu suất và những trình duyệt cũ sẽ không đọc được module
Bước 2 : Transpiling / Polyfiling chuyển thành mã ES5 để các trình duyệt cũ không bị hỏng
An Overview of Modules in JavaScript
Module là một đoạn mã có thể tái sử dụng , gói gọn các chi tiết triển khai .
- là một tệp độc lập
Export ra module thì sẽ được gọi là API , nơi chúng ta có thể hiện thị một API công khai cho các mã khác sử dụng
- Compose software
- Isolate components
- Abstract Code : Triển khai các low-level code
- Tạo thành code có tổ chức hơn
- Dễ dàng sử dụng lại cũng một mà trong một dự án và thậm chí nhiều dự án
How ES6 modules are imported
Các mô-đun được nhập đồng bộ
Có thể thực hiện được nhờ vào các thao tác nhập cấp cao nhất (“tĩnh”), giúp cho việc nhập được biết trước khi thực hiện
Điều này làm cho việc đóng gói và loại bỏ mã chết có thể thực hiện được
Exporting and Importing in ES6 Modules
Import không phải là bản sao của Export !!!
Chúng giống như một Live Connect , có nghĩa trỏ đến cùng một đối tượng
// Importing module
// import { addToCart, totalPrice as price, tq } from ‘./shoppingCart.js’;
// addToCart(‘box’, 3);
// console.log(price, tq);
Top-Level await (ES2022)
- Chúng ta có thể sử dụng từ khóa await bên ngoài một hàm async , mà chúng ta gọi là Top-Level await
- Sẽ khiến code của chúng ta bị blocking
- Nó không chỉ block ở module chứa nó , nó còn block cả module nhập nó
Declarative and IMPERATIVE JavaScript Code
IMPERATIVE:
Lập trình viên giải thích “CÁCH LÀM VIỆC”
Chúng tôi giải thích cho máy tính từng bước nó phải tuân theo để đạt được kết quả
Ví dụ: Công thức từng bước làm bánh
DECLARATIVE
Lập trình viên bảo “làm CÁI GÌ”
Chúng tôi chỉ đơn giản mô tả cách máy tính sẽ đạt được kết quả
CÁCH (hướng dẫn từng bước) được trừu tượng hóa
Ví dụ: Miêu tả một chiếc bánh
FUNCTIONAL PROGRAMMING PRINCIPLES
Mô hình lập trình khai báo
Dựa trên ý tưởng viết phần mềm bằng cách kết hợp nhiều chức năng thuần túy, tránh tác dụng phụ và làm biến đổi dữ liệu
Tác dụng phụ: Sửa đổi (đột biến) bất kỳ dữ liệu nào bên ngoài hàm (thay đổi các biến bên ngoài, ghi vào bảng điều khiển, ghi vào DOM, v.v.)
Chức năng thuần túy: Chức năng không có tác dụng phụ. Không phụ thuộc vào các biến bên ngoài. Với cùng một đầu vào, luôn trả về cùng một đầu ra.
Tính bất biến: Trạng thái (dữ liệu) không bao giờ được sửa đổi! Thay vào đó, trạng thái được sao chép và bản sao bị thay đổi và trả về.
Hàm không tinh khiết là gì
Là hàm thao túng và thay đổi đối tượng nằm bên ngoài nó
const addExpense = function (sate, limits, value, description, user = ‘jonas’) {
const cleanUser = user.toLowerCase();
return value <= getLimit(cleanUser)
? […sate, { value: -value, description, user: cleanUser }]
: […sate];
};
const newbudget1 = addExpense(budget, spendingLimits, 10, ‘Pizza 🍕’);