<style> .reveal, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei", Meiryo, "MS ゴシック", "MS Gothic", sans-serif; } h1, h2, h3, h4, h5, h6 { text-transform: none !important; } .js-img { background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/480px-JavaScript-logo.png) center/contain; width: 350px; height: 350px; display: block; margin: 20px auto !important; border: 4px solid white !important; } .hfbook-img { background: url(http://images.thebookstores.net/imagesnew5c/9780596007126.jpg) center/contain; width: 350px; height: 350px; display: block; margin: 20px auto !important; border: 4px solid white !important; } .sun0-img { background: url(http://img.blog.163.com/photo/L56rCU_JmE3g5rkd3TjfTg==/1449877605037188949.jpg) center/contain; width: 330px; height: 238px; display: block; margin: 20px auto !important; border: 4px solid white !important; } .sun-img { background: url(http://www.tv543.com/images/kr/descendants-of-sun.jpg) center/contain; width: 350px; height: 260px; display: block; margin: 20px auto !important; border: 4px solid white !important; } </style> # 太陽的後裔 # Design Patterns前菜 ## SwiftGirls Michael-Chen<br />[@MichaelChen](https://www.facebook.com/helloWorldMichaelChen) **參考書** [Head First Design Patterns](https://www.tenlong.com.tw/items/9867794524?item_id=33235) [Pro Design Patterns in Swift](https://www.tenlong.com.tw/items/9863477303?item_id=1008264) --- ### [GitHub](https://github.com) ## [SwiftGirl](https://github.com/helloworldsmart/SwiftGirls) ![](https://i.imgur.com/QMVDTP3.png) 1. 按下Star點讚 2. 按下Fork複製一份這個專案的副本 3. git clone or Download ---- ![](https://i.imgur.com/5UP11sD.png) ---- <img src="https://scontent.ftpe1-1.fna.fbcdn.net/v/t1.0-9/10514653_298411263670726_6815406755312229312_n.jpg?oh=d2940e3c341c3c46efefd5c7c7a5ed0c&oe=58987C82" style="width:150px;height:150px;border-radius:50%"/> Michael-Chen Taipei, Taiwan https://github.com/helloworldsmart --- ![APatternLauguage](http://appwk.baidu.com/naapi/doc/view?ih=810&o=jpg_6&iw=1080&ix=0&iy=0&aimw=1080&rn=1&doc_id=3636952da8114431b90dd874&pn=1&sign=57818df5f2b9d31e7431b0c7fe5b98e2&type=1&app_ver=2.9.8.2&ua=bd_800_800_IncredibleS_2.9.8.2_2.3.7&bid=1&app_ua=IncredibleS&uid=&cuid=&fr=3&Bdi_bear=WIFI&from=3_10000&bduss=&pid=1&screen=800_800&sys_ver=2.3.7) ---- ## GOF C++ 神悟 swift ![GOF](http://iqss.github.io/javaone2014-bof5619/images/gof.png) ---- ## Java 神悟 swift ![Head First Design Patterns Book](http://images.thebookstores.net/imagesnew5c/9780596007126.jpg) ---- ## swift 1.2 神悟 swift 3.0 ![Pro Design Patterns in Swift](http://pcmagazinepdf.com/uploads/posts/2015-01/thumbs/-3559_3833.jpg) ---- ## What the hell !! ![cat](http://www.webuzzy.com/wp-content/uploads/2015/03/d837606.jpg) ---- # fork這本書 ![Head First Design Patterns Book](http://images.thebookstores.net/imagesnew5c/9780596007126.jpg) --- ### Design Patterns? (三選一) 1. UI 設計<!-- .element: class="fragment" data-fragment-index="1" --> 2. Call in 美工姊姊 help<!-- .element: class="fragment" data-fragment-index="2" --> 2. 每一個模式描述了一個在我們周圍不斷重複發生的問題,以及該問題的解決方案的核心。這樣,你就能一次又一次地使用該方案而不必做重複勞動。<!-- .element: class="fragment" data-fragment-index="3" --> ---- ##### 分解,抽象化問題; 用解耦,組裝來解決問題 1. Pattern name 模式名稱 2. Problem 問題 3. Solution 解決方案 4. Consequences 效果 ---- 導演 編劇 環境總監 攝影總監 燈光總監 場景總監 分鏡總監 美術總監 --- 我們來用Swift coding 韓劇吧 :smile: ---- - Object Oriented Programming In 太陽的後裔.swift - Protocol Oriented Programming In 太陽的後裔.swift - OOD Principles In 太陽的後裔.swift - Design Pattern In 太陽的後裔.swift ---- ##### Review Object Oriented Programming 物件導向 -> OOP ##### coding 歐巴 角色 ---- - Classes 類別 - Properties 特性 - Method / Functions 方法 - Instance 實例化 - Objects 物件 ---- ###### The world seen by an "Object Oriented" Programming ![](https://i.imgur.com/zimwtTI.png) ---- ![soldier](https://i.imgur.com/rnoQGb3.png) ---- :::danger KeyPoint :tada: ::: - A class is composed of properties and functions/methods - A class is like a blueprint. Objects are instance of this blueprint :::success Implementation :movie_camera: ::: ```swift= let 宋仲基 = TitleRoleSoldier() 宋仲基.face = " " //臉部辨識系統還沒建立 宋仲基.type = " " //python網頁爬蟲在數據海迷路 宋仲基.performShoesAction() ``` ---- :::info Encapsulation封裝 :mega: ::: - Classes provide methods like workout().You don't need to know how that method works or what properties it accesses. :::info Inheritance繼承 :mega: ::: - Subclasses can inherit properties and methods :::info Polymorphism多型 :mega: ::: - When subclassing you can add unique properties and methods ---- ## 還醒著嗎? ![cat](http://www.webuzzy.com/wp-content/uploads/2015/03/d837606.jpg) ---- ## 起手式 ```swift= var str = "Hello, 太陽的後裔" ``` ---- ### Soldier角色藍圖 ```swift= class Soldier { //敬禮口號 func salute() { print("團結 (단결)") } func backpacking() { print("背大杯包, 裡面一堆裝備") } func display() { } } ``` ---- ## 創立各角色藍圖 ```swift= class TitleRoleSoldier: Soldier { override func display() { print("劉時鎮報到😎") } } class SupportingRoleSoldier: Soldier { override func display() { print("徐大英報到😎") } } class FemaleSupportingRoleSoldier: Soldier { override func display() { print("尹明珠報到😏") } } ``` --- ## Design Patterns :::success Design Patterns主要描述的是"類與相互通信的物件之間的組織關係,包括它們的角色、職責、協作方式等方面":tada: ::: - Protocol<!-- .element: class="fragment" data-fragment-index="1" --> - Delegate<!-- .element: class="fragment" data-fragment-index="2" --> ---- ##### Review Protocol-Oriented Programming 協定導向 - 定義 歐巴 貼心行為Protocol協定 ---- ### Protocol-Oriented Programming<!-- .element: class="fragment" data-fragment-index="1" --> #### Object Oriented Programming --- ### Object Oriented Design Principles ![](https://i.imgur.com/fohVmZS.png) ---- ```swift= class StoryBoard{//場景,代表superClass var abseilingArray:Array<Abseiling>? //繩降 var jumpArray:Array<Jump>? func action(event:actionEventArgs){ for abseilingInstance in abseilingArray!{ //演戲中 } for jumpInstance in jumpArray!{ //演戲中 } } } class Abseiling{//subClass(代表容易變化的class) func DoIt(){...} } class Jump{//subClass(代表容易變化的class) func DoIt(){...} } ``` ---- ```swift= class StoryBoard{//場景,代表superClass var workoutArray:Array<Workout>? func onPaint(){ for workout in workoutArray!{ workout.DoIt(); } } } protocol Workout{ //抽象接口,穩定(superClass和supClass都依賴protocol) func DoIt() } class Abseiling:Workout{//subClass(代表容易變化的class) ofunc DoIt(){ }//實現细節應該依賴於protocol } class Jump:Workout{//subClass(代表容易變化的class) func DoIt(){ }//實現细節應該依賴於protocol } ``` ---- ### ![](https://i.imgur.com/XqBes7Y.png) ---- ```swift= class StoryBoard{//場景,代表superClass var abseilingArray:Array<Abseiling>? //繩降 var jumpArray:Array<Jump>? //新的改變需求 var runArray:Array<Run>? func action(event:actionEventArgs){ for abseilingInstance in abseilingArray!{ //演戲中 } for jumpInstance in jumpArray!{ //演戲中 } //新增劇情 for rnuInstance in runArray!{ //演戲中 } } } class Abseiling{//subClass(代表容易變化的class) func DoIt(){} } class Jump{//subClass(代表容易變化的class) func DoIt(){} } class Run{//subClass(代表容易變化的class) func DoIt(){} } ``` ---- ```swift= class StoryBoard{//場景,代表superClass var workoutArray:Array<Workout>? func action(event:actionEventArgs){ for workout in workoutArray!{ workout.DoIt() } } } protocol Workout { //抽象接口,穩定(superClass和supClass都依賴protocol) func DoIt() } class Abseiling:Workout{//subClass(代表容易變化的class) func DoIt(){}//實現细節應該依賴於protocol } class Jump:Workout{//subClass(代表容易變化的class) func DoIt(){}//實現细節應該依賴於protocol } class Run:Workout{//subClass(代表容易變化的class) func DoIt(){}//實現细節應該依賴於protocol } ``` ---- ![](https://i.imgur.com/6bpZizv.png) --- ## Design Pattern ---- ## 這一幕場景 ![sun](http://www.tv543.com/images/kr/descendants-of-sun.jpg) ---- #### 現在導演要為劉時鎮加幫女主角綁鞋帶的劇情, 這時要怎麼寫代碼呢? #### issue: 劉時鎮,徐大英,尹明珠搶著幫女主角綁鞋帶 ? #### 其他角色都不需執行幫女主角綁鞋帶的Behavior !! ---- 1. 在superClass(soldier類)中添加 TieShoelaces(), 其他演員重新改寫TieShoelaces code,這樣的話會被其他演員抱怨, 背這麼多台詞卻沒有用到, 一直mark(註解)掉方法 2. 使用protocol接口, 需要實現TieShoelaces()的演員,實現接口即可,頂多產生重複的code。 ---- ## 方案一 ### Strategy Pattern (多型 + 代理) ---- #### 設計原則 1. 找出應用中可能需要變化之處,把它们獨立出来,不要和那些不變的code混在一起。 2. 針對接口编程(protocol),而不是針對實現编程(Copy-Paste寫法導致不同viewController, 重複好幾個同func) 3. 多用组合,少用繼承 ("團結 (단결)") ---- ## 劉時鎮的行為協定 ```swift= protocol SweetBehavioral { func shoesAction() } ``` ---- ```swift= ////使用雙手綁鞋帶的類 class TieWithHands: SweetBehavioral { func shoesAction() { print("幫女主角綁鞋帶~👢") } } class TieMySelfWithHands: SweetBehavioral { func shoesAction() { print("綁自己鞋帶~👞") } } ////使用雙手脫鞋子的類 class TakeOffShoesWithHands: SweetBehavioral { func shoesAction() { print("幫女主角脫鞋~👢") } } ``` ---- ```swift= class Soldier { //添加行為委托代理者 var handleShoesActionBehavior: SweetBehavioral! = nil func setShoesActionBehavior(handleShoesActionBehavior: SweetBehavioral) { self.handleShoesActionBehavior = handleShoesActionBehavior } //敬禮口號 func salute() { print("團結 (단결)") } func backpacking() { print("背大背包, 裡面一堆裝備") } func display() { } func performShoesAction() { guard (self.handleShoesActionBehavior != nil) else { return } self.handleShoesActionBehavior.shoesAction() } } ``` ---- ### 編劇: 劉時鎮角色藍圖 ```swift= class TitleRoleSoldier: Soldier { override init() { super.init() self.setShoesActionBehavior(handleShoesActionBehavior: TieWithHands()) } override func display() { print("劉時鎮報到😎") } } ``` ---- ### 導演: 仲基哥這場景該你出場 ```swift= var 宋仲基:Soldier = TitleRoleSoldier() 宋仲基.performShoesAction() ``` ---- ### 導演: 仲基哥這次場景你要換TakeOffShoesWithHands()行為, 然後遇見伯母的劇情 ```swift= 宋仲基.setShoesActionBehavior(handleShoesActionBehavior: TakeOffShoesWithHands()) 宋仲基.performShoesAction() ``` ---- ## 方案二 ### Protocol Extensions Pattern ```swift= protocol SweetBehavioral { func shoesAction() } //為Protocol添加, 默認實現 extension SweetBehavioral { func shoesAction() { print("幫女主角綁鞋帶~👢") } } ``` ---- ## 劉時鎮實作SweetBehavioral協定, 再Extensions ## [參見WWDC 2015](https://developer.apple.com/videos/play/wwdc2015/408/) ```swift= class TitleRoleSoldier: Soldier, SweetBehavioral { override func display() { print("劉時鎮報到😎") } } let titleRoleSoldier: TitleRoleSoldier = TitleRoleSoldier() titleRoleSoldier.shoesAction() ``` --- ![Winter Soldier](http://nerdist.com/wp-content/uploads/2014/03/winter-soldier-concept-art-6.jpg) # Winter Soldier ---- ```swift= class WinterSoldier: Soldier { override init() { super.init() self.setShoesActionBehavior(handleShoesActionBehavior: TieWithHands()) } override func display() { print("The thing is, you don't have to. I'm with you till the end of the line") } } 宋仲基 = WinterSoldier() 宋仲基.performShoesAction() ``` ---- {%youtube -7OACKizgVU %} > The thing is, you don't have to. I'm with you till the end of the line ---- ### 現在給妳當編劇機會自訂SweetBehavioral需求 ```swift= class SomeSweetAction: SweetBehavioral { func shoesAction() { print("函式名稱設不好, 反正sweetAction, 自訂SweetBehavioral需求po在issue區, Thank you :D") } } 宋仲基.setShoesActionBehavior(handleShoesActionBehavior: SomeSweetAction()) 宋仲基.performShoesAction() ``` <!-- .element: class="fragment" data-fragment-index="1" --> ---- ## 策略模式 ### 定義了演算法(就是上面仲基的各種sweet行為),分別封裝了起來,讓他們之間可以相互替換,此模式讓演算法的變化獨立於使用演算法的函式,演算法功能分開好以後換來換去 ---- ## STARTING OVER WITH PROTOCOLS --- # Purpose of the problem set ### The purpose is for you to learn, so have fun! ---- # Problem set 1. 馬上Star 按下去 (25分) 2. 馬上Fork 改寫 (25分) 3. Feedback Try it out code 吧 (25分) 4. 有問題提issue (25分) https://github.com/helloworldsmart/SwiftGirls --- ###### 以上Design Patterns前菜沙拉, ###### 以下有Design Patterns饗宴參考資料 - [太陽的後裔wiki](https://zh.wikipedia.org/wiki/%E5%A4%AA%E9%99%BD%E7%9A%84%E5%BE%8C%E8%A3%94) - [編劇 - 談角色、框架、靈感](http://animapp.tw/blog/pre-production/story-and-scripts/526-prometheus-jon-spaihts-character-brand-inspiration.html) - [20個角色設計要點 - (上)](http://animapp.tw/blog/pre-production/character-and-art/708-20-character-design-hint-part-01.html)[(下)](http://animapp.tw/blog/pre-production/character-and-art/854-20-character-design-hint-part-02.html) - [十個寫出經典角色的好方法](http://animapp.tw/blog/pre-production/story-and-scripts/1529-2014-08-10-16-24-09.html) - [用電影拍攝手法詮釋設計模式哲學](https://www.youtube.com/watch?v=tFRKmMbvoC0&index=4&list=PLvg2kX-UyN8JRMIB9h4W-mGTPkJDJoq_D) - [物件導向編程觀念Python](https://cn.udacity.com/course/programming-foundations-with-python--ud036) - [MakeSchool Swift](https://www.makeschool.com/academy) - [Protocol-Oriented Swift(上)](https://chengwey.com/protocol-oriented-programming-with-swift-bi-ji-1/) [(下)](https://chengwey.com/protocol-oriented-programming-with-swift-bi-ji-2/) - [OOD-Principles-In-Swift](https://github.com/ochococo/OOD-Principles-In-Swift) - [用Swift整理GOF设计模式(一)](https://github.com/ochococo/OOD-Principles-In-Swift) [(二)](http://www.jianshu.com/p/8e92841fa36d) [(四)](http://www.jianshu.com/p/90bed59fe343) [(五)](http://www.jianshu.com/p/1a404cdc6312) - [深入淺出 In Swift](http://qefee.com/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/) ---- ## GitHub彩蛋 - [如何用好github中的watch、star、fork](http://www.jianshu.com/p/6c366b53ea41) - [Udacity的Linux教學](https://cn.udacity.com/course/linux-command-line-basics--ud595) - [Udacity的GitHub教學](https://cn.udacity.com/course/how-to-use-git-and-github--ud775) - [GitHub Youtube教學](https://www.youtube.com/watch?v=cX9IbYgyeqc) ---- ## 徵戰友 https://cn.udacity.com/ --- ## Thank you!歡迎指教
{"metaMigratedAt":"2023-06-14T12:05:05.292Z","metaMigratedFrom":"Content","title":"太陽的後裔","breaks":true,"contributors":"[]"}
    789 views