Mẫu thiết kế TS/JS với Canvas: Học đúng cách từ Zerocho

Tìm hiểu về công dụng cũng như ưu và nhược điểm của các mẫu thiết kế khác nhau bằng cách tạo bảng vẽ bằng TypeScript/JavaScript. Có thể tìm hiểu API canvas là một phần thưởng!

(4.7) 26 đánh giá

608 học viên

Độ khó Trung cấp trở lên

Thời gian Không giới hạn

Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas
Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

4.7

5.0

bottlewook

24% đã tham gia

Nội dung rất khó nên tiến độ không tiến triển nhanh. Cảm ơn bạn đã giảng về các mẫu thiết kế sử dụng JavaScript 😊 😊 Với tư cách là một nhà phát triển không chuyên, đây là điều tôi thực sự muốn nghiên cứu và vì bạn đã giải thích nó bằng các ví dụ về Paint nên tôi nhận được rất nhiều sự giúp đỡ khi làm việc tại công ty!

5.0

문석청

32% đã tham gia

Cảm ơn bạn vì bài giảng tuyệt vời.

5.0

불타는금호동

100% đã tham gia

Đây là một khóa học rất ý nghĩa vì có thể học các design pattern từ góc độ frontend. Thật tuyệt khi được xem nhiều ví dụ khác nhau về cách sử dụng class! Nếu có thể xem thêm các ví dụ bằng React thì có lẽ sẽ nắm bắt rõ hơn về cách áp dụng trong thế giới thực, nhưng phần này tôi đã có thể có được nhiều insight khi học thêm song song. Cảm ơn vì khóa học tuyệt vời!

Bạn sẽ nhận được điều này sau khi học.

  • Các mẫu thiết kế TypeScript

  • Các mẫu thiết kế JavaScript

  • Làm bảng vẽ bằng canvas

Học các mẫu thiết kế có thực sự hữu ích với tôi không? 🤔

Tôi đã thấy rất nhiều người hỏi câu hỏi này. Đây là câu trả lời của tôi.

Đúng vậy, điều đó hữu ích hơn là sống mà không biết gì!

Tôi vẫn luôn nói: " Mẫu thiết kế không phải là thứ bạn học được. Chúng tự nhiên xuất hiện khi bạn tối ưu hóa mã ." Tuy nhiên, do bản chất của JavaScript và TypeScript, vốn không chủ động sử dụng các khái niệm và lớp hướng đối tượng, tôi thấy nhiều người tránh sử dụng mẫu thiết kế . Vì vậy, tôi muốn giới thiệu với bạn mẫu thiết kế là gì và có những loại nào.

Sau khi xem bài giảng này, bạn sẽ nhận ra rằng bạn đã sử dụng một số mẫu thiết kế và chúng có thể giúp bạn tối ưu hóa theo cách này .

Có rất nhiều mẫu thiết kế, nhưng không phải tất cả đều hữu ích. Tuy nhiên, ba hoặc bốn mẫu thiết kế hữu ích sẽ cải thiện đáng kể chất lượng mã của bạn.

Hãy cùng xem một ví dụ đơn giản để thấy được tính hữu ích của các mẫu thiết kế!

Bạn có bao giờ thấy mình lặp lại cùng một câu lệnh if trên nhiều hàm trong mã của mình không? Điều này có nghĩa là bạn sẽ cần sửa đổi ba hàm mỗi khi thêm một câu lệnh if mới.

Bằng cách tận dụng các mẫu nhà máy và trạng thái, bạn có thể thực hiện những thay đổi này một cách gọn gàng! Bạn chỉ cần sửa đổi một hàm khi cần thay đổi.

Các tính năng của khóa học này

📌 Trong bài giảng này, bạn sẽ tìm hiểu 23 mẫu thiết kế từ cuốn sách GoF và các mẫu thiết kế khác được điều chỉnh cho JavaScript/TypeScript .

📌 Các mẫu thiết kế không thể tách rời khỏi các nguyên tắc SOLID . Chúng tôi cũng sẽ giới thiệu các nguyên tắc SOLID.

📌 Để có một ví dụ thực tế, chúng ta hãy tạo một bảng vẽ bằng API canvas HTML (và một số mẹo để sử dụng công cụ dành cho nhà phát triển là Debugger!)

