Browse by Tags

閒聊:不想走在「最前端」, WebForm 開發者也該學的技能
就用這篇鬼故事當開場吧! 在 2016 年学 JavaScript 是一种什么样的体验? 這幾年 HTML5 火紅,前端開發技術發展如黃河氾濫一發不可收拾,開發框架百家齊嗚,眼花瞭亂不知如何下手就算了,更要命的是市場主流每兩年就轉一次風向,兩年前我才含淚從 Knockout 轉到 Angular ,現在卻眼看 React.js 及 Vue.js 可能把 Angular 的接班人 Angular 2 幹掉 Orz。不只開發框架主流變來變去,連開發工具也整套換光光。還記得兩年前的這篇 Gulp, Grunt...
【茶包射手日記】KO 3.3升級不相容之偵錯練習
專案由Knockout.js  3.2升級到3.3後,某個網頁原本使用<!-- ko if … -->切換元素顯示的功能失效,抓了一陣子才發現原來是寫法有誤,原本該寫<!-- ko if: someFalg -->卻寫成<!-- ko if (someFlag) -->,修改為<!-- ko if: someFlag -->問題即告排除。 但這激起我的好奇心,想找出3.2到3.3造成此一行為差異的根源改變。(其實是手癢想練習JavaScript偵錯技巧...
Posted 14 May 2015 07:52 AMJeffrey | with no comments 3,284
KO範例32-pureComputed
KO 3.2版除了美妙的 HTML自訂元素 ,還有一項小革新 - pureComputed。 依據 官方文件 ,pureComputed 的 pure 借用自 Pure Function,其主要設計理念在於: 計算 computed observable 時不應產生任何副作用。 computed observable 結果不因估算次數或其他「隱藏」資訊而不同,只與其他 observable 值相關,對應到 Pure Function,其他 observable 的值相當於輸入參數。 這定義聽起來好學術...
Posted 09 September 2014 09:20 AMJeffrey | 2 comment(s) 8,634
Filed under:
KO的逆襲-HTML自訂元素上場
先看展示: 這是一個很簡單的 MVVM 繫結示範,模擬網頁常見「給幾顆星」的評分機制。上方透過 click 事件修改observable,同時繫結到下拉選單及Score=文字顯示。同一 observable 繫結到兩個 UI 元素的情境對KO來說是小菜一碟,不足掛齒,但 HTML 裡有玄機: < div > < star-rating params ="value: score" ></ star-rating > </ div >...
Posted 04 September 2014 07:01 AMJeffrey | 2 comment(s) 7,833
Filed under:
KO範例31 - 也來寫野生官網好了
市長候選人柯P的競選團隊前幾天做了一件有趣的事(只有程式魔人覺得有趣),突發奇想地將官網內容 透過Web API 方式提供,歡迎開發人員自行開發野生官網。昨天,保哥瞬間變出 AngularJS版 ,好不神奇! 依我的理解,這個需求還算簡單,應該也難不倒knockout.js,而更重要的是,這年頭大家都去玩NG了,如果我不寫,全台灣應該也沒有其他人會為Knockout寫範例了(KO堂口冷冷清清,頓時感到寂寞空虛覺得冷)。身為KO粉絲,我做了我該做的事 - 無關政治,但柯P官網API KO版範例來了...
從Knockout到AngularJS
照片出處: http://www.geograph.org.uk/photo/360000 作者: Barbara Voules 兩年前初見 Knockout.js 後便一腳踏入MVVM世界無法回頭。學習簡單很快上手,用Knockout做出錯誤少又容易擴充維護的AJAX網頁。在此之前,為了讓欄位連動,總要寫一堆<input>、<select> onchage、onclick事件,事後常需要在一堆事件程式碼裡追查更動來源,更糟的是稍一調整就常因觸發順序改變導致錯誤,修改維護是件苦差事...
Posted 07 June 2014 09:37 AMJeffrey | 11 comment(s) 47,614
Filed under: ,
KO範例30 - 可排序的多重選擇器
專案裡的介面需求: 網站需開放使用者由候選清單挑選多個項目放入組成清單,組成清單的項目要能調整順序。 實作範例如下,就想像從三國武將中挑選精英組團打副本吧!(裡面有個黑大是什麼東西?) 並可調整出場順序。 搬出Knockout,運用下拉選單的options、selectedOptions多選繫結加上JavaScript陣列基本操作,就能讓選取項目在兩個<select>間搬移;至於選取項目在陣列上下移動,以前我只會傻傻用for跑迴圈搬動,學會splice()後,就能用兩行指令優雅地完成...
Posted 02 June 2014 11:35 AMJeffrey | 3 comment(s) 8,604
Filed under:
HTML5上傳作業進度條-SignalR進階版
【前情提要】 利用File API與XHR2 onprogress事件,我們成功做出 檔案上傳進度條 。但我在工作上常遇到另一種情境 -- 內部系統的上傳轉檔作業。營運資料檔案一般不大,加上在Intranet裡傳輸,上傳只在彈指間,Server端解析資料、塞入資料庫才是重頭戲,常得耗上幾十秒到幾分鐘。這種狀況下,用XHR2做進度條的意義不大,咻! 一秒不到就從0%到100%,但上傳資料何時能處理完只有天知道? 使用者終究又陷入無法得知系統還在跑或者已經當掉的焦慮。我想起了"SignalR"...
HTML5檔案上傳進度條
在傳統網頁上傳大檔案,得等到全部傳完才會有回應,等待期間沒消沒息,搞不清楚是沒傳完還是當掉常為人詬病,也嚴重破壞使用者體驗。想在傳輸過程回報上傳進度,過去有些Flash、Java Applet或ActiveX的解決方案,但依賴外掛元件有部署及無法跨平台的疑慮。當HTML5規格漸成主流,長久以來的問題總算有了簡潔有效的解法。 要掌握上傳進度有一個關鍵: Client Script必須掌握檔案大小以及已上傳資料量,才可能計算上傳百分比回報狀態。傳統使用<input type="file">選取檔案配合<input...
HTML5練習-從桌面拖拉檔案到網頁
這年頭,網頁如果不支援從桌面或檔案總管直接拖拉檔案,想自稱HTML5都心虛,只能稱作HTML4.5(誤),老闆客戶還會不時打你臉: "Gmail、OneDrive(SkyDrive)、DropBox幾百年前就有了! 為什麼你到現在還做不出來?" (網頁攻城獅內心的OS: 你有給我Google或Microsoft等級的薪水嗎?) 搞網頁好辛苦,客戶老闆上網胡亂逛,不小心看到酷炫網站,馬上把規格放進專案,還說什麼瀏覽器打開HTML、CSS、JavaScript都能看,快點抄一抄給我做出來...
Posted 08 March 2014 12:13 PMJeffrey | 6 comment(s) 21,824
Filed under: , ,
Coding4Fun-馬拉松照片搜尋輔助工具
現在的跑者愈來愈幸福,每逄賽事總能見到馬拉松世界、運動筆記所出動或熱心自發的攝影大人,揹著沈重攝影器材,不畏日曬雨淋地在賽道旁補捉跑友身影,賽後再上傳至網站供跑友自取留念。(在此特向辛苦的攝影大哥大姐們致敬) 不過一場比賽常有成千上萬張照片,要在茫茫照片大海找尋自己的英姿有點小挑戰。照片雖然都已依拍攝時間排序,有時更會貼心註明拍攝地點,但要記下自己在何時何地遇到那家攝影師談何容易? (對我來說,記得要吸呼都快來不及了 XD) 我研究出最好的方法,是先由照片裡其他跑友的號碼布查出比賽成績,與自己的成績比較...
400米跑道配速對照表
最近在400米跑道練配速及間歇,開始在意每圈的配速精準度。消費型GPS裝置誤差大於10公尺,但測試數據時而偏東時而偏西,累計下來截長補短,倒也不致偏差里程太遠。依經驗,GH-625M一圈400米平均有10-15米誤差,訊號不佳時甚至多到50米;Bryton Cardio 40H的心率頗準,但GPS誤差較大(由軌跡來看,靠近綜合教學大樓時飄得特別凶,高樓建築遮蔽訊號應是主因),有時甚至一圈多出90米近25%,6分速當場變成5分速。 在操場繞圈,測速不必捨近求遠。跑道距離是已知的,用每圈所耗時間除以單圈距離就能換算精確配速...
Posted 18 February 2014 05:40 AMJeffrey | with no comments 12,927
Filed under: ,
Knockout.js 3.0
Knockout.js在去年10/25 釋出3.0版 ,手上專案總算由焦頭爛額推進到火燒屁股(好像沒有比較好耶 XD ),便開始著手進行一些零散重構,也順便升級第三方程式庫(有個IE11問題要靠KendoUI升級解決),Knockout.js也想一併升級成3.0。整理Knockout.js 3.0資訊如下: 【Breaking Changes】 俗話說: "先研究不傷身體,再講求效果"。一般升級的首要考量不是有哪些新功能,而是有哪些功能被拿掉,看到酷炫新功能之前網站就先掛點,肯定惹來白眼...
Posted 28 January 2014 01:31 PMJeffrey | with no comments 11,999
Filed under:
KO範例29 - ko.computed隨堂測驗
專案出現一個ko.computed()應用實例,剛好可以考驗開發者對ko.computed()了解是否透徹。各位同學,準備接招! 需求是這樣的,有A、B、C三個欄位,若使用者修改A或B,C需更新為A + "-" +B;若使用者直接修改C,則以其輸入字串為主,忽略前述由A/B計算C的邏輯。另外,若由Server端讀取,ViewModel要更新為由資料庫讀取所得的A、B和C。 <! DOCTYPE html > < html xmlns ="http:...
Posted 23 September 2013 10:53 PMJeffrey | with no comments 5,248
Filed under:
KO範例28 - 轉換對象(排除自己)之下拉選單連動
專案需求一枚,用於匯率換算。來源幣別及目標幣別以下拉選單方式顯示,想當然爾,目標幣別跟來源幣別相同還轉換個屁,因此規格提到: 目標幣別的下拉選項應包含所有幣別,但排除來源幣別當下的選取幣別,特殊的下拉選單連動需求應運而生。 要用KO實現此一連動並不困難: 為兩個<SELECT>各宣告一個observableArray作為options繫結對象,也各宣告一個observable作為value的繫結對象以對應下拉選單選取值;接著宣告一個computed函式建立來源幣別選取值與目標幣別observableArray的關聯...
Posted 30 August 2013 04:29 AMJeffrey | with no comments 6,998
Filed under:
更多文章 下一頁 »

搜尋

Go

<November 2017>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication