Browse by Tags

小試 JavaScript Promise
非同步邏輯是寫 JavaScript 逃不掉的複雜課題,古早流行的做法是傳入 Callback 函式當參數,待特定作業完成再呼叫,缺點是串接程序一旦變多,就會出現波動拳式排版,寫到渾然不知身處夢境第幾層: asyncJob1( function () { //Callback 函式: asyncJob1 完成後呼叫 //...... ayncJob2( function () { //Callback 函式: asyncJob2 完成後呼叫 //...... ayncJob3( function...
在JavaScript模擬C# Dictionary、LINQ Where、Select與OrderBy
一週內被兩位同事問到幾乎相同的問題,這一定是天意!趕緊寫篇FAQ以免天公伯不開心~ 【問題】 用JavaScript要怎麼實現Dictionary<string, T>? JavaScript有沒有類似LINQ Where()、Select()、OrderBy()的東西? 回答第一個問題,JavaScript物件本身就具備Dictionary<string, T>的特性,範例如下: <! DOCTYPE html > < html > < head...
Posted 03 July 2016 12:40 PMJeffrey | with no comments 8,292
Filed under: ,
小技巧-為text-overflow: ellipsis增加完整文字顯示
CSS 的 text-overflow: ellipsis 刪節號效果 可讓長度不一的文字等寬顯示,遇到版面空間有限又必須整齊排列時很好用,但套用刪節號樣式後看不到完整文字,尤其遇上文字前半截相同時更是難以區別,是一大困擾。為此,我的慣用解法是為套用 ellipsis 的文字元素加上 title Attribute 存入完整文字,將滑鼠移到文字上停留就能看到原始文字,問題迎刃而解。 每次套用 ellipsis 還要額外加 title 有點囉嗦,我寫了一小段  jQuery 讓程序自動化...
Posted 03 February 2016 10:44 PMJeffrey | 2 comment(s) 3,463
Filed under: ,
介紹jQuery map()與grep()
寫這篇的動機是常在專案看到「古典式」JavaScript陣列處理,例如:跑迴圈將物件陣列的某個字串屬取出轉成字串陣列、篩選物件陣列取得特定類別的集合。用for迴圈處理沒什麼不對,但既然專案已經用了jQuery,能一行搞定卻寫成三五行不免可惜(程式又不按行數計酬,寫愈多手愈酸咩 XD)。感覺上還有些朋友不認識 $.map() 跟 $.grep() 這兩個好東西,故寫篇文章推薦一下。 若用LINQ做比方,$.map()相當於 .Select(o => 傳回數值或其他型別物件).ToArray(...
Posted 22 June 2015 09:32 PMJeffrey | 7 comment(s) 15,081
Filed under:
讓刪除確認通吃confirm及jQuery.Deferred
最近在寫的元件有個「彈出對話框經使用者確認再刪除」的需求,原本是小事一椿,但之前介紹過 使用自訂確認對話框取代window.confirm 的技巧已廣泛應用在專案裡,某些時候也可能只用window.confirm就打發,問題就變複雜了。 二者最大的差異是前者($.kendoConfirm)為非同步執行,刪除動作需放在jQuery Deferred.promise()的done()方法;window.confirm則為內建同步指令,瀏覽器會等待使用者回應才往下執行,故用 if 判斷 true/false...
Posted 18 June 2015 12:06 AMJeffrey | 3 comment(s) 5,745
Filed under: ,
自製jQuery waitFor函式:等待條件成立執行作業
在寫JavaScript程式時,常有協調非同步作業的需求,像是作業B必須等待作業A完成後再進行,傳統做法多使用Callback函式,例如: function doJobA(callback) { //do something callback(); } function doJobB() { //do another thing } doJobA(doJobB); 學會jQuery.Deferred後,我幾乎都改用Deferred處理非同步作業,不管串接多個作業循序執行[ 參考 ]或等待多項作業完成再進行...
Posted 28 December 2014 06:55 PMJeffrey | with no comments 7,265
Filed under: ,
【答客問】使用jQuery.ajax傳送複雜參數到ASP.NET MVC
讀者小黑提問: 使用jQuery.ajax傳送物件陣列給ASP.NET MVC 一文已示範如何使用jQuery.post()傳遞List<Player>到ASP.NET MVC,但依該做法傳送List<string>卻無法成功,應如何解決? 熬不住手癢,就來動手實測玩看看吧!改寫前文的MVC Action,加入接收string[] mylist參數,同時結果改為players及mylist一併回傳: ///測試用Action,前端接入List<Player>,轉JSON後傳回...
Posted 10 October 2014 06:31 PMJeffrey | with no comments 6,824
Filed under: ,
Yet Another Enter To Tab jQuery Plugin
雖然按 Tab 切換輸入焦點已是Windows操作的普遍慣例,但每回在寫作業平台網站時,規格中總少不了"要能直接按 Enter 切換到下一個輸入欄位"的要求。網路上已經有很多在網頁上用 Enter 取代 Tab 移動焦點的 jQuery Plugin,但很可惜沒有一個100%滿足我的需求,所以,這世上又再多了一個用 Enter 取代 Tab 的 jQuery 套件 (Yet Another Enter To Tab) 囉! 它主要提供以下功能: 允許使用者以"Enter"取代"Tab"鍵移動焦點...
Posted 26 April 2014 12:58 PMJeffrey | 2 comment(s) 7,346
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) 18,969
Filed under: , ,
【茶包射手日記】jQuery.css()傳入數字或字串值的差異
KendoUI由2013.2.716升級到2013.3.1119後,出現kendoWindow指定位置無效的狀況。問題程式碼為$("#w").kendoWindow({ position: { top: 6, left: 6 } }),跟 官方文件 範例相同,原本運作良好,元件升級後失效。推測與元件版本有關,先使用JS偵錯工具找出kendoWindow的position相關邏輯,再比較新舊版kendo.web.js,發現以下差異: KendoUI 2013.3.1119新加入的position...
Posted 05 February 2014 10:04 PMJeffrey | with no comments 6,866
Filed under: ,
使用jQuery傳送物件JSON到ASP.NET MVC
過去介紹過用jQuery 傳件物件陣列 及 字串陣列 到ASP.NET MVC,採取的格式一直都還是application/x-www-form-urlencoded,遇到物件陣列時會編碼成players[0][Id]=...&players[0][Name]=..;JSON是當今傳輸轉換格式的主流,比起Form UrlEncode更直覺易偵錯,如要進行客製有豐富的現成程式庫,是更佳的選擇。 要以JSON格式傳送物件給ASP.NET MVC,除POST內容需為JSON字串,更重要的是HTTP...
使用jQuery.post傳送字串陣列參數到ASP.NET MVC
本範例展示如何透過jQuery.post傳送string[]參數給ASP.NET MVC。 情境模擬訊息發送操作,提供網頁介面供使用者挑選接收者(採用複選式下拉選單)、輸入發送內容後按鈕傳送訊息給指定對象。 ASP.NET MVC Controller如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;   namespace...
Posted 14 December 2013 02:20 PMJeffrey | with no comments 12,242
Filed under: ,
再談AJAX呼叫的同步化
接獲報案: 某網頁透過AJAX新增資料,接著以AJAX方式取回資料清單,卻不見剛才新增的項目,重新整理網頁則正常。 經過一番檢測,確認與AJAX的非同步特性有關, 循序執行AJAX呼叫 的做法先前曾討論過,但這回我們改從問題剖析的角度再切入一次。 試著用以下範例重現問題。假設有一個後端ASP.NET程式如下,傳入參數mode=add時可新增字串元素,mode=clear時清除所有資料,否則傳回字串陣列內容。為求簡化,此處用Session儲存資料取代原本的DB作業。 <%@ Page Language...
Posted 17 October 2013 05:14 PMJeffrey | 9 comment(s) 27,312
Filed under: ,
更多文章 下一頁 »

搜尋

Go

<May 2017>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication