The Will Will Web | JavaScript

The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

前端工程研究:理解函式編程核心概念與如何進行 JavaScript 函式編程

函式編程 ( functional programming ) 在這幾年變得有點熱門,像是 React 這套 JavaScript 框架,如果想學好他,通常也都必須要先熟悉函式編程的開發方法才行。畢竟函式編程只是一種程式設計方法,只要程式語言本身可以符合函式編程的基本概念,就可以宣稱用函式編程來開發程式。今天這篇文章,就想以 JavaScript 程式語言為出發,帶大家理解 JavaScript 函式編程的魅力與重要的核心概念。

... 繼續閱讀 ...

前端工程研究:關於 JavaScript 中 Date 型別的常見地雷與建議作法

今天這篇文章,我想來談談 JavaScript 到底如何實作「日期字串」格式解析,日期時間有太多種表達方式,一般人在剛接觸日期格式的時候,都不會想太多跨瀏覽器的問題,通常都是遇到問題的時才來靠北瀏覽器有多爛多爛。有趣的是,有時候還會怪錯對象,例如 XXXX 框架好爛,我寫 JS 這麼久都沒遇過這問題,用了 XXXX 框架才遇到的。現在,我們就開始來對這個說常用不常用,用到時不熟悉的「日期」型別,話說從頭。

... 繼續閱讀 ...

關於 TypeScript 2.0 之後的模組定義檔 ( Declaration Files ) ( *.d.ts )

為了讓 TypeScript 能與目前市面上各種 JavaScript 模組/函式庫一起運作,模組定義檔 ( Declaration Files ) ( *.d.ts ) 是 TypeScript 不可或缺的一部分,從最早期的 TSD (TypeScript Definition manager for DefinitelyTyped) 工具,到去年十月才推出的 typings (The TypeScript Definition Manager) 工具,今年六月 TypeScript 開發團隊決定從 TypeScript 2.0 改用 npm 來管理所有的模組定義檔,有在使用 TypeScript 的開發人員得要注意囉!

... 繼續閱讀 ...

如何修改 Visual Studio Code 內建的 TypeScript 版本

最近這兩周由於 Angular 2 已經來到了 RC5 版本,且 Angular CLI 也來到了 1.0.0-beta.11-webpack.2 版本,正式改用 webpack 作為 Angular 2 今後的模組管理工具,專案的整體編譯速度比以前用 SystemJS 快了好幾倍,我們用的非常開心。但唯獨有一點不太理想,就是當 Angular CLI 升級後所建立的專案,在 Visual Studio Code 裡面一直會出現討厭的警告訊息 ( 紅色下曲線 ),在經過幾天的消化與研究之後,終於發現原來是 Visual Studio Code 與 TypeScript 的問題,欲知詳情,請繼續看下去!

... 繼續閱讀 ...

我要成為前端工程師!給 JavaScript 新手的建議與學習資源整理

今年有越來越多企業開始跟我們接洽企業內訓的事,想請我幫他們培訓前端工程師,但你知道一個好的前端工程師絕對不是兩三個月可以養成的,需要多年的努力與磨練才會有點成績。而這幾年可謂前端正夯,有為數不少的人開始大規模的往前端開發移動,而我被問到最多的問題就是「請問 JavaScript 要怎麼學?」或「請問 JavaScript 該怎樣入門?」諸如此類的問題。大家都知道,對於一門程式技術來說,「會寫」與「會教」是兩個截然不同的領域,會寫 JavaScript 的人到處都是,但是會教的人就相對少很多了。我這幾年教授 JavaScript 開發實戰課程已經超過 15 梯次,在將近 500 位學員裡面,我所看到的大部分學員都是對 JavaScript 不勝理解,普遍處於一種一知半解、模糊不清的狀態。另一方面,我在公司內部也帶過不少工程師,總是有人會想學習 JavaScript 但不知道如何入門的情況,這讓我陷入深思,該如何幫助一個人學習 JavaScript 從入門到精通呢?本篇文章將說說我個人的一些想法與建議。

... 繼續閱讀 ...

如何從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 檔案

前幾天一個負責前端的同事遇到一個問題,在實驗一些 JavaScript 函式庫時,發現無法直接從 GitHub 載入 JavaScript 檔案,Google Chrome 的 Console 視窗 (在開發者工具裡) 會出現一段 Refused to execute script from 'https://raw.github.com/moment/moment/develop/min/moment.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 的紅字 (紅字代表嚴重錯誤),而導致網頁無法正確執行,這篇文章將分享幾個注意事項,還有從 GitHub, Gist, JSBin, CODEPEN 載入 JavaScript 範例程式或函式庫的使用技巧。

... 繼續閱讀 ...

