Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
JavaScript 與 AngularJS
技術研討會
李柏鋐 (BOHONG LI)
2015 / 07 / 14
1
大綱
•JavaScript
•歷史簡介
•基礎使用介紹
•進階功能
•AngularJS
•基礎介紹
•進階功能
2
JavaScript 是
物件導向程式語言
只是物件的實作方式採用原型繼承
3
JavaScript 歷史演進
4
JS 歷史
• 由Brendan Eich創造
• 只花10天就將JS做出來,比做期末專案還厲害!
• 因為時間很短,所以乾脆做一個可塑性高的語言
• 根本就是到處留洞
• 因為微軟也弄了一個很像的東西-JScript
• 歐洲電腦製造商協會(...
JS 歷史 – cont.
• 大概從IE 5.5開始就支援ECMAScript 3了
• 再之前的就不考古了
• 接著一直想要將亂七八糟的語言特性掰正…
• -> ECMAScript 4
• 結果沒有成功…… 這個版本就消失了
• 妥協後,...
JS 歷史 – cont.
• 因為ECMAScript 5修的還不錯,而且有各種神框
架,舉凡
• jQuery
• CommonJS
• RequireJS
• ExtJS
• Ember
• React
• 所以JS越來越流行了
• 因為...
JS 歷史 – cont.
• 到了 2015 年 6月ECMAScript 第六版ECMAScript
2015 正式通過,這次的改版將整個JS規格重新
定義
• 加入眾所期望很久的各種功能
• 新的語法: let , const , cla...
JS 歷史 – cont.
• 不過由於瀏覽器支援度尚未達標,預計大約半年
後會完全支援
• 微軟於Windows 10的Edge瀏覽器中已經開始支
援
• Visual Studio 2015 也完全支援新的語法
• 但是,請在框架改版之後再...
JS 歷史 – cont.
敬請期待AngularJS 2.0 (?)
10
JavaScript 基本介紹
採用ECMAScript 5
11
原生資料型別
•null
•undefined
•number
•boolean
•string
12
Null
• 代表沒有值
• 空的
• 一個變數可以被指定為null代表他是空的,沒有
值
13
Undefined
• 當一個變數被宣告,但還未給任何值的時候就是
undefined
• 你無法對undefined做任何事,當你這麼做的時
候,會噴一個錯誤出來
14
Boolean
• 代表著true與 false其中一種值
15
Number
• 代表著數字,不管是正數負數整數或是小數
• 用C語言來說這就是個Double雙精確浮點數
• 他實做了IEEE 754標準所規範的64位元數字編碼
• 也當然實做了標準中所定義的NaN
(Not a Number)
• 當計算...
Number – cont. isNaN的問題
• 像是 isNaN(“haha”) 會回傳true
• isNaN(“”) 會回傳false
• 如果真要測試是否為NaN可用以下這個方式
17
Number – cont.
• 當Number 在做位元運算時,會先轉換成32位元
有號整數,運算完再轉回來。
• 明明就有整數還不開來用…
18
String
• 所有的字串都是Unicode ,是16 位元
• 但是一些意外的錯估,後來出現了4 bytes代表
一個字的時候……
• 在遇到這種情況時,文字的長度會算錯、取字元
時會拿不到東西
• 像是用String.charAt 取字元...
原生資料型別都有包裹
器(讓他成為物件),除
了null, undefined以外
每個成功的男人背後都有一個偉大的女人
20
包裹器 (wrapper)
將原生型別變成物件
21
原生型別包裹器
• 與往常一樣,使用new 產生一個instance
22
千萬別用包裹器!
用了被雷到我不管
23
原生型別包裹器
• 用了包裹器,typeof 的結果都是object了!
• 只要用了金坷垃小麥畝產一千八
• 可是瑞凡,String物件提供好多好棒棒的方法耶
24
String wrapper method
• Length
• charAt
• Indexof
• Replace
• Slice
• Substr
• Trim
• toLowerCase
• toLocaleUpperCase
25
沒關係,你可以直接在
原生型別上呼叫字串物
件才能用的方法
26
Call string method on
primitive value
• 真是太神奇了
• 其實他幫你做自動型別轉換了…
27
Call string method on
primitive value 原理
•運作原理就是:
1. 先幫你將原生型別使用包裹器包
裝
2. 再呼叫物件的方法
3. 再解回原生型別
28
其他淺規則 - 隱含轉換
• JS的隱含轉換規則非常詭異,又不好記……
• 尤其在date物件上世界竟然是逆轉的
• 所以建議少用隱含轉換,比較時請使用三個等於
的運算子
• 三個等於代表兩個變數型別要先一樣,再比值
29
分號插入機制
• JS 很神你忘記加分號他會替你補……
• 但這補分號的方式又有規則,可能不小心會踩到
雷
• return , throw , break , continue , ++ , --
• 以上這幾個東西單獨出現在一行時要多加注意...
分號插入機制 – cont.
• 上面提到的return不能單獨在一行是因為JS有個
隱含的分號插入規則是
• 當此行與下一行合在一起的時候不會出現錯誤,就不
會插入分號
• 但是在return , throw , break , contin...
你以為前面那些已經是
JS最雷了嗎?
32
不小心就會變成全域變數
• 大家都知道全域變數不好
• 盡量不要用全域變數
• 但是你不小心可能就會宣告了全域變數而不知道
• 忘記加上var是很危險的,雖然程式還是可以動,但
是sum變成了全域變數
33
避免忘記加var
• 在ECMAScript 5 中可以使用嚴格模式讓執行環
境檢查出這種忘記加var 的狀況,並丟Error出來
• 使用方式不過在檔案開頭加上一字串
• 其實也可以在每個function第一行加上
34
Variable Hoisting 變數提升
• 這點有點像C語言
• 還記得C語言的變數宣告一定要寫在最上面嗎?
• JS 也是如此!
35
Variable Hoisting – cont.
36
也因為有這特性
• 就有人建議將所有變數都先宣告在最上面,
• 並且只用一個var 搞定
• 這就是 single var pattern
• 還可以順便寫註解
37
變數Scope
• 眼尖的人可以發現,明明宣告在for迴圈內的變
數,卻會被放到前面去
• 因為JS中變數的活動範圍(Scope)是以function
做為分界,這也是為什麼會說function是一級
Class了
38
但是 (but)
什麼!!!!
39
變數 Scope 例外情形
• 前述的變數Scope有個例外
• 這個例外就發生在例外處理上
• catch的exception變數只在catch中有用
• 但是catch中宣告其他變數則會與前面一樣
40
物件與陣列
• 宣告時盡量使用{} 與 [] 的方式,
• 不要用 new Object() , new Array()
41
Closures 與 Immediate
function
• Closure 指的是 function 中有function
• Immediate function 是指function宣告後馬上執
行
42
Function 命名的一些現象
• 當把一個具名function 指定給一個變數時,該名
稱只有在該function裡面才可作用
43
Function 中的 “this”
• Function 之內使用到的this 會綁定到呼叫者給
傳送給函數的接收者
• 一般呼叫函式時,接收者為綁定到全域
• 全域這個Scope又是綁定到 window 去
(在瀏覽器中)
• 所以一般呼叫...
但是用了嚴格模式後又
是不同世界了
Use strict mode is another world
45
使用了嚴格模式後的 “this”
• 使用了嚴格模式後,一般呼叫函式this 所綁定的
是undefined
46
函式的三種業務
•在JS中,函式是所謂第一級物件
•Functions are first class object in
JS
•所以Function有各種業務
•當作一般的函式
•剛好碰巧可以當作物件的成員方法
•還可以順便當作建構子使用
...
函式的三種業務 - cont.
• 第一種當作一般的函式是一件很正常的事情
• 第二可以當作物件的成員函式純屬意外
• 這只是當你使用物件呼叫函式時,this 就不小心綁定
到了該物件
• 第三種最奇妙,可以當作建構子使用
• 當你在函式前面加...
函式做為建構子?
• 當一個函式被當作建構子呼叫時
• 會產生一個新的物件,然後綁定到函式的this
• 最後預設會回傳剛剛所產生的那個this
• 重點
• 自動產生this
• 自動回傳this
• 但是
• 你也可以自己改寫回傳值
49
函式做為建構子?
50
Function 的呼叫
• 函式呼叫分三種
• call
• apply
• bind
51
Function 的呼叫 – cont.
• 這三種功能都有一個特點:
• 可以指定函式被呼叫的時候this是什麼
• Func.call(thisArg[,arg1 [,arg2[, …]]])
• Func.apply(thisArg, a...
Function 的呼叫 – cont.
• 乍看之下call 與 bind 很像
• 但是卻不一樣
• Call 會直接呼叫函式
• Bind 會回傳新的函式
53
Function 的呼叫 – cont.
• 所以說 Bind 通常會用在callback function中,
當你的callback function中有使用到this時,你
不會知道到時候你被呼叫的時候,呼叫者是誰,
也就無法決定this...
再講物件導向
• JavaScript是物件導向語言
• 所以理所當然要有封裝、繼承、多型
55
物件封裝
• 直接寫物件就好了,根本不用什麼Class
56
物件繼承
• 透過神奇prototype 達到繼承
• prototype 是串起整個JS繼承架構的關鍵
• 每個Object都會有prototype
57
58
物件繼承
• 當然,child.prototype 把father new出來後,
你想怎麼改他沒人有意見
59
關於prototype
• 將無狀態的method放置prototype中
• 無狀態的method指的是一個method傳給他
固定的參數,不會因為時空背景前後文不同,
而有不同的結果,他只關心他的輸入,與他
要做的事,並產生輸出。
• 因為...
物件多型
• 在JS中,你愛呼叫什麼方法就呼叫,反正沒有型
別檢查
• 查不到你要呼叫的東西就噴錯誤給你看而已
61
62
結語
• 可能是這些狀況太詭異,所以在新的版本中引進
了class 的保留字,可以用來宣告物件
• 還引入了let 取代var的變數宣告方式
• Let 的 scope比較好預測
63
其他JS編寫技巧
• 變數的初始化
• 模組化的作法
• Callback 地獄
64
變數初始化
• 使用者呼叫函式可以選擇不傳參數給你
• 會變成undefined
• 也可以多傳很多給你,就當作沒看到
• 但是一切都會記在arguments這個變數中
• 有時候你需要給參數預設值
• 注意
• 當你的參數可以接收空字串或是0...
模組化
• 使用立即執行函式將模組包起來區隔變數Scope
66
Callback 地獄
67
解法
• 可以將函式改為遞迴呼叫,或是用promises
68
JavaScript 還有很多很
詭異很可怕的東西
其他的請參考 JavaScript Pattern 與 Effective
JavaScript :駕馭JavaScript的68個具體做法
69
步入AngularJS
70
AngularJS 核心概念
• Model-View-Controller 概念
• Data-binding 資料綁定
• Dependency Injection 依賴注入
• Directives 提供強大的html擴充
71
MVC
72
Data binding
• Controller 中所控制的Model資料可以與View進
行雙向綁定
• 當View資料更新或是Model資料更新時,就可以
馬上反應
73
Dependency injection
• 可以方便抽換想要使用的物件
• 方便進行TDD(Test-Driven development)開發
• 需要用到的東西由Module 統一控制,不需要自
己去產生
74
Directive
• 擴充HTML的功能
• 像是大家常用到的ion-view 或是 ng-app 皆為
directive
• 可將常用功能寫成Directive方便使用
75
NG 的應用問題
76
1. 不要使用global function做
controller
• 以前可以用global function做為controller ,在
官網可以看到很多例子,但是這個功能是做來給
官網Demo用的
• 請用正統的方式宣告
77
一些Controller不能做的事
• 不要在Controller中產生HTML的語法,用
directive達成
• 格式化輸入的資料 建議使用angularJS Form
Controller 達成,也就是說一個form 就一個
contr...
Module 的問題
• 第一次宣告Module的時候需要進行DI
• 第二次開始使用,不能指定DI
79
AngualrJS 調用外部函式庫時
• 因為Angular自己有一套運行的生命週期,只有
Angular內的方法NG才會知道,如果是外部的
Library (像是socket.io , 操作DOM, strophe)皆
為外部Library
...
盡量使用NG包裝好的Service
• 礙於NG自己有一套生命週期管理,所以多使用
NG包裝好的Service可以減少不知名的錯誤,像
是資料有更新View不知道
DOM API NG Service
window $window
setTim...
AngularJS 的Promise
• 在NG中是使用$q,為promise的簡單實作
• 使用方式:
82
AngularJS 的Promise
• 1. 使用$q.defer() 創造一個promise
• Defer : 延遲
• 2. 呼叫了一些非同步未來才會完成的方法後直
接回傳promise
• 3. 在非同步的callback中使用res...
AngularJS Promise的使用
• Promise.then( resolveCallbackFn,
rejectCallbackFn , notifyFn)
• then會回傳一個新的Promise,所以你可以串接
then
• P...
Promise串接的目的
• 有時又Promise執行完進行的resolve不一定是真
的resolve
• 像是$http呼叫WS回傳結果後,說不定其實是有
問題的,像是使用者未登入,但是對$http來說
是呼叫成功,會使用resolve
•...
RESTful
• 為Representational state transfer 縮寫
• 是一種WS的API定義規則
• 與SOAP或XML-RPC比起來相對簡單
• RESTful 是使用HTTP Vers 與 網址進行API的呼
叫
...
HTTP Vers
• HTTP 常用的動詞為 GET 與 POST
• 而比較少用到的為 PUT 與 DELETE
• 在RESTful 中使用這四種動詞
87
API 模式
• C create
• POST /shops
• R read
• Read all data
• GET /shops
• Read a specific ID (primary key)
• GET /shops/id
•...
使用ngResource 連接API
• $resource(‘apiurl’)
• $resource(‘http://apps.csie.ntut.edu.tw/shops/:id’)
• 會回傳一個物件包含以下方法
• Get
• Sav...
範例
90
Nächste SlideShare
Wird geladen in …5
×

JS and NG - ntut iLab 2015/07/14

introduction to JS and NG

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

JS and NG - ntut iLab 2015/07/14

  1. 1. JavaScript 與 AngularJS 技術研討會 李柏鋐 (BOHONG LI) 2015 / 07 / 14 1
  2. 2. 大綱 •JavaScript •歷史簡介 •基礎使用介紹 •進階功能 •AngularJS •基礎介紹 •進階功能 2
  3. 3. JavaScript 是 物件導向程式語言 只是物件的實作方式採用原型繼承 3
  4. 4. JavaScript 歷史演進 4
  5. 5. JS 歷史 • 由Brendan Eich創造 • 只花10天就將JS做出來,比做期末專案還厲害! • 因為時間很短,所以乾脆做一個可塑性高的語言 • 根本就是到處留洞 • 因為微軟也弄了一個很像的東西-JScript • 歐洲電腦製造商協會(ECMA)要求統一 • 最後產生ECMAScript 標準 5
  6. 6. JS 歷史 – cont. • 大概從IE 5.5開始就支援ECMAScript 3了 • 再之前的就不考古了 • 接著一直想要將亂七八糟的語言特性掰正… • -> ECMAScript 4 • 結果沒有成功…… 這個版本就消失了 • 妥協後,修改一些功能 • -> ECMAScript 5 橫空出世!! • 這時候大概是Google開始搞傳說中的AJAX時代 (Gmail),各種網頁的都開始流行使用AJAX技術,到 後來FB的出現 6
  7. 7. JS 歷史 – cont. • 因為ECMAScript 5修的還不錯,而且有各種神框 架,舉凡 • jQuery • CommonJS • RequireJS • ExtJS • Ember • React • 所以JS越來越流行了 • 因為使用的人多反應的聲音多,也就讓 ECMAScript改版的速度加速演進 7
  8. 8. JS 歷史 – cont. • 到了 2015 年 6月ECMAScript 第六版ECMAScript 2015 正式通過,這次的改版將整個JS規格重新 定義 • 加入眾所期望很久的各種功能 • 新的語法: let , const , class, module , for…of … • 新的基本型別: Symbol • 新的資料結構:Typed Array , Map , Set • 新的內建類別: Promise , Proxy , Reflect • 強化原有架構: String , Number , Math , RegExp , Object , Array 全員強化 8
  9. 9. JS 歷史 – cont. • 不過由於瀏覽器支援度尚未達標,預計大約半年 後會完全支援 • 微軟於Windows 10的Edge瀏覽器中已經開始支 援 • Visual Studio 2015 也完全支援新的語法 • 但是,請在框架改版之後再用 9
  10. 10. JS 歷史 – cont. 敬請期待AngularJS 2.0 (?) 10
  11. 11. JavaScript 基本介紹 採用ECMAScript 5 11
  12. 12. 原生資料型別 •null •undefined •number •boolean •string 12
  13. 13. Null • 代表沒有值 • 空的 • 一個變數可以被指定為null代表他是空的,沒有 值 13
  14. 14. Undefined • 當一個變數被宣告,但還未給任何值的時候就是 undefined • 你無法對undefined做任何事,當你這麼做的時 候,會噴一個錯誤出來 14
  15. 15. Boolean • 代表著true與 false其中一種值 15
  16. 16. Number • 代表著數字,不管是正數負數整數或是小數 • 用C語言來說這就是個Double雙精確浮點數 • 他實做了IEEE 754標準所規範的64位元數字編碼 • 也當然實做了標準中所定義的NaN (Not a Number) • 當計算過程中出現了無法成為數字的東西,例如 虛數或是字串,就會產生這個結果 • NaN 不等於NaN 這是規定! • isNaN 他會幫你做隱含轉換……有點雷 16
  17. 17. Number – cont. isNaN的問題 • 像是 isNaN(“haha”) 會回傳true • isNaN(“”) 會回傳false • 如果真要測試是否為NaN可用以下這個方式 17
  18. 18. Number – cont. • 當Number 在做位元運算時,會先轉換成32位元 有號整數,運算完再轉回來。 • 明明就有整數還不開來用… 18
  19. 19. String • 所有的字串都是Unicode ,是16 位元 • 但是一些意外的錯估,後來出現了4 bytes代表 一個字的時候…… • 在遇到這種情況時,文字的長度會算錯、取字元 時會拿不到東西 • 像是用String.charAt 取字元的時候 • 這些問題在ECMAScript 2015 有解決 19
  20. 20. 原生資料型別都有包裹 器(讓他成為物件),除 了null, undefined以外 每個成功的男人背後都有一個偉大的女人 20
  21. 21. 包裹器 (wrapper) 將原生型別變成物件 21
  22. 22. 原生型別包裹器 • 與往常一樣,使用new 產生一個instance 22
  23. 23. 千萬別用包裹器! 用了被雷到我不管 23
  24. 24. 原生型別包裹器 • 用了包裹器,typeof 的結果都是object了! • 只要用了金坷垃小麥畝產一千八 • 可是瑞凡,String物件提供好多好棒棒的方法耶 24
  25. 25. String wrapper method • Length • charAt • Indexof • Replace • Slice • Substr • Trim • toLowerCase • toLocaleUpperCase 25
  26. 26. 沒關係,你可以直接在 原生型別上呼叫字串物 件才能用的方法 26
  27. 27. Call string method on primitive value • 真是太神奇了 • 其實他幫你做自動型別轉換了… 27
  28. 28. Call string method on primitive value 原理 •運作原理就是: 1. 先幫你將原生型別使用包裹器包 裝 2. 再呼叫物件的方法 3. 再解回原生型別 28
  29. 29. 其他淺規則 - 隱含轉換 • JS的隱含轉換規則非常詭異,又不好記…… • 尤其在date物件上世界竟然是逆轉的 • 所以建議少用隱含轉換,比較時請使用三個等於 的運算子 • 三個等於代表兩個變數型別要先一樣,再比值 29
  30. 30. 分號插入機制 • JS 很神你忘記加分號他會替你補…… • 但這補分號的方式又有規則,可能不小心會踩到 雷 • return , throw , break , continue , ++ , -- • 以上這幾個東西單獨出現在一行時要多加注意 • 像是++運算子是否前後忘記加變數? 30
  31. 31. 分號插入機制 – cont. • 上面提到的return不能單獨在一行是因為JS有個 隱含的分號插入規則是 • 當此行與下一行合在一起的時候不會出現錯誤,就不 會插入分號 • 但是在return , throw , break , continue , ++ , -- 上 是不會看下一行,直接插入分號 31
  32. 32. 你以為前面那些已經是 JS最雷了嗎? 32
  33. 33. 不小心就會變成全域變數 • 大家都知道全域變數不好 • 盡量不要用全域變數 • 但是你不小心可能就會宣告了全域變數而不知道 • 忘記加上var是很危險的,雖然程式還是可以動,但 是sum變成了全域變數 33
  34. 34. 避免忘記加var • 在ECMAScript 5 中可以使用嚴格模式讓執行環 境檢查出這種忘記加var 的狀況,並丟Error出來 • 使用方式不過在檔案開頭加上一字串 • 其實也可以在每個function第一行加上 34
  35. 35. Variable Hoisting 變數提升 • 這點有點像C語言 • 還記得C語言的變數宣告一定要寫在最上面嗎? • JS 也是如此! 35
  36. 36. Variable Hoisting – cont. 36
  37. 37. 也因為有這特性 • 就有人建議將所有變數都先宣告在最上面, • 並且只用一個var 搞定 • 這就是 single var pattern • 還可以順便寫註解 37
  38. 38. 變數Scope • 眼尖的人可以發現,明明宣告在for迴圈內的變 數,卻會被放到前面去 • 因為JS中變數的活動範圍(Scope)是以function 做為分界,這也是為什麼會說function是一級 Class了 38
  39. 39. 但是 (but) 什麼!!!! 39
  40. 40. 變數 Scope 例外情形 • 前述的變數Scope有個例外 • 這個例外就發生在例外處理上 • catch的exception變數只在catch中有用 • 但是catch中宣告其他變數則會與前面一樣 40
  41. 41. 物件與陣列 • 宣告時盡量使用{} 與 [] 的方式, • 不要用 new Object() , new Array() 41
  42. 42. Closures 與 Immediate function • Closure 指的是 function 中有function • Immediate function 是指function宣告後馬上執 行 42
  43. 43. Function 命名的一些現象 • 當把一個具名function 指定給一個變數時,該名 稱只有在該function裡面才可作用 43
  44. 44. Function 中的 “this” • Function 之內使用到的this 會綁定到呼叫者給 傳送給函數的接收者 • 一般呼叫函式時,接收者為綁定到全域 • 全域這個Scope又是綁定到 window 去 (在瀏覽器中) • 所以一般呼叫函式時,函式中的this為window… 44
  45. 45. 但是用了嚴格模式後又 是不同世界了 Use strict mode is another world 45
  46. 46. 使用了嚴格模式後的 “this” • 使用了嚴格模式後,一般呼叫函式this 所綁定的 是undefined 46
  47. 47. 函式的三種業務 •在JS中,函式是所謂第一級物件 •Functions are first class object in JS •所以Function有各種業務 •當作一般的函式 •剛好碰巧可以當作物件的成員方法 •還可以順便當作建構子使用 47
  48. 48. 函式的三種業務 - cont. • 第一種當作一般的函式是一件很正常的事情 • 第二可以當作物件的成員函式純屬意外 • 這只是當你使用物件呼叫函式時,this 就不小心綁定 到了該物件 • 第三種最奇妙,可以當作建構子使用 • 當你在函式前面加上了new,又是不同的事情了 48
  49. 49. 函式做為建構子? • 當一個函式被當作建構子呼叫時 • 會產生一個新的物件,然後綁定到函式的this • 最後預設會回傳剛剛所產生的那個this • 重點 • 自動產生this • 自動回傳this • 但是 • 你也可以自己改寫回傳值 49
  50. 50. 函式做為建構子? 50
  51. 51. Function 的呼叫 • 函式呼叫分三種 • call • apply • bind 51
  52. 52. Function 的呼叫 – cont. • 這三種功能都有一個特點: • 可以指定函式被呼叫的時候this是什麼 • Func.call(thisArg[,arg1 [,arg2[, …]]]) • Func.apply(thisArg, argsArray) • Func.bind(thisArg[,arg1 [,arg2[, …]]]); 52
  53. 53. Function 的呼叫 – cont. • 乍看之下call 與 bind 很像 • 但是卻不一樣 • Call 會直接呼叫函式 • Bind 會回傳新的函式 53
  54. 54. Function 的呼叫 – cont. • 所以說 Bind 通常會用在callback function中, 當你的callback function中有使用到this時,你 不會知道到時候你被呼叫的時候,呼叫者是誰, 也就無法決定this 是什麼…就會導致不可預期的 錯誤 • 或許你可以用一些神祕的方法達成功能,像是 • var that = this; • 然後在callback 中都用that 也行 54
  55. 55. 再講物件導向 • JavaScript是物件導向語言 • 所以理所當然要有封裝、繼承、多型 55
  56. 56. 物件封裝 • 直接寫物件就好了,根本不用什麼Class 56
  57. 57. 物件繼承 • 透過神奇prototype 達到繼承 • prototype 是串起整個JS繼承架構的關鍵 • 每個Object都會有prototype 57
  58. 58. 58
  59. 59. 物件繼承 • 當然,child.prototype 把father new出來後, 你想怎麼改他沒人有意見 59
  60. 60. 關於prototype • 將無狀態的method放置prototype中 • 無狀態的method指的是一個method傳給他 固定的參數,不會因為時空背景前後文不同, 而有不同的結果,他只關心他的輸入,與他 要做的事,並產生輸出。 • 因為放置在this當中,每new一個新的物件物 件當中就會有一個一模一樣的函式占用記憶 體空間 • 而且根據測試,在prototype的函式效能比較 好 • 雖然他要從繼承鍊中去找函式 60
  61. 61. 物件多型 • 在JS中,你愛呼叫什麼方法就呼叫,反正沒有型 別檢查 • 查不到你要呼叫的東西就噴錯誤給你看而已 61
  62. 62. 62
  63. 63. 結語 • 可能是這些狀況太詭異,所以在新的版本中引進 了class 的保留字,可以用來宣告物件 • 還引入了let 取代var的變數宣告方式 • Let 的 scope比較好預測 63
  64. 64. 其他JS編寫技巧 • 變數的初始化 • 模組化的作法 • Callback 地獄 64
  65. 65. 變數初始化 • 使用者呼叫函式可以選擇不傳參數給你 • 會變成undefined • 也可以多傳很多給你,就當作沒看到 • 但是一切都會記在arguments這個變數中 • 有時候你需要給參數預設值 • 注意 • 當你的參數可以接收空字串或是0 這種會被隱含轉換為 false 的東西時 • 就會發生不可預料的狀況. • 解法:可以判斷是否為undefined • 別讓undefined 有詭異的意義 65
  66. 66. 模組化 • 使用立即執行函式將模組包起來區隔變數Scope 66
  67. 67. Callback 地獄 67
  68. 68. 解法 • 可以將函式改為遞迴呼叫,或是用promises 68
  69. 69. JavaScript 還有很多很 詭異很可怕的東西 其他的請參考 JavaScript Pattern 與 Effective JavaScript :駕馭JavaScript的68個具體做法 69
  70. 70. 步入AngularJS 70
  71. 71. AngularJS 核心概念 • Model-View-Controller 概念 • Data-binding 資料綁定 • Dependency Injection 依賴注入 • Directives 提供強大的html擴充 71
  72. 72. MVC 72
  73. 73. Data binding • Controller 中所控制的Model資料可以與View進 行雙向綁定 • 當View資料更新或是Model資料更新時,就可以 馬上反應 73
  74. 74. Dependency injection • 可以方便抽換想要使用的物件 • 方便進行TDD(Test-Driven development)開發 • 需要用到的東西由Module 統一控制,不需要自 己去產生 74
  75. 75. Directive • 擴充HTML的功能 • 像是大家常用到的ion-view 或是 ng-app 皆為 directive • 可將常用功能寫成Directive方便使用 75
  76. 76. NG 的應用問題 76
  77. 77. 1. 不要使用global function做 controller • 以前可以用global function做為controller ,在 官網可以看到很多例子,但是這個功能是做來給 官網Demo用的 • 請用正統的方式宣告 77
  78. 78. 一些Controller不能做的事 • 不要在Controller中產生HTML的語法,用 directive達成 • 格式化輸入的資料 建議使用angularJS Form Controller 達成,也就是說一個form 就一個 controller • 輸出資料的格式變更,使用Filter 功能,如果沒 有你想要的自己寫 • 在Controller中共享狀態,使用Service的功能達 成,因為Service通常都是Singleton 78
  79. 79. Module 的問題 • 第一次宣告Module的時候需要進行DI • 第二次開始使用,不能指定DI 79
  80. 80. AngualrJS 調用外部函式庫時 • 因為Angular自己有一套運行的生命週期,只有 Angular內的方法NG才會知道,如果是外部的 Library (像是socket.io , 操作DOM, strophe)皆 為外部Library • 可以將外部Library包裝成NG可以知道的功能, 利用Service 的方式包裝,並且使用$on 或是 $boardcast 進行呼叫 • 如果在Controller中用到外部函式更改了一些東 西最後可以呼叫$apply 讓NG知道有東西被變更 了 80
  81. 81. 盡量使用NG包裝好的Service • 礙於NG自己有一套生命週期管理,所以多使用 NG包裝好的Service可以減少不知名的錯誤,像 是資料有更新View不知道 DOM API NG Service window $window setTimeout $timeout setInterval $interval window.location $location console $log document $document 81
  82. 82. AngularJS 的Promise • 在NG中是使用$q,為promise的簡單實作 • 使用方式: 82
  83. 83. AngularJS 的Promise • 1. 使用$q.defer() 創造一個promise • Defer : 延遲 • 2. 呼叫了一些非同步未來才會完成的方法後直 接回傳promise • 3. 在非同步的callback中使用resolve 或是 reject 告訴promise 事情處理的怎麼樣 • Resolve : 事情解決了,並且可以帶參數呼叫 callback • Reject:剛剛要做的事情被拒絕了,發生了一些問題, 並且附上理由 83
  84. 84. AngularJS Promise的使用 • Promise.then( resolveCallbackFn, rejectCallbackFn , notifyFn) • then會回傳一個新的Promise,所以你可以串接 then • Promise.then(resolveCallbackFn, …).thne( res olveCallbackFn, …).then….. 84
  85. 85. Promise串接的目的 • 有時又Promise執行完進行的resolve不一定是真 的resolve • 像是$http呼叫WS回傳結果後,說不定其實是有 問題的,像是使用者未登入,但是對$http來說 是呼叫成功,會使用resolve • 因此可以在第一個then中做資料處理,再傳遞 到下一層的Promise 85
  86. 86. RESTful • 為Representational state transfer 縮寫 • 是一種WS的API定義規則 • 與SOAP或XML-RPC比起來相對簡單 • RESTful 是使用HTTP Vers 與 網址進行API的呼 叫 • 可以方便的定義CRUD 86
  87. 87. HTTP Vers • HTTP 常用的動詞為 GET 與 POST • 而比較少用到的為 PUT 與 DELETE • 在RESTful 中使用這四種動詞 87
  88. 88. API 模式 • C create • POST /shops • R read • Read all data • GET /shops • Read a specific ID (primary key) • GET /shops/id • U update • PUT /shops/id • D delete • Delete /shops/id 88
  89. 89. 使用ngResource 連接API • $resource(‘apiurl’) • $resource(‘http://apps.csie.ntut.edu.tw/shops/:id’) • 會回傳一個物件包含以下方法 • Get • Save • Query • Remove • Delete 89
  90. 90. 範例 90

×