首页 > wordpress > inove js改版之 评论comment.js
2009六月25

inove js改版之 评论comment.js

wordpress , 10 Comments 发表评论

我感觉在inove里面，耦合最高的就应该是这个comment.js了，因为其起的作用就是“回复”及“引用”这俩功能，

但是却到处在用这个MGJS，使之与base.js的代码高度关联，看着不爽

window['MGJS_CMT'] = {};
window['MGJS_CMT']['reply'] = reply;
window['MGJS_CMT']['quote'] = quote;

无奈啊，现在，把我更改comment.js的回复及引用功能的实现简单说一下，但是老话说的好“授人以鱼，不如授人以渔”

但是现在我自己也是正在学习中，我弄这个改版，不是为了证明自己水平多高，说回来，写的东西还可能让大家笑，不过我在学习中，希望大家也是。

将原代码，retry 回复功能实现的函数部分摘取出来吧，别的就不管了，大家自行查阅

function reply(authorId, commentId, commentBox) {
    var author = MGJS.$(authorId).innerHTML;
    var insertStr = '<a href="#' + commentId + '">@' + author.replace(/\t|\n|\r\n/g, "") + ' </a> \n';

    appendReply(insertStr, commentBox);
}

里面仍然在用着MGJS的$，说白了这无非是document.getElementById，但是这样一写就显得不敢动原来的base.js了。

没事， 我不怕。来吧。用jQuery改写之，因为其原来的正则是可用的，并且高效，这里面赞一下mg12，我对正则一向不感冒，谢了。

function reply(authorId, commentId, commentBox) {
    //通过元素id，来取这个作者名
    //在jQuery中html()就相当于innerHtml
    var author = $('#'+authorId).html();
    //里面内容不变，正则学的真好啊。。
    var insertStr = '<a href="#' + commentId + '">@' + author.replace(/\t|\n|\r\n/g, "") + ' </a> \n';

    appendReply(insertStr, commentBox);
}

看出来了，这个东西是要调用appendReply才有用的，继续来

function appendReply(insertStr, commentBox) {
    //判断这个对象存在，并且它是textarea类型
    //就是下面的那个评论框
    if($("#"+commentBox) && $("#"+commentBox).attr('type') == 'textarea') {
        //借助私有变量field
        field = $("#"+commentBox);

    } else {
        //没有评论框，弹窗，告诉你丫的这个评论框居然不存在
        //敢晃点我就弹窗，哼
        alert("The comment box does not exist!");
        return false;
    }

    if (field.val().indexOf(insertStr) > -1) {
        //判断你要发的内容是否已经写一遍了，即你点了一个人两次回复
        alert("You've already appended this reply!");
        return false;
    }

    //还是正则，我不解释，不懂
    if (field.val().replace(/\s|\t|\n/g, "") == '') {
        field.val(insertStr);
    } else {
        //同样，是把内容换成什么什么乱七八糟的
        replay_val  = field.val().replace(/[\n]*$/g, "") + '\n\n' + insertStr;
        field.val(replay_val);
    }
    //这里没说的了，一定要使评论框获得焦点，嗯。
    field.focus();
}

来一下引用的代码，嗯

function quote(authorId, commentId, commentBodyId, commentBox) {
    //同样，获取其作者innerhtml内容
    var author = $("#"+authorId).html();
    //同样，获取其innerhtml内容
    var comment = $("#"+commentBodyId).html();

    //加上了些blockquote 标签，给你引用的内容包起来
    var insertStr = '<blockquote cite="#' + commentBodyId + '">';
    insertStr += '\n<strong><a href="#' + commentId + '">' + author.replace(/\t|\n|\r\n/g, "") + '</a> :</strong>';
    insertStr += comment.replace(/\t/g, "");
    insertStr += '</blockquote>\n';

    insertQuote(insertStr, commentBox);
}

其真正起作用的代码是insertQuote，继续