📌 Việc này được thực hiện bằng TypeScript , nhưng cũng đề cập đến những điểm khác biệt so với JavaScript (có sự khác biệt trong một số mẫu thiết kế do đặc điểm của ngôn ngữ).

Tôi giới thiệu điều này cho những người này

Bất kỳ ai muốn học các mẫu thiết kế

Bất kỳ ai quan tâm đến mã sạch và hướng đối tượng và muốn tìm hiểu các mẫu thiết kế

Bất kỳ ai cần ví dụ JS/TS

Những người cần ví dụ về JavaScript và TypeScript vì các sách/bài giảng về mẫu thiết kế trên thị trường được viết bằng các ngôn ngữ khác.

Dành cho những ai muốn hiểu bằng ví dụ thực tế

Dành cho những ai muốn hiểu các mẫu thiết kế thông qua mã được sử dụng trong thực tế thay vì các lớp động vật, mèo và ô tô xuất hiện thường xuyên.

Sau giờ học

  • Bây giờ tôi biết đoạn mã tôi đang viết đang sử dụng mẫu thiết kế nào.

  • Bạn có thể cấu trúc lại mã hiện tại một cách gọn gàng bằng cách áp dụng các mẫu thiết kế đã học.

  • Khi giải thích mã cho người khác, thay vì giải thích chi tiết , bạn có thể chỉ cần nói "Tôi đã sử dụng mẫu thiết kế này!"

  • Khi viết mã mới, bạn sẽ có thể xác định được mẫu thiết kế nào hiệu quả nhất để sử dụng.

  • Bạn có thể tạo các mẫu đơn giản hơn bằng cách sử dụng các tính năng ngôn ngữ JavaScript/TypeScript.

Tìm hiểu về những điều này.

Học với cú pháp TypeScript

Có một số điểm khác biệt so với các ngôn ngữ hướng đối tượng khác như Java. Tôi sẽ bắt đầu bằng cách giải thích về kiểu cấu trúc, giao diện và lớp trừu tượng.

Học cả ngữ pháp JavaScript nữa

Trong hầu hết các trường hợp, mã TypeScript và JavaScript gần như giống hệt nhau. Tuy nhiên, tôi sẽ giải thích bất kỳ điểm khác biệt nào.

Ghi chú bài giảng bao gồm phần tóm tắt và UML.

Khi mã ngày càng phức tạp, tôi đã trình bày riêng các phần áp dụng mẫu thiết kế trong UML . Tôi sẽ giải thích về UML trong bài giảng.

Chúng ta hãy cùng tạo một bảng vẽ đơn giản (nhưng không đơn giản).

Thay vì dựa vào những ví dụ không thực sự thuyết phục, hãy học các mẫu thiết kế bằng cách xây dựng các chương trình thực tế. Thật khó khăn để nhồi nhét 25 mẫu thiết kế...

Những điều cần lưu ý trước khi tham gia khóa học

Môi trường thực hành

  • Khóa học sẽ được thực hiện bằng Visual Studio Code Live Server trên Windows 11. Tuy nhiên, hệ điều hành hoặc IDE của bạn sẽ không bị ảnh hưởng.

  • TypeScript phiên bản 5.5 trở lên là đủ.

Kiến thức và biện pháp phòng ngừa của người chơi

  • Cú pháp JavaScript và TypeScript cơ bản

  • Nếu bạn không biết TypeScript, bạn có thể xóa phần kiểu khỏi mã TypeScript và nó sẽ là JavaScript (mặc dù có một số phần mà mẫu thiết kế khác nhau vì nó là JavaScript).

  • Việc tạo bảng vẽ chỉ là vai trò thứ yếu và mục đích chính của bài giảng này là tìm hiểu các mẫu thiết kế.



Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất kỳ ai muốn viết mã hiệu quả hơn bằng JavaScript

  • Bất kỳ ai tò mò về nơi có thể sử dụng các mẫu thiết kế

  • Bất cứ ai tò mò về việc sử dụng các lớp trong JavaScript

  • Bất cứ ai tò mò về việc sử dụng các giao diện và các lớp trừu tượng trong TypeScript

