Đôi khi, bạn chỉ muốn học một cái gì đó một cách nhanh chóng. Và đọc qua các bài viết toàn diện mô tả các khái niệm JavaScript cụ thể có thể gây ra tình trạng quá tải về nhận thức. Mục đích của bài viết này là mô tả một số khái niệm phổ biến đơn giản nhất có thể với:
- Mô tả ngắn
- Tại sao nó có liên quan
- Một ví dụ mã thực tế (ES5/ES6 với các chức năng mũi tên).
Bạn nên có kiến thức chung khi làm việc với hệ sinh thái JS. Bạn sẽ nhận thức được cách mọi thứ hoạt động và tương tác, đồng thời dễ dàng học hỏi và cải thiện mọi thứ nhanh hơn.
Các khái niệm JS này được chọn dựa trên mức độ phổ biến và mức độ liên quan mà tôi đã thấy trong cộng đồng. Nếu bạn muốn tìm hiểu một khái niệm không có trong bài viết này, hãy để lại bình luận và tôi sẽ bổ sung nó trong thời gian sắp tới.
Nếu bạn muốn trở thành một nhà phát triển web giỏi hơn, bắt đầu công việc kinh doanh của riêng mình, dạy người khác hoặc chỉ đơn giản là cải thiện kỹ năng phát triển của mình, tôi sẽ đăng các mẹo và thủ thuật hàng tuần về các ngôn ngữ phát triển web mới nhất.
Nâng cao kỹ năng JavaScript của bạn bằng các phương pháp JS hữu ích này.
Các khái niệm JS chúng ta sẽ xem xét:
- Phạm vi
- IIFE
- MVC
- Không đồng bộ/chờ đợi
- Khép kín
- Gọi lại
1 Phạm vi
Phạm vi chỉ đơn giản là một hộp có ranh giới. Có hai loại ranh giới trong JS: cục bộ và toàn cầu, còn được gọi là bên trong và bên ngoài.
Cục bộ có nghĩa là bạn có quyền truy cập vào mọi thứ bên trong ranh giới (bên trong hộp), trong khi toàn cầu là mọi thứ bên ngoài ranh giới (bên ngoài hộp).
Những thuật ngữ này được sử dụng rất nhiều khi chúng ta nói về các lớp, hàm và phương thức. Nó cung cấp khả năng xác định đâu là cái có thể truy cập (hiển thị) đối với ngữ cảnh hiện tại.
Tại sao điều này có liên quan?
- Tách logic
- Thu hẹp tiêu điểm
- Cải thiện khả năng đọc
Ví dụ
Giả sử bạn tạo một hàm và muốn truy cập một biến được xác định trong phạm vi toàn cầu.
ES5
ES6
Như thể hiện trong ví dụ trên, chức năng showName() có quyền truy cập vào mọi thứ được xác định trong ranh giới của nó (cục bộ) và cả bên ngoài (toàn cầu). Hãy nhớ rằng, phạm vi toàn cầu không thể truy cập các biến được xác định trong phạm vi cục bộ vì nó được bao bọc từ thế giới bên ngoài, trừ khi bạn trả lại nó.
2. IIFE
IIFE (Biểu thức hàm được gọi ngay lập tức), như tên gọi có nghĩa là hàm này được “gọi ngay lập tức” khi nó được tạo. Trước khi ES6++ trình bày các lớp/phương thức để hỗ trợ mô hình lập trình hướng đối tượng (OOP), cách phổ biến là bắt chước IIFE như một tên lớp và gọi các hàm như các phương thức được bao bọc trong một return loại.
Tại sao điều này có liên quan?
- Ngay lập tức thực thi mã
- Tránh phạm vi toàn cầu khỏi bị ô nhiễm
- Hỗ trợ cấu trúc không đồng bộ
- Cải thiện khả năng đọc (một số có thể lập luận ngược lại)
Ví dụ
Công nghệ đã thay đổi khá nhiều trong vài năm qua. Bây giờ, ví dụ, bạn có khả năng thay đổi màu sắc của hầu hết mọi thứ — chẳng hạn như ô tô của bạn. Hãy xem một ví dụ mã.
ES5
ES6
Trong ví dụ trên, chúng tôi đã gói hai chức năng trong returnloại (changeColorToRed() & changeColorToBlack()). Điều này cho phép chúng tôi truy cập nhiều chức năng và gọi phương thức chúng tôi muốn.
Nói tóm lại, trước tiên chúng ta gọi car (biểu thức hàm) để truy cập nội dung bên trong. Sau đó chúng ta có thể sử dụng . ký hiệu để gọi hàm được xác định trong return loại. Cách tiếp cận này tương tự như cấu trúc có các lớp/phương thức mà chúng ta gọi tên lớp trước khi chúng ta có thể gọi tên phương thức. Bằng cách này, bạn có thể viết mã sạch, có thể bảo trì và tái sử dụng.
3.MVC
Model-view-controller là một khung thiết kế (*không phải ngôn ngữ lập trình) cho phép chúng ta tách hành vi thành một cấu trúc thực tế trong thế giới thực. Gần 85% ứng dụng dựa trên web ngày nay có mẫu cơ bản này theo cách này hay cách khác. Ngoài kia còn có các loại khung thiết kế khác, nhưng đây là kiểu cơ bản và dễ hiểu nhất cho đến nay.
Tại sao điều này có liên quan?
- Khả năng mở rộng và bảo trì dài hạn
- Dễ dàng cải thiện, cập nhật và gỡ lỗi (dựa trên kinh nghiệm cá nhân)
- Dễ dàng thiết lập
- Cung cấp cấu trúc và tổng quan
Ví dụ
Hãy xem một ví dụ ngắn về khung thiết kế MVC.
ES5
ES6
Như thể hiện trong ví dụ trên, chúng ta thường chia view, modelvà controller trong các thư mục/tệp riêng biệt theo các phương pháp hay nhất, nhưng chỉ để minh họa khái niệm này, chúng tôi đã đặt tất cả vào một tệp. Mục tiêu của khung thiết kế là đơn giản hóa quy trình phát triển và hỗ trợ môi trường hợp tác bền vững.
4. Không đồng bộ/đang chờ
Dừng lại và đợi cho đến khi một cái gì đó được giải quyết. Nó cung cấp một cách để duy trì quá trình xử lý không đồng bộ theo kiểu đồng bộ hơn. Chẳng hạn, bạn cần kiểm tra xem mật khẩu của người dùng có đúng không (so với mật khẩu tồn tại trong máy chủ) trước khi cho phép người dùng vào hệ thống. Hoặc có thể bạn đã thực hiện yêu cầu API REST và bạn muốn dữ liệu được tải đầy đủ trước khi đẩy nó vào chế độ xem.
Tại sao điều này có liên quan?
- Khả năng đồng bộ
- Điều khiển hành vi
- Giảm “địa ngục gọi lại”
Ví dụ
Giả sử bạn muốn nhận tất cả người dùng từ API còn lại và hiển thị kết quả ở định dạng JSON.
ES5
ES6
Để sử dụng awaitchúng ta phải bọc nó bên trong một async chức năng thông báo cho JS rằng chúng tôi đang làm việc với các lời hứa. Như thể hiện trong ví dụ, chúng tôi (a) chờ đợi hai điều: response và users. Trước khi chúng tôi có thể chuyển đổi response sang định dạng JSON, chúng tôi cần đảm bảo rằng chúng tôi có response đã tìm nạp, nếu không chúng ta có thể kết thúc việc chuyển đổi một response điều đó vẫn chưa có, điều này rất có thể sẽ gây ra lỗi.
5. Đóng cửa
Một bao đóng chỉ đơn giản là một chức năng bên trong một chức năng khác. Nó được sử dụng khi bạn muốn mở rộng hành vi chẳng hạn như truyền biến, phương thức hoặc mảng từ hàm bên ngoài sang hàm bên trong. Chúng ta cũng có thể truy cập ngữ cảnh được xác định trong hàm bên ngoài từ hàm bên trong, nhưng không thể truy cập theo cách khác (hãy nhớ các nguyên tắc phạm vi mà chúng ta đã nói ở trên).
Tại sao điều này có liên quan?
- Mở rộng hành vi
- Hữu ích khi làm việc với các sự kiện
Ví dụ
Giả sử bạn làm việc với tư cách là kỹ sư phát triển cho Volvo và họ cần một chức năng đơn giản là in tên ô tô.
ES5
ES6
Chức năng showName() là một Closure, vì nó mở rộng hành vi của hàm showInfo()và cũng có quyền truy cập vào biến carType.
6. Gọi lại
Gọi lại là một chức năng thực thi sau khi một chức năng khác đã thực thi. Nó cũng được gọi là một cuộc gọi sau. Trong thế giới JavaScript, một hàm đợi một hàm khác thực thi hoặc trả về một giá trị (mảng hoặc đối tượng) được gọi là gọi lại. Gọi lại là một cách để làm cho các hoạt động không đồng bộ trở nên đồng bộ hơn (thứ tự tuần tự).
Tại sao điều này có liên quan?
- Chờ đợi một sự kiện để thực hiện
- Cung cấp khả năng đồng bộ
- Cách thiết thực để xâu chuỗi các chức năng (Nếu A hoàn thành, sau đó thực hiện B, v.v.)
- Cung cấp cấu trúc mã và kiểm soát
- Hãy lưu ý, bạn có thể đã nghe nói về địa ngục gọi lại. Về cơ bản, điều đó có nghĩa là bạn có một cấu trúc đệ quy của các cuộc gọi lại (các cuộc gọi lại trong các cuộc gọi lại trong các cuộc gọi lại, v.v.). Điều này là không thực tế.
Ví dụ
Giả sử Elon Musk tại SpaceX cần một chức năng sẽ kích hoạt 27 động cơ Merlin của Falcon Heavy (tên lửa mạnh nhất thế giới theo hệ số hai) khi nhấn một nút.
ES5
ES6
Lưu ý rằng nó đợi một sự kiện xảy ra (một nút bấm) trước khi thực hiện một hành động (khởi động động cơ). Tóm lại, chúng tôi vượt qua fireUpEngines() chức năng như một đối số (gọi lại) để pressButton() chức năng. Khi người dùng nhấn nút, nó sẽ khởi động động cơ.
Vì vậy, có bạn có nó! Một số khái niệm JS phổ biến nhất được giải thích đơn giản bằng các ví dụ. Tôi hy vọng những khái niệm này đã giúp bạn hiểu thêm một chút về JS và cách thức hoạt động của nó.
Bạn có thể tìm thấy tôi trên Phương tiện nơi tôi xuất bản hàng tuần. Hoặc bạn có thể theo dõi tôi trên Twitternơi tôi đăng các mẹo và thủ thuật phát triển web có liên quan cùng với các câu chuyện cá nhân.
Tái bút Nếu bạn thích bài viết này và muốn có thêm nhiều bài viết như thế này, hãy vỗ tay ❤ và chia sẻ với bạn bè, đó là nghiệp tốt
