導(dǎo)學(xué)

• 論工程師的設(shè)計(jì)能力
• 前端學(xué)習(xí)設(shè)計(jì)模式的困惑
• 課程概述
• 知識(shí)點(diǎn)介紹
• 課程安排
• • • 面向?qū)ο?/li>
    • 設(shè)計(jì)原則
    • 設(shè)計(jì)模式
    • 綜合示例
• 講解方式
• 課程收獲
• 學(xué)習(xí)前提
• 重點(diǎn)提示

論工程師的設(shè)計(jì)能力

3年工作經(jīng)驗(yàn)，面試必考設(shè)計(jì)能力
成為項(xiàng)目技術(shù)負(fù)責(zé)人，設(shè)計(jì)能力是必要基礎(chǔ)
從寫好代碼到做好設(shè)計(jì)，設(shè)計(jì)模式是必經(jīng)之路

前端學(xué)習(xí)設(shè)計(jì)模式的困惑

網(wǎng)上的資料都是針對(duì)Java等后端語言的
看懂概念，但是不知道怎么用，看完就忘
現(xiàn)在的JS框架，到底都用了哪些設(shè)計(jì)模式

課程概述

做什么？-講解JS設(shè)計(jì)模式
哪些部分？-面向?qū)ο?#xff0c;設(shè)計(jì)原則，設(shè)計(jì)模式
技術(shù)？-面向?qū)ο?#xff0c;UML類圖，ES6

知識(shí)點(diǎn)介紹

面向?qū)ο?#xff1a;ES6 class 語法、三要素、UML類圖
設(shè)計(jì)原則：何為設(shè)計(jì)、5大設(shè)計(jì)原則、從設(shè)計(jì)到模式
設(shè)計(jì)模式：分優(yōu)先級(jí)講解、結(jié)合核心技術(shù)、結(jié)合框架應(yīng)用
綜合示例：設(shè)計(jì)方案、代碼演示、設(shè)計(jì)模式對(duì)應(yīng)

課程安排

面向?qū)ο?/h3>

使用webpack和label搭建ES6編譯環(huán)境
ES6 class面向?qū)ο蟮恼Z法
面向?qū)ο笕?#xff1a;繼承 封裝 多態(tài)

設(shè)計(jì)原則

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

設(shè)計(jì)模式

概述：創(chuàng)建型、結(jié)構(gòu)型、行為型
常用設(shè)計(jì)模式，詳細(xì)講解，結(jié)合經(jīng)典使用場(chǎng)景
非常用設(shè)計(jì)模式，理解概念，示例演示
有主有次，掌握重點(diǎn)

綜合示例

用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的購(gòu)物車
設(shè)計(jì)分析，畫UML類圖
代碼演示
總結(jié)使用的7種設(shè)計(jì)模式

講解方式

先基礎(chǔ)后實(shí)踐，先“設(shè)計(jì)”后“模式”
重點(diǎn)、常用的設(shè)計(jì)模式，配合經(jīng)典使用場(chǎng)景
綜合示例，演示設(shè)計(jì)模式如何使用
用JS的方式講解面向?qū)ο蠛驮O(shè)計(jì)模式

課程收獲

面向?qū)ο笏枷?#xff0c;UML類圖
5大設(shè)計(jì)原則，23種設(shè)計(jì)模式
能應(yīng)對(duì)前端面試中相關(guān)的面試題
提升個(gè)人設(shè)計(jì)能力

學(xué)習(xí)前提

了解面向?qū)ο?#xff0c;能熟練使用jQuery或類似工具庫(kù)
有ES6語法基礎(chǔ)，用過nodejs和npm環(huán)境
了解vue和React（至少看過文檔，做過demo）

重點(diǎn)提示

本課講解設(shè)計(jì)模式，不是實(shí)戰(zhàn)項(xiàng)目也不是源碼分析
23種設(shè)計(jì)模式不是都常用，分清主次
設(shè)計(jì)模式在JS和Java中的講解方式有區(qū)別
不適合剛?cè)腴T編程的同學(xué)，參考上文的學(xué)習(xí)前提

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。