More Related Content Similar to JS and NG - ntut iLab 2015/07/14 (20) JS and NG - ntut iLab 2015/07/145. JS 歷史
• 由Brendan Eich創造
• 只花10天就將JS做出來,比做期末專案還厲害!
• 因為時間很短,所以乾脆做一個可塑性高的語言
• 根本就是到處留洞
• 因為微軟也弄了一個很像的東西-JScript
• 歐洲電腦製造商協會(ECMA)要求統一
• 最後產生ECMAScript 標準
5
6. JS 歷史 – cont.
• 大概從IE 5.5開始就支援ECMAScript 3了
• 再之前的就不考古了
• 接著一直想要將亂七八糟的語言特性掰正…
• -> ECMAScript 4
• 結果沒有成功…… 這個版本就消失了
• 妥協後,修改一些功能
• -> ECMAScript 5 橫空出世!!
• 這時候大概是Google開始搞傳說中的AJAX時代
(Gmail),各種網頁的都開始流行使用AJAX技術,到
後來FB的出現
6
7. JS 歷史 – cont.
• 因為ECMAScript 5修的還不錯,而且有各種神框
架,舉凡
• jQuery
• CommonJS
• RequireJS
• ExtJS
• Ember
• React
• 所以JS越來越流行了
• 因為使用的人多反應的聲音多,也就讓
ECMAScript改版的速度加速演進
7
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. JS 歷史 – cont.
• 不過由於瀏覽器支援度尚未達標,預計大約半年
後會完全支援
• 微軟於Windows 10的Edge瀏覽器中已經開始支
援
• Visual Studio 2015 也完全支援新的語法
• 但是,請在框架改版之後再用
9
10. JS 歷史 – cont.
敬請期待AngularJS 2.0 (?)
10
17. Number – cont. isNaN的問題
• 像是 isNaN(“haha”) 會回傳true
• isNaN(“”) 會回傳false
• 如果真要測試是否為NaN可用以下這個方式
17
19. String
• 所有的字串都是Unicode ,是16 位元
• 但是一些意外的錯估,後來出現了4 bytes代表
一個字的時候……
• 在遇到這種情況時,文字的長度會算錯、取字元
時會拿不到東西
• 像是用String.charAt 取字元的時候
• 這些問題在ECMAScript 2015 有解決
19
25. String wrapper method
• Length
• charAt
• Indexof
• Replace
• Slice
• Substr
• Trim
• toLowerCase
• toLocaleUpperCase
25
28. Call string method on
primitive value 原理
•運作原理就是:
1. 先幫你將原生型別使用包裹器包
裝
2. 再呼叫物件的方法
3. 再解回原生型別
28
29. 其他淺規則 - 隱含轉換
• JS的隱含轉換規則非常詭異,又不好記……
• 尤其在date物件上世界竟然是逆轉的
• 所以建議少用隱含轉換,比較時請使用三個等於
的運算子
• 三個等於代表兩個變數型別要先一樣,再比值
29
30. 分號插入機制
• JS 很神你忘記加分號他會替你補……
• 但這補分號的方式又有規則,可能不小心會踩到
雷
• return , throw , break , continue , ++ , --
• 以上這幾個東西單獨出現在一行時要多加注意
• 像是++運算子是否前後忘記加變數?
30
31. 分號插入機制 – cont.
• 上面提到的return不能單獨在一行是因為JS有個
隱含的分號插入規則是
• 當此行與下一行合在一起的時候不會出現錯誤,就不
會插入分號
• 但是在return , throw , break , continue , ++ , -- 上
是不會看下一行,直接插入分號
31
40. 變數 Scope 例外情形
• 前述的變數Scope有個例外
• 這個例外就發生在例外處理上
• catch的exception變數只在catch中有用
• 但是catch中宣告其他變數則會與前面一樣
40
44. Function 中的 “this”
• Function 之內使用到的this 會綁定到呼叫者給
傳送給函數的接收者
• 一般呼叫函式時,接收者為綁定到全域
• 全域這個Scope又是綁定到 window 去
(在瀏覽器中)
• 所以一般呼叫函式時,函式中的this為window…
44
48. 函式的三種業務 - cont.
• 第一種當作一般的函式是一件很正常的事情
• 第二可以當作物件的成員函式純屬意外
• 這只是當你使用物件呼叫函式時,this 就不小心綁定
到了該物件
• 第三種最奇妙,可以當作建構子使用
• 當你在函式前面加上了new,又是不同的事情了
48
52. Function 的呼叫 – cont.
• 這三種功能都有一個特點:
• 可以指定函式被呼叫的時候this是什麼
• Func.call(thisArg[,arg1 [,arg2[, …]]])
• Func.apply(thisArg, argsArray)
• Func.bind(thisArg[,arg1 [,arg2[, …]]]);
52
53. Function 的呼叫 – cont.
• 乍看之下call 與 bind 很像
• 但是卻不一樣
• Call 會直接呼叫函式
• Bind 會回傳新的函式
53
54. Function 的呼叫 – cont.
• 所以說 Bind 通常會用在callback function中,
當你的callback function中有使用到this時,你
不會知道到時候你被呼叫的時候,呼叫者是誰,
也就無法決定this 是什麼…就會導致不可預期的
錯誤
• 或許你可以用一些神祕的方法達成功能,像是
• var that = this;
• 然後在callback 中都用that 也行
54
83. AngularJS 的Promise
• 1. 使用$q.defer() 創造一個promise
• Defer : 延遲
• 2. 呼叫了一些非同步未來才會完成的方法後直
接回傳promise
• 3. 在非同步的callback中使用resolve 或是
reject 告訴promise 事情處理的怎麼樣
• Resolve : 事情解決了,並且可以帶參數呼叫
callback
• Reject:剛剛要做的事情被拒絕了,發生了一些問題,
並且附上理由
83
84. AngularJS Promise的使用
• Promise.then( resolveCallbackFn,
rejectCallbackFn , notifyFn)
• then會回傳一個新的Promise,所以你可以串接
then
• Promise.then(resolveCallbackFn, …).thne( res
olveCallbackFn, …).then…..
84
87. HTTP Vers
• HTTP 常用的動詞為 GET 與 POST
• 而比較少用到的為 PUT 與 DELETE
• 在RESTful 中使用這四種動詞
87
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