2012/2/16
backbone.js 入門
要用 backbone 之前要先載入 underscore 和 jQuery
backbone是js的一個MVC framework
backbone的主要功能分為兩塊:Model 和 View
他們透過 backbone.Event 來溝通
Model: 負責維護 client, server, view 資料的同步
當Model內的資料被修改,就會驅動 change Event
View: 負責 html render 和 UI event
可以 html template 來做 render
不一定要同時使用 Model 和 View
從Todo這個範例可以看到 單獨使用 View 是可行的
從這行開始看,可以發現這段程式碼其實是用 View 去接管所有的 UI event
而這段程式碼中只有在 event 觸發的函數內使用到 Model
我自己也做了一個測試
backbone 還有一個重要的東西是 Router
Router 的功能是用來做 deep linking
deep linking 技術是改變client網址卻不換頁,只改變了網頁中的某個部分
其實等於是用網址來存client的狀態,這樣做的好處是在轉貼連結可以直接跳到頁的內部
舉例來說我的網頁
http://dl.dropbox.com/u/7377053/JS/etrexJs/ObjectTreeview/InteractiveTreeview.html
在文字框輸入變數名稱可以用來偷看js變數
http://dl.dropbox.com/u/7377053/JS/etrexJs/ObjectTreeview/InteractiveTreeview.html#navigator.userAgent
http://dl.dropbox.com/u/7377053/JS/etrexJs/ObjectTreeview/InteractiveTreeview.html#YAHOO
感謝龍哥的補充
server-side javascript 入門
server-side js 指的是用 js 這個語言
去做一些 php 或 asp 原本要做的事
需要一個專門執行 server-side js 的 server
就像 php server 要裝一些軟體一樣
server-side js 要安裝 node.js
因為執行時是在 server 上執行
所以他當然可以跟server-side的檔案系統和資料庫溝通
server-side 也用 js 寫的好處是前後臺相同的程式碼可以只寫一份
舉例來說
ajax 網頁通常是先開啟網頁後再用 ajax 載入資料
此時要做 html render 需要寫一些 js
但 html render 的工作在後端也會有
如果後端是不同語言 就要維護兩份 code
去做一些 php 或 asp 原本要做的事
需要一個專門執行 server-side js 的 server
就像 php server 要裝一些軟體一樣
server-side js 要安裝 node.js
因為執行時是在 server 上執行
所以他當然可以跟server-side的檔案系統和資料庫溝通
server-side 也用 js 寫的好處是前後臺相同的程式碼可以只寫一份
舉例來說
ajax 網頁通常是先開啟網頁後再用 ajax 載入資料
此時要做 html render 需要寫一些 js
但 html render 的工作在後端也會有
如果後端是不同語言 就要維護兩份 code
2012/2/8
js 的 mouseDown mouseMove 在手機上不能使用的解法
因為手機上使用的 event 是 touchStart 和 touchMove
國外的神人有解,下面是註冊 touch 事件再轉發 mouse 事件的程式
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
});
}
國外的神人有解,下面是註冊 touch 事件再轉發 mouse 事件的程式
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
});
}
2012/2/7
2012 台北國際電玩展
電玩展,大部分都是參加試玩活動送禮物
但是我們進來之後發現一些奇怪的攤位
像是學承電腦、魔術教學之類的攤位
看到第一個 show girl 就是他
我覺得不拍一下他就會有人說我沒來過
不過是用手機+數位變焦拍的難免有點糊
這兩個人應該是工作人員
因為他們兩個人動作一致、跳舞姿勢一流
感覺上這個遊戲如果玩得好
就真的可以上台表演了
投壺送劍任務:
一群玩家手上拿著票給NPC
取得三次投壺機會
其中一次將劍投進壺中
就可以把劍帶走
於是我上前詢問NPC
我:請問要怎樣得到票呢?
送劍NPC:去前面的攤位參加試玩即可得到票。
於是我們按照NPC的指示,順利的解決任務
接著往下走,遇到武器店
趕快看看他賣些什麼
正在路人講話的武器店老闆
大家認真聽老闆講故事
那把大劍的重量超重,而且感覺很有質感
繼續往下走,看到的是勇者留言牆:
牆上的幾張特寫:
同上 同下 同左 同右 同東北 同西南~
98浴室撿肥皂 <- 淫蟲
哥有四多蘭,對面都是菜!
老兄!是"出身",你寫錯了XD
+1 讚
那是我ID 兩個傻B
看到賽車遊戲試玩,重點不是妹,而是硬體設備
重點真的不是妹
show girl 的屁屁移走之後終於看到重點,他頭上戴的是什麼?
攤位上的巨大PSP展示
PS舞台的主持人
和他們家可愛的 TORO貓,邀請路人上台拍照
到了下午人明顯變多
跟書展二館一樣有人擠人的趨勢
但是這裡的空調明顯比較好
比較不會有悶熱的感覺
2012/2/4
2012國際書展
今年的一館
跟之前感覺不太一樣
以前的書展是看不到桌遊的
而今年卻有許多間桌遊的攤位
我原先還以為桌遊攤位會在二館
在新天鵝堡看到了不錯的桌遊:toc toc woodman
店員帶著幾個客人試玩
我在一館買了一本書
因為是喜歡的作者
所以也沒多想就直接買了
一館繞一圈後就前往二館
進入世貿二館內部
發現人口密度比一館高出許多
心裡不禁有個疑問:為何動漫館不設在一館?
在二館看到巨匠電腦的攤位
我完全不知道為啥動漫書展會出現巨匠電腦
可能他以為有雇用三隻初音工讀生就能融入二館吧(看起來都不怎麼樣我就沒拍照了)
跟一館比起,二館的攤位沒幾個
大致上二館的攤位分為兩種:
1. 賣書的
2. 賣周邊商品的
有趣的是,在書展只賣書的攤位都沒什麼客人
第一種攤位大多不用排隊就可以進去
但是第二種攤位的人潮多到靠杯
什麼是多到靠杯?
當你進去二館之後,找到想進入的攤位時
會看到圍繞著攤位的貪食蛇隊伍
當我沿著隊伍走,想要嘗試找到隊伍尾端時
在二館各出入口看到神奇的人工紅綠燈
這是讓貪食蛇排到室外的機制
我發現原來隊伍尾端不是在世貿二館
想要進入攤位嗎?看看這些精美的貪食蛇
逛了一圈二館外圍
看完貪食蛇之後
才發現原來我並不宅
於是我一間攤位都沒逛到就回家了
跟之前感覺不太一樣
以前的書展是看不到桌遊的
而今年卻有許多間桌遊的攤位
我原先還以為桌遊攤位會在二館
在新天鵝堡看到了不錯的桌遊:toc toc woodman
店員帶著幾個客人試玩
我在一館買了一本書
因為是喜歡的作者
所以也沒多想就直接買了
一館繞一圈後就前往二館
進入世貿二館內部
發現人口密度比一館高出許多
心裡不禁有個疑問:為何動漫館不設在一館?
在二館看到巨匠電腦的攤位
我完全不知道為啥動漫書展會出現巨匠電腦
可能他以為有雇用三隻初音工讀生就能融入二館吧(看起來都不怎麼樣我就沒拍照了)
跟一館比起,二館的攤位沒幾個
大致上二館的攤位分為兩種:
1. 賣書的
2. 賣周邊商品的
有趣的是,在書展只賣書的攤位都沒什麼客人
第一種攤位大多不用排隊就可以進去
但是第二種攤位的人潮多到靠杯
什麼是多到靠杯?
當你進去二館之後,找到想進入的攤位時
會看到圍繞著攤位的貪食蛇隊伍
當我沿著隊伍走,想要嘗試找到隊伍尾端時
在二館各出入口看到神奇的人工紅綠燈
這是讓貪食蛇排到室外的機制
我發現原來隊伍尾端不是在世貿二館
想要進入攤位嗎?看看這些精美的貪食蛇
逛了一圈二館外圍
看完貪食蛇之後
才發現原來我並不宅
於是我一間攤位都沒逛到就回家了
訂閱:
文章 (Atom)


























