认识 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）针对上述三点的性能优化，满足客户端的用户体验。

下面来看看MiniUI是如何做的

兼容性

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

分类: JS

标签: JavaScript、jQueryminiUI