前端工程研究:HTML/CSS/JavaScript 相容性檢查資源整理

我們公司自從開出前端的職缺並成功找到人才後,就開始積極的切割 前端 / 後端 的工作,期望前後端的分工架構能夠形成,將網站建置的品質持續向上提升。然而,前端的工作並不輕鬆,其中一個很沒效率的工作就是「跨瀏覽器相容性測試」,經常擊倒不少人,因此打算整理一些不錯的相關資源,如果各位有任何推薦的相關資源,歡迎隨時留言給我,我隨時加上,感恩。

... 繼續閱讀 ...

前端工程研究:關於 JavaScript 中物件的 valueOf 方法

在 JavaScript 程式語言裡,這個 valueOf() 函式算是非常少用的一個內建函式,甚至於很多人連聽都沒聽過。然而,這個 valueOf() 函式十分重要,我在研究之後發現,理解了 valueOf() 的用途後,不但更能理解 JavaScript 如何針對物件進行數值布林字串運算,更能夠利用 valueOf() 解決 使用者定義物件 無法比對大小的問題。

... 繼續閱讀 ...

介紹好用工具:JS Bin ( 網站前端工程師的學習利器 )

我好像很久沒有介紹好用工具了,並不是我偷懶不玩工具,而是最近介紹工具的資訊大多分享在 Will 保哥的技術交流中心 為主,不知道的人記得過去按「」喔。今天這篇文章,主要介紹 JS Bin 這套好用的網頁前端工具,我覺得 JS Bin 介面非常簡潔,非常對我的胃口,雖然此工具還在不斷發展,但是目前的品質已經非常好了,因此覺得可以發表一篇文章來介紹這套工具,並分享一些不容易發現的使用技巧!

... 繼續閱讀 ...

前端工程的極致精品: AngularJS 開發框架介紹

有好長一段時間,一直在尋尋覓覓一套好用的前端 JavaScript 框架,看過了 ExtJSBackboneJSEmberJSKnockoutJS、… 與各家比較後,最後終於情定 AngularJS 這套。其優異的框架設計像是 宣告式語法 (Directives)、DOM Templates、雙向資料繫結 (Two Way Data-Binding)、相依性注入 (Dependency Injection) 與關注點分離等特性,都深深地打動著我,但神奇的是,在台灣竟然看不到幾篇關於 AngularJS 的文章,這感覺就跟我三年前毅然決然踏入 ASP.NET MVC 的領域一樣,不過,不管別人用不用,我是用定了! (^_^)

... 繼續閱讀 ...

介紹好用工具:Compat Inspector ( 驗證網頁在 IE 的相容性 )

我在前天 2012 微軟開發者大會 (2012 Microsoft Developer Day) 演講的主題是 HTML5 開發技術於 WIN8 及 IE10 上的應用,為此演講我準備了不少內容,總覺準備的剛剛好,而且覺得少講一點都不行,前一天在公司內部排練 (Rehearsal) 時講了 90 分鐘左右才講完,但此次演講只有 50 分鐘而已,因此必須刪除部分內容才能準時講完,而刪除的內容就是很棒的 Compat Inspector 工具,因為我覺得這工具寫成文章比現場演說來的容易學習,就來看看這個神奇的工具如何檢測你的現有網站吧。

... 繼續閱讀 ...

Visual Studio 11 新功能介紹:CSS 與 JavaScript 編輯器

之前在 Visual Studio 2010 中要編寫 CSS 或 JavaScript 不是很方便,充其量只能說是個「文字編輯器」而已,不能被稱為「開發工具」,但這些編輯器在 Visual Studio 11 已經大幅進化,眾多的貼心功能不得不大聲叫好,尤其是 CSS 編輯器改進的幅度最大,就讓我們來看看有哪些增進的好用功能吧。

... 繼續閱讀 ...

2011 微軟開發者大會:Migrate to HTML5

今天是 2011 微軟開發者大會 的日子,我主講 Migrate to HTML5 這個主題,前陣子也做過幾個 HTML5 的專案,當時濛濛懂懂的亂做一通,不知道有那麼多好東西、好工具可用,但因為這次演講我收集了不少資料,也看了幾本 HTML5 的書與 W3C 部分規格內容,而最近 Visual Studio 2010 又推出了個 Web Standards Update for Microsoft Visual Studio 2010 SP1 擴充套件,許多經驗還真的都很自然的連結在一起,這感覺真不錯。備註:一般來說我的演講行程都會公告在 Will 保哥的技術交流中心的 Facebook★★★ Will 保哥的噗浪 ★★★ 上,有興趣的人可以在上面按個讚或按個追蹤。

... 繼續閱讀 ...