강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Web Development

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!

(5.0) 15 đánh giá

537 học viên

  • zerocho
이론 실습 모두
canvas
Design Pattern
oop
TypeScript
JavaScript

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

Dịch cái này sang tiếng Việt

  • 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à

65,524

Học viên

1,602

Đánh giá

9,702

Trả lời

4.8

Xếp hạng

22

Các khóa học

제 강의의 장점은 Q&A입니다(인프런 답변왕 2회 수상). 24시간 이내에 최대한 답변드립니다! 같이 고민한다는 느낌으로 답변 드릴게요!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
제로초 강의 전체 로드맵. A complete roadmap of all my courses is available here.

– Node.js교과서, 코딩자율학습 제로초의 자바스크립트, Let's Get IT 자바스크립트, 타입스크립트 교과서 저자 
ZeroCho.com 운영자
– 현) 유튜브에서 ZeroCho TV로 개발 관련 방송중 
– 현) 스모어톡 CTO 
– 전) 오늘의픽업 CTO(카카오모빌리티에 엑싯 후 카카오모빌리티 최연소 개발파트장)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

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ả

15 đánh giá

5.0

15 đánh giá

  • bwlimtony7082님의 프로필 이미지
    bwlimtony7082

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    24% đã tham gia

    The content is very difficult, so I'm not making much progress, but I'm grateful for the JavaScript design pattern lecture 😊😊 As a non-major developer, this is something I really wanted to study, and I'm getting a lot of help from it while working at the company, with the explanation and the Paint example!

    • seukchungmoon8847님의 프로필 이미지
      seukchungmoon8847

      Đánh giá 36

      Đánh giá trung bình 5.0

      5

      32% đã tham gia

      Thank you for the great lecture.

      • pehwish0827님의 프로필 이미지
        pehwish0827

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        • beamch61227님의 프로필 이미지
          beamch61227

          Đánh giá 7

          Đánh giá trung bình 5.0

          5

          62% đã tham gia

          • alsry922님의 프로필 이미지
            alsry922

            Đánh giá 17

            Đánh giá trung bình 4.7

            5

            62% đã tham gia

            While refactoring my code, I noticed that quite a few of the finished codes corresponded to the design patterns you introduced. The code I wrote while contemplating was similar to the content introduced in the lecture, so I understand it better and remember it well. I feel that the code becomes very difficult to read even if the logic is only a little complex. It feels like a myriad of if statements are splitting my brain, and a myriad of for loops are stirring up the split brain... I always think that refactoring is essential in such cases. I highly recommend the design pattern lecture.

            1.255.557 ₫

            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!