NW Pie - 老吳的技術探索 Blog

有用 jQuery 操作過 DOM 物件的同學是不是有時候會好奇, 這種把方法不斷的用「點」運算式的背後是怎麼設計的 ? 它叫做 Method chaining, 方法鏈, 比如 jQuery 這麼寫 <div id="d1" onmouseover="foo()">jQuery is fun!!</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function foo() { $("#d1").css("color", "red").slideUp(2000).slideDown(2000); } </script> 可以讓一個黑色文字, 滑鼠移上去時依序 > 變為紅色 > 向上滑動 2 秒 > 向下滑動 2 秒。現在大家傾向這麼寫 $("#d1").css("color", "red") .slideUp(2000) .slideDown(2000); /* 囉嗦又不流暢的寫法 var d1 = $("#d1"); if (d1 != null) { d1.css("color", "red"); d1.slideUp(2000); d1.slideDown(2000); }*/ 較為流暢, 英文叫 Fluent, 每一行有一個重點, 卻又與第一行的物件串在一起, 比傳統這麼寫好多了 wiki  有演示很多語言怎麼實作 Method chaining, 其實重點就是每次呼叫完函式, 把自己 (this or self) 回傳 (當然你回傳 null, 就 GG了)。由於大部分物件是 reference type, 僅回傳物件所在位址, 一般而言就是 4 bytes 的大小, 會影響一點效能但不大, 換...

不知道各位辛苦的開發者, 從英文來解讀這兩個事件, 會不會遇到混淆 ? 每過一段時間, 我就會覺得觸發的順序是先 load 再 ready ? 因為 ready 放在最後面, 這才叫 ready 阿 ! 然後又記錯了, 是很嚴重的相反。只好來做一個探索筆記加深印象。 先講結論, 正確順序是先 ready 再 load, 所以聯想為 "ready to load", 這個口訣希望能幫到大家, 來一起念三次: ready to load ready to load ready to load OnLoad 首先, MDN  文件很清楚這麼說: The load event is fired when a resource and its dependent resources have finished loading. 是完成 load 時被觸發, 也就是 on loaded, on finished, 不是 on loadstart 或 on loading。這是內建的 JavaScript 事件, 常見的用途是在 body.onload, image.onload, 代表資源載入完畢了, 正在操作的用戶開始欣賞美麗的視覺。 OnReady 這個是一個非標準的事件, 並沒有內建, 網路上查到的 onready, DOMContentReady, document.ready ..., 基本上都是後來加工的。最常見的加工就是 jQuery 提供的 $(document).ready 函式, 時機點是 DOM 文件讀取完畢, 進入 ready to load (開始讀取圖片, 影音...等資源), 但對 JavsScript 腳本語言來說, 是絕佳的程式進入點 (因為你可以拿到所有的 DOM 物件了)。 程式筆記 用程式碼來記憶一下順序, 我在系統中撒了一堆程式碼片段, 在 console.log 時也把流水號加上去, 方便了解觸發順序。以下你覺得 log 顯示順序為何呢 ? document.addEventListener("DOMContentLoaded") body onload image onloadstart onloadeddata onload video ...

Web 開發者除了必須了解 HTTP 協定, session 與 cookies 大概也是數一數二重要的概念了。最近不小心爬文爬到 2005 年  Cookieless ASP.NET  這篇文章, 覺得挺有趣, 這邊筆記一下重點。 概念 wiki  關於 HTTP session state 的解釋 HTTP is a stateless protocol. A stateless protocol does not require the HTTP server to retain information or status about each user for the duration of multiple requests. However, some web applications implement states or server side sessions using for instance HTTP cookies or hidden variables within web forms. HTTP 本身是一種無狀態的協定, 這是天生的。所以 session state 其實是一個人工的產物, 微軟在 1997 年推出 ASP 技術時提到這個概念。session state 可以讓應用程序保存 user 的部分資訊做為持續互動用途。每個 session 會有一個唯一的 ID (字符串), 瀏覽器若啟用 cookies 機制則 session ID 會存入 cookies 中 (或其他 hidden 欄位中), 客戶端每次發出 request 的封包內就會夾帶這個 session ID 供伺服器驗證並取回先前資料用。 Cookies 是有問題的東西 ? cookies 好像是個麻煩精 ? 他其實只是一堆文字形式的 key value 組合, 儲存於客戶端, 依據建立連線的 domain 為名的資料夾中, 本身並不是一隻程式, 所以不會有攻擊行為。但就是因為是一個單純的檔案以及文字, 任何安裝於客戶機器上的電腦, 都有機會取得內容, 有些敏感信息可能因此曝光, 更惡意的還可能竄改資料。 使用 Cookieless Sessions 如果因為瀏覽器被取消 cookie 功能或是要...

