Browse by Tags

閒聊:不想走在「最前端」, WebForm 開發者也該學的技能
就用這篇鬼故事當開場吧! 在 2016 年学 JavaScript 是一种什么样的体验? 這幾年 HTML5 火紅,前端開發技術發展如黃河氾濫一發不可收拾,開發框架百家齊嗚,眼花瞭亂不知如何下手就算了,更要命的是市場主流每兩年就轉一次風向,兩年前我才含淚從 Knockout 轉到 Angular ,現在卻眼看 React.js 及 Vue.js 可能把 Angular 的接班人 Angular 2 幹掉 Orz。不只開發框架主流變來變去,連開發工具也整套換光光。還記得兩年前的這篇 Gulp, Grunt...
潛盾機-網頁版COPY指令產生器
工作環境有不少Web Farm主機,部署程式時需要將一或多個檔案同步複製到多台主機上,依上線流程需產生指令檔交給OP人員執行。這種需求用COPY、XCOPY或ROBOCOPY指令寫成批次檔是最直覺有效的做法,但以「將四個檔案複製到八台主機」為例,需寫成32條指令,沒營養又躲不掉的枯躁苦工,交給機器人才是王道。 輸入IP清單轉成一串指令的小工具,印象裡我寫過WinForm版也寫過WebForm版,最近有類似需求,卻不幸遇到記憶斷層,怎麼也想不起程式放哪… Orz 心一橫,索性拿它當成練功題材,花了點時間寫成純前端網頁版...
使用Visual Studio Code開發Angular 2專案
Angular 2於9/13推出RC7,許多人還在懷疑該不會一直到RC18吧?說時遲那時快,Angular 2 Team忽然在兩天後中秋節這天,閃電宣佈Angular 2.0進入正式版! 身為開發老兵,近年已鮮少加入Beta、Tech Preview版先鋒部隊拓荒,習慣等正式版再認真以待,一則避免發展早期規格一變再變白走冤枉路,二則愈晚開始,規格、工具愈成熟,參考資源也愈多。雖依黑暗技術守則第15條:「早學搶先機,晚學撿便宜」,但NG2已成為工作專案的正式選項,只能乖乖面對新挑戰,看開發教學配月餅文旦...
NG筆記29-下拉選單連動
跟同事討論到下拉選單連動(最常見的經典應用是縣市、行政區下拉選單連動,選取縣市後自動換成該縣市的行政區清單),這才發現針對這門必修課,我只寫過 KO版範例 ,沒寫過NG版,趕緊補上。 我寫了一個三層式下拉選單連動範例,在ViewModel中安排Level1、Level2、Level3三個屬性保存下拉選單選取結果,另外用L1Options、L2Options、L3Options分別存放Level1-3的下拉選單選項。透過$scope.$watch(),在Level1變動時更新第二層選項,在Level1或Level2變動時更新第三層選項...
Posted 02 August 2016 07:59 AMJeffrey | 13 comment(s) 8,179
Filed under:
NG筆記28-Checkbox清單進化版
很久以前就寫過Angular版的 Checkbox清單 ,不過當時的版本有點簡陋,只能以字串陣列作為來源。我心目中的理想Checkbox清單元件,應該要像ng-options能用物件陣列當作資料來源,最好還可以切換單選模式(我知道改用Radio就能單選,但規格書不時出現註明要單選的Checkbox清單),沒找到前人寫好的現成作品,那就自己刻一個吧! (「花更多時間去找元件」 vs 「把時間省下來自己寫一個」 常讓人左右為難,尤其當技難度不高,有時找輪子耗費的心力比造輪子還多!) 範例: $scope...
Posted 01 August 2016 07:35 AMJeffrey | with no comments 4,461
Filed under:
筆記:Angular 2介紹 by Brad Green
影片 Brad Green (Google Angular開發團隊的主管) 在微軟MVP年會講了一場Angular 2(微軟的人到蘋果發表會站台,Google主管跑到微軟MVP年會做簡報,世界真奇妙 :P),完整影片前陣子放到Channel 9,雖然沒去美國參加MVP年會,基於已開始靠Angular吃飯又是來自「原廠」的第一手資訊,就認真當好學生把影片看完,當然筆記也是一定要的:(這場屬概觀式介紹,很多東西沒深入細講,先了解關鍵字就好) NG1在全世界已經有110萬名開發者。 https://www...
Posted 30 November 2015 06:49 AMJeffrey | 2 comment(s) 13,363
Filed under:
Angular顯示大量物件效能測試
前幾天調查 KendoGrid+Angular效能變差三倍 的,推測問題根源不在KendoGrid,而在於Angular建立2000個具有獨立$scope的DOM元素,本身就是重度耗用資源工作。換句話說,就算不用KendoGrid,改以ng-repeat實作產生2000個頁面元素,對效能一樣是嚴峻考驗。光憑想像永遠不知真相,實地測上一回自然會有方向! <! DOCTYPE html > < html > < head > < meta charset ="utf...
Posted 07 November 2015 04:41 PMJeffrey | with no comments 7,022
Filed under:
KendoGrid+Angular顯示大量資料的效能問題
接獲使用者反應,某個使用KendoGrid顯示大量資料的網頁,用IE檢視的話速度慢到嚇人。聞此言,馬上打開IE11測試,果真嚇得我差點閃了兩滴… 也太慢了吧! 先交代問題情境,專案使用Angular搭配Kendo UI開發,順理成章使用Kendo UI提供的Angular Directive,寫成<div kendo-grid …>,資料筆數偏多,大約一千多到兩千筆,基於KendoGri的強大彈性及高複雜度,處理起來多耗點時間倒也合理,但這個案例在IE的表現與期望出入頗大,值得調查。...
KendoGrid+Angular模版+欄位凍結 造成列高異常
Kendo UI 支援 Angular ,手上 Angular 寫的專案幾乎都用 Kendo UI 網頁控制項刻介面。在 KendoGrid 的欄位設定中,欄位模版也可以嵌入 Angular 語法,挺好用的,如以下的例子: 將第一欄的template設定為字串"{{dataItem.CostCenter}}({{dataItem.CostCenterName}})",KendoGrid將執行Angular繫結,在欄位顯示"分公司代碼(分公司名稱)"。第二欄的template則使用另一種做法...
Posted 03 October 2015 07:29 AMJeffrey | with no comments 3,733
Filed under: ,
使用TypeScript撰寫Protractor測試
裝好Protractor ,就可以動手寫測試了。Protractor預設使用Jasmine,之前寫Angular單元測試時 玩過 ,語法並不陌生,但是用慣神兵利器,遇上超過一百行的JavaScript,少了Visual Studio + TypeScript拎杯根本活不下去,啊啊啊啊~(顯示為鎚子被沒收的雷神索爾在地上打滾) 因此,首要任務得找出使用TypeScript撰寫Protractor測試的方法。我選擇用VS2013開啟一個空白Web Apllication專案,不啟用MVC、Web API也不啟用WebForm...
Posted 23 May 2015 08:35 AMJeffrey | with no comments 5,005
Protractor Windows安裝補充
打算用 Protractor 做網頁End-to-End測試。Protractor是Angular的主流測試工具,End-to-End測試時會開啟瀏覽器連上網站模擬各種操作,以使用者角度實際驗證功能是否正常。 第一步要在開發機器Windows 8安裝node.js跟Protractor,主要參考Paul Li圖文並茂的介紹文- Protractor - 環境設定篇 ,安裝大致順利,但過程遇到一些小亂流,特筆記之。 第一個問題來自公司的特殊網路環境,基於資安監管要求,網管設備攔截HTTPS傳輸從中抽換SSL憑證...
Posted 22 May 2015 07:56 AMJeffrey | with no comments 4,551
Filed under: ,
NG筆記27-呼叫Directive內部函式
開始寫Directive之後,常面臨一個難題:Directive提供函式執行特定作業,當我們在DOM中引用Directive,如 先前介紹 透過Isolated Scope宣告{ callback: "&" },就可輕鬆由Directive呼叫外部Scope的Callback函式;但反過來,外部Scope要怎麼觸發Isolated Scope內部的函式呢? 歷經一些研究、嘗試,我找到幾種做法,整理分享如下。 先說明範例情境,我寫了一個無聊的Directive serverTime...
Posted 08 April 2015 07:18 AMJeffrey | with no comments 5,089
Filed under:
NG筆記26-再談Angular物件化寫法與JavaScript壓縮注意事項
專案再遇到Angular JavaScript原本執行正常啟用壓縮(Minification)後冒出找不到nPrivder、bProvider等錯誤訊息,這是Angular Dependency Injection機制因壓縮變數更名崩壞的典型案例,但訊息詭異(nProvider、bProvider是啥鬼?)常讓新手迷惑,特寫篇筆記補充。 用一個簡單的ViewModel及Service範例來說明。 開始前,先花一點時間說明Class化(物件化)的概念。雖然在許多Angular教學中,寫個function就能做出Controller...
Posted 07 April 2015 08:10 AMJeffrey | with no comments 6,860
Filed under:
NG筆記25-如何將Directive Isolated Scope宣告為TypeScript強型別?
NG範例23-使用Directive建立自訂網頁元素 介紹過好用的自訂元素。除了資料互動不高的單純DOM操作Directive,一般我們都會另建獨立Scope(Isolated Scope)避免彼此干擾。而Isolated Scope宣告時需指定{ propA: "=", propB: "@" }形式的scope物件,供NG參照建立參數對應,因此不像Controller、Service可以寫成獨立類別,而這衍生的副作用則是-scope參數在link函式裡被視為任意型別...
NG筆記24-KendoAutoComplete自動完成之花式應用
對於Kendo UI AutoComplete的Client端應用,過去的印象還停留在「提供字串陣列作為資料來源」、「指定contains、startswith、endswith進行比對」、「提示項目跟帶入欄位值都來自字串陣列」、「不能限定比對吻合項目上限」,感覺不如 jQuery自動完成 彈性。如以下範例: Live Demo 若要做到更特殊的比對邏輯或想限制提示筆數,倒是可用serverFiltering實現,將輸入關鍵字以AJAX方式交給伺服器端程式比對再傳回提示項目結果。但對SPA及打算包成App的情境...
Posted 22 March 2015 11:30 AMJeffrey | with no comments 5,427
Filed under: ,
更多文章 下一頁 »

搜尋

Go

<July 2017>
SunMonTueWedThuFriSat
2526272829301
2345678
9101112131415
16171819202122
23242526272829
303112345
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

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

文章典藏
其他功能

這個部落格


Syndication