Cần biết trước khi bắt đầu?

  • JavaScript

  • Bản đánh máy

Xin chào
Đây là zerocho

67,385

Học viên

1,727

Đánh giá

9,762

Trả lời

4.8

Xếp hạng

25

Các khóa học

Ưu điểm trong các bài giảng của tôi là phần Q&A (Từng 2 lần giành giải Chiến thần giải đáp của Inflearn). Tôi sẽ cố gắng phản hồi trong vòng 24 giờ! Tôi sẽ trả lời với tinh thần như đang cùng bạn giải quyết vấn đề!

Một trong những điểm mạnh chính trong các khóa học của tôi là hỗ trợ Giải đáp thắc mắc (Q&A). (Từng hai lần giành giải thưởng "Vua giải đáp" của Inflearn) Tôi sẽ phản hồi các câu hỏi của bạn trong vòng 24 giờ và cố gắng hết sức để giúp đỡ bạn! Bạn sẽ cảm thấy như chúng ta đang cùng nhau giải quyết các vấn đề.

👉Bài giảng của ZeroCho
Lộ trình đầy đủ cho tất cả các bài giảng của ZeroCho. Lộ trình hoàn chỉnh cho tất cả các khóa học của tôi có sẵn tại đây.

– Tác giả của Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript và TypeScript Textbook 
– Người điều hành ZeroCho.com
– Hiện tại) Đang phát sóng về phát triển phần mềm trên YouTube tại ZeroCho TV 
– Cựu) CTO tại Smoretalk 
– Cựu) CTO của Today's Pickup (Sau khi thương vụ exit với Kakao Mobility, trở thành Trưởng bộ phận phát triển trẻ tuổi nhất tại Kakao Mobility)

  • Tác giả của Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScriptTypeScript Textbook

  • Người điều hành ZeroCho.com

  • Hiện đang vận hành kênh YouTube ZeroCho TV, chuyên về các chủ đề phát triển phần mềm

  • Cựu CTO tại SmoreTalk

  • Cựu CTO tại Today Pickup (được Kakao Mobility mua lại, nơi tôi trở thành trưởng nhóm phát triển trẻ tuổi nhất)

Thêm

Chương trình giảng dạy

Tất cả

34 bài giảng ∙ (6giờ 16phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

26 đánh giá

4.7

26 đánh giá

  • pehwish0827님의 프로필 이미지
    pehwish0827

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    • beamch61227님의 프로필 이미지
      beamch61227

      Đánh giá 9

      Đánh giá trung bình 5.0

      5

      62% đã tham gia

      • bwlimtony7082님의 프로필 이미지
        bwlimtony7082

        Đánh giá 3

        Đánh giá trung bình 5.0

        5

        24% đã tham gia

        Nội dung rất khó nên tiến độ không tiến triển nhanh. Cảm ơn bạn đã giảng về các mẫu thiết kế sử dụng JavaScript 😊 😊 Với tư cách là một nhà phát triển không chuyên, đây là điều tôi thực sự muốn nghiên cứu và vì bạn đã giải thích nó bằng các ví dụ về Paint nên tôi nhận được rất nhiều sự giúp đỡ khi làm việc tại công ty!

        • seukchungmoon8847님의 프로필 이미지
          seukchungmoon8847

          Đánh giá 37

          Đánh giá trung bình 5.0

          5

          32% đã tham gia

          Cảm ơn bạn vì bài giảng tuyệt vời.

          • 30110303님의 프로필 이미지
            30110303

            Đánh giá 4

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            Đây là một khóa học rất ý nghĩa vì có thể học các design pattern từ góc độ frontend. Thật tuyệt khi được xem nhiều ví dụ khác nhau về cách sử dụng class! Nếu có thể xem thêm các ví dụ bằng React thì có lẽ sẽ nắm bắt rõ hơn về cách áp dụng trong thế giới thực, nhưng phần này tôi đã có thể có được nhiều insight khi học thêm song song. Cảm ơn vì khóa học tuyệt vời!

            Khóa học khác của zerocho

            Hãy khám phá các khóa học khác của giảng viên!

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!

            Ưu đãi có thời hạn, kết thúc sau 5 ngày ngày

            41.580 ₫

            30%

            1.235.808 ₫