微博小案例

01 实现点赞和踩的功能

实现思路：

（1）要实现点赞和踩的功能，需要给点赞，踩等按钮添加点击事件
（2）在写入微博内容之后，先找到对应的标签（通过div.find("class")）;
（3）抽取方法addTopClickEvent|addDownClickEvent等,把查找到的标签作为参数传递给该方法
（4）说明顶和踩等操作都需要发送网络请求，演示终极版本的页面说明
（5）查看对应的接口，说明参数中用到了id属性，那么封装好的方法中就需要多一个参数（obj对象）
（6）发送点赞的网络请求，说明请求成功之后服务器返回的结果是{error:0},没有意义，我们需要做的就是请求成功之后+1
（7）同样的思路处理踩的功能（直接拷贝修改请求路径）

核心代码：

    function addTopClickEvent(dom,obj) {
            //添加点击事件
            dom.click(function () {

                //发送网络请求
                $.ajax({
                    "url":baseURL,
                    "data":"act=acc&id="+obj.id,
                    "type":"GET",
                    "success":function (response) {
                        dom.text(parseInt(dom.text()) + 1);
                    }});
            });
        }

    function addDownClickEvent(dom,obj) {
            //添加点击事件
            dom.click(function () {

                //发送网络请求
                $.ajax({
                    "url":baseURL,
                    "data":"act=ref&id="+obj.id,
                    "type":"GET",
                    "success":function (response) {
                        dom.text(parseInt(dom.text()) + 1);
                    }});
            });
        }

02 实现删除操作

实现思路：

（1）参考已经实现的点赞和踩功能，封装addDelClickEvent方法，该方法接收两个参数jQuery的实例对象和该对象对应的obj对象（存放微博数据的id）

（2）删除操作：说明dom.remove方法无法直接删除自己
    使用dom.parents(".replay").remove()方法可以删除，但是删除完微博数据之后发现还是需要更新获取最新的数据
（3）删除操作：重新获取默认的微博数据 + 重新获取页码信息

核心代码：

    function addDelClickEvent(dom,obj) {
            //添加点击事件
            dom.click(function () {

                //发送网络请求
                $.ajax({
                    "url":baseURL,
                    "data":"act=ref&id="+obj.id,
                    "type":"GET",
                    "success":function (response) {
                        //dom.text(parseInt(dom.text()) + 1);
                        //找到父节点然后删除
                        //dom.parents(".reply").remove();

                        //方案二：重新请求获取当前页面信息
                        getMsgWithPage(1);
                        getPageCount();

                    }});
            });
        }

03 使用模板引擎进行处理

地址：https://github.com/aui/art-template

使用步骤：

 （1） 引入框架的头文件 <script src="dist/template-native.js"></script>
 （2）设置script相关标签<script id="test" type="text/html">
 （3）调用template('test', data);方法实现

示例代码：

<script id="test" type="text/html">
    <h1><%=title%></h1>
    <ul>
        <% for(var i = 0, len = list.length; i < len; i++){ %>
            <li><%=list[i]%></li>
        <% } %>
    </ul>
</script>
<script>
    var data = {
        title: '基本例子',
        list: ['文艺1', '博客2', '摄影3', '电影4', '民谣5', '旅行6', '吉他7']
    };
    var html = template('test', data);
    document.body.innerHTML = html;
</script>

模板应用到微博案例中

 <script id="nj" type="text/html">
    <p class="replyContent"><%=content%></p>
    <p class="operation">
        <span class="replyTime"><%=time%></span>
        <span class="handle">
            <a href="javascript:;" class="top"><%=acc%></a>
            <a href="javascript:;" class="down_icon"><%=ref%></a>
            <a href="javascript:;" class="cut">删除</a>
        </span>
    </p>
</script>