认识 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就完了。假如这样，你就错过了去知道它们为什么优秀的原因，闭门造车总是不好的。