Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NTU CCSP 2012Fall - Node.js #2 - Advanced Javascript and Node.js
Search
Steven Su
October 18, 2012
Programming
1
480
NTU CCSP 2012Fall - Node.js #2 - Advanced Javascript and Node.js
Steven Su
October 18, 2012
Tweet
Share
More Decks by Steven Su
See All by Steven Su
JSDC.TW 2013 Node.js佈署心得
xpsteven
14
1.1k
NTU CCSP 2012Fall - Mobile Web入門 回首網頁開發
xpsteven
3
260
NTU CCSP 2012Fall - Facebook
xpsteven
1
190
NTU CCSP 2012Fall - Node.js #2.1 - Simple File Host Service
xpsteven
2
420
NTU CCSP 2012Fall - Node.js #3 - Mongoose
xpsteven
2
640
NTU CCSP 2012Fall - Node.js #2 - express.js
xpsteven
3
530
Y! Open Hack 2012 Taiwan
xpsteven
0
150
Other Decks in Programming
See All in Programming
Ruby Pattern Matching
bkuhlmann
0
930
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
新宿ダンジョンを可視化してみた
satoshi7190
3
390
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
980
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
680
Fast JSX: Don't clone props object #28768
yossydev
1
190
slow types ってなんだろう?
karad
0
100
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
380
Featured
See All Featured
Happy Clients
brianwarren
92
6.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
What the flash - Photography Introduction
edds
64
11k
What's new in Ruby 2.0
geeforr
337
31k
Facilitating Awesome Meetings
lara
43
5.6k
A Philosophy of Restraint
colly
197
16k
Code Review Best Practice
trishagee
56
15k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Designing Experiences People Love
moore
136
23k
Visualization
eitanlees
137
14k
Transcript
Advanced JS and Node.js NTU CCSP 2012 FALL
Outline • 物件導向?! new // Function // instanceof • 物件導向2
prototype • ECMA5的好東西 Array.xxx Object.xxx
JS物件導向 • JS沒有class但有new • JS沒有class但有instanceof • JS沒有class但有prototype
回到資料型態 • Primitive Type ◦ string ◦ number (NaN Infinity)
◦ boolean • Composite Type ◦ Object ◦ Array ◦ String ◦ Number ◦ Boolean • Special Type ◦ null ◦ undefined typeof() 都是 function
函數的三種建構方式 function isthisfunction() {} var isthisfunction2 = new Function(); var
isthisfunction3 = function(){}; console.log(typeof(isthisfunction)); console.log(typeof(isthisfunction2)); console.log(typeof(isthisfunction3)); 所有函數都是物件 但物件不一定是函數
函數作為建構子 function funca() {} var obja = new funca(); console.log(typeof(funca));
console.log(typeof obja); console.log(obja instanceof funca); function Person(name, age) { this.name = name; this.age = age; } var p1 = new Person('Justin', 35); var p2 = new Person('Momor', 32); console.log(p1 instanceof Person); typeof funca = function typeof obja = object obja instanceof funca = true 判斷物件的class要用 instanceof 而不是 typeof
What is this ? function fn( arg1, arg2,... ){ //
do something } fn( arg1, arg2,... ); fn.call(context, arg1, arg2,... ); fn.apply(context, [ arg1, arg2,... ]); this就是apply與call的第一個參 數 都沒有指定時取決呼叫方式 物件呼叫帶物件本身 非物件呼叫帶全域變數
呼叫方式對this的差異 var obj = { fn : function() {console.log(this)} };
obj.fn(); var tmpfn = obj.fn; tmpfn(); 第一個會印空物件 第二個會印很多東西 取決於執行環境
回頭看 function Student(school) { this.school = school; } var stu1
= {school : 'NTU'}; var stu2 = new Student('NCKU'); console.log(typeof stu1); console.log(typeof stu2); console.log(stu1 instanceof Student); console.log(stu2 instanceof Student); 你可以想像成 new Student就是 呼叫Studen且context設成一個空物 件 object object false true
原形鍊詳解 function Person(name) { this.name = name; } var p1
= new Person('Steven'); console.log(p1); console.log(p1.__proto__); console.log(p1.__proto__ === Person.prototype); console.log(p1.__proto__.__proto__); console.log(p1.__proto__.__proto__ === Object.prototype); Person p1 Person.prototyp e new Object new Object.prototype { name: 'Steven' } {} true {} true
原型練應用於物件方法 function Person(name) { this.name = name; } Person.prototype.like =
function(another) { if(!(another instanceof Person)) throw new Error('Not Person'); if(another == this) throw new Error('can not like myself'); this.likewith = another; another.likewith = this; }; var p1 = new Person('Steven'); var p2 = new Person('Jobs'); p1.like(p2); console.log(p1); console.log(p2); { name: 'Steven', likewith: { name: 'Jobs', likewith: [Circular] } } { name: 'Jobs', likewith: { name: 'Steven', likewith: [Circular] } }
原型練應用於繼承 function Person(name) { this.name = name; } Person.prototype.like =
function(another) { if(!(another instanceof Person)) throw new Error('Not Person'); if(another == this) throw new Error('can not like myself'); this.likewith = another; another.likewith = this; }; function Superman(name, superpower) { this.superpower = superpower; Person.call(this, name); } Superman.prototype.__proto__ = Person.prototype; Superman.prototype.usesuperpower = function() { console.log(this.name + ' use "' + this.superpower + '"'); } var hulk = new Superman('HULK001', 'green and big'); hulk.usesuperpower(); HULK001 use "green and big"
原型練應用於繼承 Person Person.prototyp e Object.prototype Suprman Suprman.prototy pe hulk new
call
助教我炸裂了! 撐下去 hasOwnProperty isPrototypeOf var hulk = new Superman('HULK001', 'green
and big'); console.log(hulk.hasOwnProperty('name')); console.log(hulk.hasOwnProperty('usesuperpower')); console.log(hulk instanceof Superman); console.log(Person.prototype.isPrototypeOf(hulk)); true false true true 不是自己的特性 hasOwnProperty會回傳 false
還有更讓你炸裂的特性 function Person(name) { if(name) this.name = name; } Person.prototype.name
= 'ONE MAN'; var p1 = new Person(); console.log(p1.name); p1.name = 'Mike'; console.log(p1.name); var p2 = new Person(); console.log(p2.name); 讀取會follow原型練 寫入不會 ONE MAN Mike ONE MAN
我的意見 • 物件導向的所有特性(類別 繼承 封裝 多形) Javascript都能達成 • 但很少專案會完全導入OOP •
語法本質 => 我不這樣寫還是可以正確交付 • code會變很多 • 如果依賴OOP框架 => 可閱讀性與可移植性變低
ECMA5的好東西 • Array Utilities • Object Getter • Object Setter
• …
Object.keys var obj = { a : 'AAA' , b
: 'BBB' } for(var key in obj) { console.log('obj[' + key + ']=' + obj[key]); } obj.__proto__.c = 'CCC'; for(var key in obj) { console.log('obj[' + key + ']=' + obj[key]); } console.log(Object.keys(obj)); obj[a]=AAA obj[b]=BBB obj[a]=AAA obj[b]=BBB obj[c]=CCC [ 'a', 'b' ] Object.keys不會走prototype chain For-in會
Array in ECMA5 var arr = [1, '2', 3]; console.log(arr.map(function(ele){return
ele*3})); console.log(arr.filter(function(ele){return ele > 1})); arr.forEach(function(ele, index){console.log('arr[' + index + ']=' + ele)}); console.log(arr.every(function(ele){return ele > 2})); console.log(arr.some(function(ele){return ele > 2})); console.log(arr.reduce(function(prev, curr){return prev + curr})); [ 3, 6, 9 ] [ '2', 3 ] arr[0]=1 arr[1]=2 arr[2]=3 false true 123 Map Reduce 正夯
還有更多… • Object.seal • Object.freeze • enumerable and non- enumerable
properties • M$開發者上MSDN JS開發者請上MDN
中場休息
Outline • 介紹是一定要的 • 非同步程式 • 安裝 • 模組機制 •
簡單檔案讀取 • 簡單網頁伺服器
瀏覽器裡的Javascript • 語法來自ECMAScript ◦ 由歐洲電腦製造商協會維護 ◦ 目前第五版 ◦ 第六版快了 •
BOM, Browser Object Model ◦ AJAX, Local Storage, WebGL, Web Audio, WebRTC ◦ W3C維護 • DOM, Document Object Model ◦ W3C維護
Node.js • 語法使用 ECMAScript v5 • 模組機制 • 檔案 檔案系統
網路 程式 • 使用Google的V8 Engine • 編譯成native code執行 • 非常重要 => stop-world GC
同步 (絕大多數) 非同步 (這幾年變紅很多) 非同步與同步 IO wait IO wait IO
IO cmpl IO IO cmpl 非同步會變成多個指令流 像是同步的多執行緒 然而多指令流不代表concurrent 喔
比較 同步 非同步 切換context 中斷(IO Wait, time sharing) 一路玩到掛 平行化
TLP PLP 同步機制 Lock, conditional wait, … Send / wait 同步成本 低 高 單一核心使用效率 低 高
安裝 1. Windows只要一直按next 2. Mac同上 3. Linux建議使用nvm, Node Version Manager
• 推薦優先順序 ◦ Linux > Mac > Windows • 密技 Cloud9 https://c9.io/
Demo
模組機制 • require(‘模組名稱’) • require(‘相對路徑’)
讀取檔案 var fs = require('fs'); console.log(fs.readFileSync(__filename, 'utf-8')); fs.readFile(__filename, 'utf8', function(err,
data) { console.log('async readFile:\n'); console.log(data); }); 用Sync請改去用 Python/PHP/Ruby
HTTP Server var http = require('http'); http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(process.env.PORT); 萬年老梗
結合兩者 var http = require('http'); var fs = require('fs'); http.createServer(function
(req, res) { res.writeHead(200, {'Content-Type': 'text/html'}); fs.readFile('.' + req.url, 'utf8', function(err, data){ res.end(err ? err.toString() : data); }); }).listen(process.env.PORT); Callback hell 下周待續