删除代码认识 jQuery MiniUI（一）

最新推荐文章于 2021-07-22 10:45:08 发布

dyl_love98

最新推荐文章于 2021-07-22 10:45:08 发布

阅读量948

点赞数

文章标签：删除代码

本文链接：https://blog.csdn.net/javablogs/article/details/8927429

版权

在改章节中,我们主要介绍删除代码的内容,自我感觉有个不错的建议和大家分享下

前言

以后可能需要应用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就完了。假如这样，你就错过了去晓得它们为什么优秀的原因，凭空捏造老是不好的。

文章结束给大家分享下程序员的一些笑话语录： 3G普不普及现在已经不是看终端了，而是看应用，有好的，便宜实用的应用，花1000多买个能用的智能手机应该不是什么难事。反过来说，你200元拿一个智能手机，没有好的应用，看个电影要几十元，也是没人用3G。

dyl_love98

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
删除代码认识 jQuery MiniUI（一）

在改章节中,我们主要介绍删除代码的内容,自我感觉有个不错的建议和大家分享下前言以后可能需要应用jQuery ＭiniUI，最近在闲暇时光看了下（为什么我老是想到MIUI、小米，擦擦...）。今天对本周的首次学习做一次总结，顺便提几个问题，希望大家能授业解惑。由于官方的介绍比较具体，传送门：http://www.miniui.com。
复制链接

扫一扫