강의

멘토링

로드맵

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,525

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á

  • bottlewook님의 프로필 이미지
    bottlewook

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    24% đã tham gia

    내용이 많이 어려워 진도를 빠르게 나가고 있진 않지만 자바스크립트를 이용한 디자인 패턴 강의를 내주셔서 감사합니다 ㅎㅎ 비전공자 개발자로서 꼭 한번 공부하고 싶었던 내용인데 그림판 예시와 함께 설명해 주셔서 회사 일 하면서도 도움 많이 받고있습니다!

    • 문석청님의 프로필 이미지
      문석청

      Đánh giá 36

      Đánh giá trung bình 5.0

      5

      32% đã tham gia

      좋은 강의 감사합니다.

      • pehwish님의 프로필 이미지
        pehwish

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        • beam.ch6님의 프로필 이미지
          beam.ch6

          Đánh giá 7

          Đánh giá trung bình 5.0

          5

          62% đã tham gia

          • 정민교님의 프로필 이미지
            정민교

            Đánh giá 17

            Đánh giá trung bình 4.7

            5

            62% đã tham gia

            여태 코드를 리팩토링 하다보니까 완성된 코드들이 소개시켜주신 디자인 패턴에 해당하는 것도 꽤나 많았네요. 고민하면서 작성했던 코드들이 강좌에서 소개해주는 내용과 비슷하니까 더 이해도 잘 되고 기억에 잘 남는 것 같습니다. 로직이 조금만 복잡해져도 코드가 굉장히 읽기 힘들어진다고 느낍니다. 수 많은 if 문들이 내 뇌를 쪼개는 것 같고, 수 많은 for문들이 쪼개진 뇌를 휘젓는 것 같습니다... 그럴 때마다 항상 리팩토링은 필수라고 생각하고요. 디자인 패턴 강의 꼭 강추합니다.

            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!