認識 jQuery MiniUI（一）
前言
以后可能需要使用jQuery ＭiniUI，最近在閑暇時間看了下（為什么我總是想到MIUI、小米，擦擦...）。
今天對本周的初次學習做一次總結，順便提幾個問題，希望大家能授業解惑。
由於官方的介紹比較詳細，傳送門：http://www.miniui.com。
其中包括了詳細的API調用、示例代碼等， 所以本文就不會對這些API進行單獨的介紹。
本文僅作個人技術學習使用，無任何商業背景，請不要跨省（開個玩笑）
為什么要用
通過官方的DEMO，不難看出這套前端框架的樣式、功能都非常強大，基本覆蓋了我們開發中常用的按鈕、文本、下拉框、列表、樹形結構、導航等等。
甚至如果你想快速搭建一個頁面，也有布局控件可以參考。當然僅僅是布局的話還是推薦使用bootstrap
傳送門：http://wrongwaycn.github.io/bootstrap/docs/index.html。因為專業才是王道，還有它不收費
既然已經選擇了jQuery MiniUI，那還得回到正道上來，不走邪路。。。
據我膚淺的認識，一個好的前端框架，至少能滿足下面三點：
1）樣式兼容各主流瀏覽器，IE至少是IE7+，開發者必須勇敢的拋棄IE6。
2）腳本兼容各主流瀏覽器，所以會選擇一個廣受歡迎的JS類庫，例如：jQuery
3）規范與服務器端進行數據交互的傳輸格式，例如：json
4）針對上述三點的性能優化，滿足客戶端的用戶體驗。
兼容性
我們以一個最簡單的Button控件為例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <link href="scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" /> <script src="scripts/miniui/miniui.js" type="text/javascript"></script> </head> <body> <input id="helloBtn" class="mini-button" text="Hello" onclick="onHelloClick"/> <script type="text/javascript"> function onHelloClick() { mini.alert("Hello MiniUI!"); } </script> </body> </html>
以上是在vs2010中編寫的代碼，在通過查看運行后生成的源代碼：
1）毫無疑問，它引用了jQuery，我下載的demo內部版本是：jquery-1.6.2.min.js，但並不是最新版。
2）使用自己的樣式“格式化”了HTML標准標簽，使其兼容性更好，樣式更美觀。
我並沒有在源代碼中找到相應的處理過程，demo中css和js都被壓縮過，看着很蛋疼，想格式化一下，無奈卡着了，哎！
Q1：這樣的二次解析HTML標簽，是否會帶來性能的損耗？這種方法在前端框架中是常見的嗎？或者必須的？
在編寫上述代碼中，無意間發現了一個小意外，具體過程如下：
先來看標准的寫法，在上面的代碼片段的body中換入如下的內容
<input id="helloBtn" class="mini-button" text="Hello" onclick="onHelloClick" /> <input id="Text1" type="text" /> <script type="text/javascript"> function onHelloClick() { alert("校驗不通過，不允許刪除!", "測試"); if (confirm("確認要刪除嗎？")) { $("#Text1").val("delete something"); } } </script>
運行后，彈出框的順序依次是，這是在正常不過的了：
接着我換成miniUI的API，將script標簽中的內容替換成：
<script type="text/javascript"> function onHelloClick() { mini.alert("校驗不通過，不允許刪除!", "測試"); mini.confirm("確認要刪除嗎？", "測試", function () { $("#Text1").val("delete something"); }) } </script>
運行后，彈出框的順序依次是：
Q2：水平不行，無法解答，特提個問題，WHY？
數據交互
demo中bin文件夾下有個dll，相信大家都見過
Newtonsoft.Json.dll，傳送門：http://json.codeplex.com/
該組件是c#編寫的，有2.0、3.5、4.0、4.5等.net framework版本，並且通過Reflector能夠清晰的發編譯出源代碼
顯然，miniUI采用了最普遍的json方式來進行前端和服務端的數據交互。
題外話：Newtonsoft.Json.dll，個人感覺是現在存在的非常優秀的json操作類庫，下面的截圖取自於官網，比較的是與.Net自帶的序列化類的性能。
下面舉例一個很方便的方法：
using Newtonsoft.Json.Linq; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string _strJson = "{\"id\":\"100\",\"names\":\"zhangl\"}"; var _objJson = JObject.Parse(_strJson); Response.Write(_objJson["id"]); Response.End(); } }
輸出：100
可以直接把json字符串序列化為對象，不需要實體類。
有時候我們在和服務端交互時，不一定每一次傳入的都是真實的實體對象序列化內容，很有可能是我們自己構造的一個json格式的字符串。
用這個方法能快速得到對象，性能不錯哦
End
每一個優秀的類庫或者框架都值得我們去深入學習，不僅僅是拖拖控件、會調用幾個API就完了。假如這樣，你就錯過了去知道它們為什么優秀的原因，閉門造車總是不好的。