前篇展示了一個外罩對話框的頁面效果，不過是以一般的 javascript 碼來製成，此篇改以目前還算有人使用的 jQuery 來改寫，看看程式碼有何不同之處。
首先需要引用 jQuery，js 路徑要視存放位址更改就是，
頁面中需要元素的 html 和排列可以清爽如下，也可以都使用程式碼產生，不過這樣做就沒有分工的意義了 = =。
除了工具函式外，其它的碼改寫為下述，
兩篇原始碼比較，利用 JQuery 的優點在於，
- 能夠很方便的將程式碼與 html 排版分離。
- 程式碼較簡潔，少掉一部分非主要邏輯內的建構碼。
- 程式碼文法易讀性較高，例如 .css()、.attr() 等。
- 一些顯示、消失的特效不必自己撰寫，直接使用 jQuery 提供的 .show()、.hide()、.fadeOut() …等即可。
當然 jQuery 的能力絕不僅於此，還有許多的 plugin 可用，此篇主要希望能看到 jQuery 所旨的「Write less, Do more.」效果。
0 意見:
張貼留言