认识 jQuery MiniUI（一）
认识 jQuery MiniUI（一）
前言
以后可能需要使用jQuery ＭiniUI，最近在闲暇时间看了下（为什么我总是想到MIUI、小米，擦擦...）。
今天对本周的初次学习做一次总结，顺便提几个问题，希望大家能授业解惑。
由于官方的介绍比较详细，传送门： http://HdhCmsTestminiui测试数据 。
其中包括了详细的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://HdhCmsTestw3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://HdhCmsTestw3.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测试数据/
该组件是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();
}
}
可以直接把json字符串序列化为对象，不需要实体类。
有时候我们在和服务端交互时，不一定每一次传入的都是真实的实体对象序列化内容，很有可能是我们自己构造的一个json格式的字符串。
用这个方法能快速得到对象，性能不错哦
End每一个优秀的类库或者框架都值得我们去深入学习，不仅仅是拖拖控件、会调用几个API就完了。假如这样，你就错过了去知道它们为什么优秀的原因，闭门造车总是不好的。
分类: JS
标签: JavaScript、jQueryminiUI
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于认识 jQuery MiniUI（一）的详细内容...