導學

• 論工程師的設計能力
• 前端學習設計模式的困惑
• 課程概述
• 知識點介紹
• 課程安排
• • • 面向對象
    • 設計原則
    • 設計模式
    • 綜合示例
• 講解方式
• 課程收獲
• 學習前提
• 重點提示

論工程師的設計能力

3年工作經驗，面試必考設計能力
成為項目技術負責人，設計能力是必要基礎
從寫好代碼到做好設計，設計模式是必經之路

前端學習設計模式的困惑

網上的資料都是針對Java等后端語言的
看懂概念，但是不知道怎么用，看完就忘
現在的JS框架，到底都用了哪些設計模式

課程概述

做什么？-講解JS設計模式
哪些部分？-面向對象，設計原則，設計模式
技術？-面向對象，UML類圖，ES6

知識點介紹

面向對象：ES6 class 語法、三要素、UML類圖
設計原則：何為設計、5大設計原則、從設計到模式
設計模式：分優先級講解、結合核心技術、結合框架應用
綜合示例：設計方案、代碼演示、設計模式對應

課程安排

面向對象

使用webpack和label搭建ES6編譯環境
ES6 class面向對象的語法
面向對象三要素：繼承 封裝 多態

設計原則

通過《LINUX/UNIX設計哲學》理解何為設計
5大設計原則分析和理解，以及代碼演示
“設計模式”->從“設計”到“模式”

設計模式

概述：創建型、結構型、行為型
常用設計模式，詳細講解，結合經典使用場景
非常用設計模式，理解概念，示例演示
有主有次，掌握重點

綜合示例

用jQuery實現一個簡單的購物車
設計分析，畫UML類圖
代碼演示
總結使用的7種設計模式

講解方式

先基礎后實踐，先“設計”后“模式”
重點、常用的設計模式，配合經典使用場景
綜合示例，演示設計模式如何使用
用JS的方式講解面向對象和設計模式

課程收獲

面向對象思想，UML類圖
5大設計原則，23種設計模式
能應對前端面試中相關的面試題
提升個人設計能力

學習前提

了解面向對象，能熟練使用jQuery或類似工具庫
有ES6語法基礎，用過nodejs和npm環境
了解vue和React（至少看過文檔，做過demo）

重點提示

本課講解設計模式，不是實戰項目也不是源碼分析
23種設計模式不是都常用，分清主次
設計模式在JS和Java中的講解方式有區別
不適合剛入門編程的同學，參考上文的學習前提

總結

以上是生活随笔為你收集整理的（一）导学（Javascript设计模式系统讲解与应用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。