web开辟的那些障眼法

    添加时间:2013-6-16 点击量:

    一、一种需求


    在做Django项目标时辰，并没有太多交互的需求。就比如小我输入的姑且消息，用户登录之后可能会在这个功能上发了很多姑且消息，然则却不是那么首要，有些网站记录到数据库，然则在后台只返回比来的姑且消息。在前台也只是显示几条罢了，是一种即发即得的结果。用户须要的是 【快速】如：



    可能会有下面两种操纵：


    1、写入后台，并前台衬着，返回公布的内容（点击刷新才行）


    2、异步加载的体式格式


    然则对于上方的需求，不免有以下题目：


    1、多次恳求办事器，若是用户闲着没事，猖狂点击公布按钮的时辰，影响机能


    2、若是网速慢的景象下，要等数据加载完成之后才干进行后续操纵，这个对于上述的需求并不有礼。


    既然是 即发即得 且不首要可有可无的器材，没有须要一向浮现，这个时辰就推敲应用障眼法了。


    二、什么障眼法


    那就是点击公布之后，起首用js处理惩罚下，直接copy到页面上，让用户感觉，哇，太快了，一公布就显示出来了。即使网速再慢，也是嗖嗖地。。然后再 后台慢慢的将数据存入，如许岂不是不消显式的守候了。若是要删除的话，也可以处理惩罚成这种体式格式，点击之前显示出来的东东，删除，用jquery删除其自身以 及其所有子节点就可以了，然后再后台慢慢的进行着删除工作。如许用户也会感觉 哇，一点击删除就立马不见了，其实它还在后台慢慢地删除呢。


    （注：本人这段表达晦涩难懂，看下面实例就行了）


    三、实例



    只要总比在后台衬着输入要快的多（重视：基于上方需求）。有人问，若是一刷新那什么都没了。 这个题目我们要做的就是：起首用户一进入该页面会有之前输入的内容进行衬着输出，比如只显示比来的几许几许条。


    然后就应用这个障眼法让用户感觉体验太爽、太快了。


    若是用户刷新的话，那么我们也不消愁闷了，因为数据已经默默地在后台存入了进去，再刷新，就会有之前输入的内容进行衬着输出显示比来的几许几许条。


    四、代码



    <!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>

    <meta http-equiv=Content-Type content=text/html; charset=utf-8 />

    <title>无题目文档</title>

    <script src=jquery-1.8.3.min.js></script>

    <style>

    .content    {width:800px; margin:0 auto; border:1px solid ＃ccc;}

    .input    { border-bottom:1px dashed ＃ccc}

    .box    { padding-top:20px;}

    .box1    { border:1px solid ＃06F; text-align:center;margin:20px;}

    .box_title    { height:30px; width:100％; background:＃09C;}

    body    { background:＃fff}

    </style>

    <script type=text/javascript>

    function create（）{

            var text = ￥（＃txt）.val（）;

            var now = new Date（）;

        now1     = now.toLocaleDateString（）;        //获取当前日期

        now2 = now.toLocaleTimeString（）;        //获取当前时候

        nowtime = now1+now2                     //构成当前日期时候

        var parentdiv = ￥（<div></div>）;       //创建一个父div

        parentdiv.addClass（box1）;             //增长css样式

    

        var childp = ￥（<p></p>）;              //子元素p

        childp.text（text）                       //增长内容

        childp.addClass（box_content）;         //给子元素p增长css样式

    

        var childdiv = ￥（<div><a href=javascript:void（0）><img src=1.jpg  onclick=change（0，this）/></a><span>时候：+nowtime+</span><span><a href=javascript:void（0） onclick=del（this）><b>删除</b></a></span></div>）                      //子元素div

        childdiv.addClass（box_title）          //子元素div增长css样式

    

        childp.appendTo（parentdiv）                  //子元素添加到父div中

        childdiv.appendTo（parentdiv）            //子元素添加到父div中

        parentdiv.appendTo（￥（.box））

    

            /var all = <div class=box1><p class=box_content></p><div class=box_title><button class=btn>开 始</button><span>时候：</span></div></div>

        ￥（.box）.append（all）

            /

    }

    

    function change（id，elem）{

        alert（    A）

        ￥（elem）.attr（{src:    22.jpg，onclick:stop（0，this）}）

    }

    

    function stop（id，elem）{

        alert（    B）

        ￥（elem）.attr（{src:    1.jpg，onclick:change（0，this）}）    

    }

    

    function del（elem）{

        ￥（elem）.parent（）.parent（）.parent（    .box1）.remove（）;

    }

    </script>

    </head>

    

    <body>

    <div class=content>

    <div class=input>

    <textarea rows=4 style=width:95％; margin:10px; id=txt></textarea><br />

    <button onclick=create（）>确 定</button>

    </div>

    <div class=box>

        <div class=box1>

            <p class=box_content>123456789</p>

            <div class=box_title>

            <a href=javascript:void（0）><img src=1.jpg  onclick=change（0，this）/></a>

            <span>时候：</span>

            <span><a href=javascript:void（0） onclick=del（this）><b>删除</b></a></span>

            </div>

        </div>

    

        </div>

    </div>

    </body>

    </html>


    注：此中有两个按钮，开端和停止，点击开端后变成停止并有相干操纵、点击停止后回到开端状况，这个是小我需求，可有可无的器材。


    推荐网站：Django 中国



    所有随风而逝的都属于昨天的，所有历经风雨留下来的才是面向未来的。—— 玛格丽特·米切尔 《飘》
    分享到：