首先, 一個整體觀, HttpHandler 與 HttpModule 這兩種處理模式, 可以互相搭配運用, 也可以互相取代, 取決於需求。他們的關係如 Implementing HTTPHandler and HTTPModule in ASP.NET 文章提到, 是這樣: 一個 request 可以通過許多 module (IHttpModule 介面), 被整個生命週期期間 (BeginRequest() ~ EndRequest()) 被各種事件函式做加工, 如驗證, 轉址, 寫 Log; 而後透過路由導到 handler (IHttpHandler 介面) 做最後 ProcessRequest() 加工, 如副檔名 .jpg 要做什麼, .zip 要做什麼, 並產生 HttpRequest 的 response。前者 module 類可以攔截所有 request, 而後者 handler 類專注在被分配到的特定資源請求處理。對於一個 web 應用, 這些都是可以選配的類別。 HttpHandler MSDN 解釋: An ASP.NET HTTP handler is the process that runs in response to a request that is made to an ASP.NET Web application. The most common handler is an ASP.NET page handler that processes .aspx files. When users request an .aspx file, the request is processed by the page handler. ASP.NET HTTP 處理常式是為了回應對 ASP.NET Web 應用程式所提出之要求而執行的處理序。最普通的處理常式是處理 .aspx 檔案的 ASP.NET 網頁處理常式。當使用者要求 .aspx 檔案時，會透過網頁處理常式處理要求。HttpHandler 負責特定副檔名資源請求的處理常式, 如 ASP.NET page handler (*.aspx) Web service handler (*.asmx) Generic Web handler (...

路由 (routing) 的組合千變萬化, 但對於 ASP.NET routing 的起手式, 就是這一條: public static void RegisterRoutes(RouteCollection routes) { routes.MapRoute( name: "Default", // Route name url: "{controller}/{action}/{id}", // URL with parameters defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); } 進階的用法非常多, 但專案需求若沒有非常特殊(如多層 routing, 或安全性考量故意混淆), 使用大家約定俗成的 pattern, 其實易於維護。當然還有一種用於 Web API 的 routing 方式, 稱為  Attribute Routing 。就是在 Action 或 Controller 上方標上一行清楚到不行的 routing rule, 個人是滿推薦的, 像下方這樣: public class BooksController : ApiController { [Route("api/books")] public IEnumerable<Book> GetBooks() { ... } [Route("api/books/{id:int}")] public Book GetBook(int id) { ... } [Route("api/books")] [HttpPost] public HttpResponseMessage CreateBook(Book book) { ... } } 是不是非常清楚呢 ? Web API如何Routing 從技術上來看, Web API 是如何做 routing 呢 ? 參考...

參考  Difference Between Razor View Engine and ASPX View Engine  所整理兩種 View 引擎的特性, 提列重點如下, 並於文末針對 Razor 語法做注意事項筆記 (陸續新增)。 Razor View Engine Web Form View Engine 適用於 MVC3 以後版本, Razor 不是一種新的語言, 算一種標記語法 ASP.NET 預設的 View Engine 命名空間為 System.Web.Razor 命名空間為 System.Web.Mvc.WebFormViewEngine 附檔名為 .cshtml (Razor with C#) 或 .vbhtml (Razor with VB) 附檔名為 .aspx 或 .ascx 或 .master. Razor具有更新更進階的語法. 與舊有的 .aspx 頁面語法完全相同. Razor 語法 更直覺或易用, 比如使用  @ 前置詞: @Html.ActionLink("SignUp", "SignUp") 使用 .aspx 既有定義符號 <% 與 %> 如: <% Html.ActionLink("SignUp", "SignUp") %> 預設會預防 XSS 攻擊 (Cross-Site Scripting Attacks), 所以輸出到 View 之前會自動 encode 特殊字元( Scripts 或 HTML 標籤), 如 <,>  預設無預防 XSS 攻擊 不緩存情況, 處理速度稍慢 處理速度比 Razor 稍快 Razor 不支持頁面預覽 用 Visual Studio 可看到頁面預覽 (design mode), 方便不啟動服務進行頁面設計 Razor 支持 TDD (Test Driven Development) , 因為他不與 UI 元件相依, 如 System.Web.UI.Page 類 依賴 System.Web.UI.Page 類, 所以進行 TDD 或測試較為複雜 Layout的定義 微軟  layout  這篇文章帶領的不錯, By conv...

MVC 模式（Model–view–controller）是軟體工程中的一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。 wiki 開宗明義就是這麼說, 且在 1978 年就被提出, 至今已經將近 40 年。說穿了就是一種關注點分離設計概念, 後來各個語言都基於這個概念推出自己的 MVC 架構。ASP.NET MVC 算是發展較晚, 但發展至今大家已經離不開他了。 ASP.NET MVC 的發展歷史, 各版本有滿多差異, 接手 MVC 專案時要特別注意 MVC 版本, 免得一直拿新版本功能硬幹, 或 Install-Package UpgradeMvc3ToMvc4 指令不小心下去, 結果專案死透了。 ASP.NET ASP.NET MVC 的起源其實是 ASP.NET 技術框架,  ASP.NET  技術開發歷史如下 : 1996 : Active Server Pages (ASP) 2002 : ASP.NET 2008 : ASP.NET MVC 2010 :  ASP.NET Web Pages  (Razor)  2012 :  ASP.NET Web API ,  SignalR  ( MVC 4 ,  MVC5 ) 2014 : ASP.NET 5  (ASP.NET Core, Open Source) ASP.NET is a free web framework for building great websites and web applications using HTML, CSS, and JavaScript. You can also create Web APIs and use real-time technologies like Web Sockets. ASP.NET MVC 時間過得真快, 微軟 ASP.NET MVC 框架已經發展快 10 年了 (2007 ~ 2017截稿), 近年來更是每年更新一版, 你在用的是哪一版呢 ? 我自己最多也曾經在服務的公司使用 ASP.NET MVC 5 + Web API 2,...