function insertQuote(insertStr, commentBox) {
    //同样，得到评论框，和上面评论的代码相同，不解释
    if($("#"+commentBox) && $("#"+commentBox).attr('type') == 'textarea') {
        field = $("#"+commentBox);

    } else {
        alert("The comment box does not exist!");
        return false;
    }

    if(document.selection) {
        field.focus();
        sel = document.selection.createRange();
        sel.text = insertStr;
        field.focus();

    } else if (field.selectionStart || field.selectionStart == '0') {
        var startPos = field.selectionStart;
        var endPos = field.selectionEnd;
        var cursorPos = startPos;
        //这里面仍然借助私有变量(临时变量)replay_value
        replay_value = field.val().substring(0, startPos)
                    + insertStr
                    + field.val().substring(endPos, field.value.length);
        //因为在这里我要给field也就是评论框赋值
        field.value(replay_value);
        cursorPos += insertStr.length;
        //获取焦点
        field.focus();
        field.selectionStart = cursorPos;
        field.selectionEnd = cursorPos;

    } else {
        //还是这个临时变量，重新赋值啊，哈
        replay_value = field.val();
        field.val(replay_value+insertStr);
        field.focus();
    }
}

这回,comment.js我算是彻底弄完了，里面只有如下几个方法：

switchTab(),reply(),appendReply(),quote(),insertQuote()

如果您没有找到这个回复按钮和引用按钮定义在哪，我告诉你吧，就是functions.php

原代码为

<!-- 还是在调用MGJS，没办法原comment.js里定义的-->
                <a href="javascript:void(0);" onclick="MGJS_CMT.reply('commentauthor-<?php comment_ID() ?>', 'comment-<?php comment_ID() ?>', 'comment');"><?php _e('Reply', 'inove'); ?></a> |
                <a href="javascript:void(0);" onclick="MGJS_CMT.quote('commentauthor-<?php comment_ID() ?>', 'comment-<?php comment_ID() ?>', 'commentbody-<?php comment_ID() ?>', 'comment');"><?php _e('Quote', 'inove'); ?></a>

现在小小子修改版为：

                <a href="javascript:void(0);" onclick="reply('commentauthor-<?php comment_ID() ?>', 'comment-<?php comment_ID() ?>', 'comment');">回复</a> |
                <a href="javascript:void(0);" onclick="quote('commentauthor-<?php comment_ID() ?>', 'comment-<?php comment_ID() ?>', 'commentbody-<?php comment_ID() ?>', 'comment');">引用</a>

文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/06/25/962/
版权所有 © 转载时必须以链接形式注明作者和原始出处！

10 Responses to “inove js改版之 评论comment.js”

  1. #1 小明猪 回复 | 引用 Post:2009-06-25 21:03

    过来的时候不忘查了一下你的PR，为什么www.xiaoxiaozi.com的是0蛋，而xiaoxiaozi.com的是3？我对PR现在超级Orz啊 :evil:

    [回复]

  2. #2 bolo 回复 | 引用 Post:2009-06-25 21:50

    越看越觉得你厉害！本来我早就想改js了，但是一窍不通 :!:

    [回复]

  3. #3 simaopig 回复 | 引用 Post:2009-06-25 22:21

    @小明猪
    呃，我查 http://www.xiaoxiaozi.com也是3。嗯。

    @bolo
    慢慢学呗，我以前特讨厌js。。

    [回复]

  4. #4 bolo 回复 | 引用 Post:2009-06-26 20:19

    这个。。貌似漏了一点东西吧？comments.php里还有几个调用mgjs的东东要去掉

    [回复]

  5. #5 simaopig 回复 | 引用 Post:2009-06-26 20:29

    @bolo
    那个在前一篇文章提到了。主要就是swtitchtab，显示隐藏用户信息。

    [回复]

  6. #6 吖Bee 回复 | 引用 Post:2009-06-28 10:44

    这个都搞定了~的确~原来js看起来不太爽….

    [回复]

  7. #7 simaopig 回复 | 引用 Post:2009-06-28 11:04

    @吖Bee
    呵，估计下个版本会有很大改善吧。。

    [回复]

  8. #8 fly3q 回复 | 引用 Post:2010-07-17 17:29

    有没有ajax评论的呢？你是怎么做的呢？

    [回复]

  9. #9 simaopig 回复 | 引用 Post:2010-07-19 11:37

    @fly3q
    貌似这款皮肤在作者网站上已经是AJAX评论了吧？这篇文章写过太久了。。呼。

    [回复]

  10. #10 fly3q 回复 | 引用 Post:2010-07-19 12:17

    @simaopig
    目前还不是

    [回复]

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)

分类:

最新评论

最新文章

博客存档

Meta