标签： 油猴

发布于

EasyJandan 1.0 煎蛋网看帖助手发布

缘起

找完工作以后比较无聊，总想找些事情做。偶然得知了“油猴”这个东西，觉得很有趣，于是就想用它来改善一下生活。

平日刷煎蛋，每看一个贴便要点击进去，然后再后退回来，能不能优化一下这个流程呢？无聊图板块里，“吐槽”功能用了“展开/收起”的形式来展现评论，能不能运用到主页的文章上面呢？

制作

设计到的知识很简单，懂一点Javascript和Jquery即可。

代码如下：

// ==UserScript==
// @name       EasyJandan
// @namespace  http://legendmohe.com/
// @version    0.3 
// @description  EasyJandan
// @match      http://jandan.net/*
// @require     http://code.jquery.com/jquery-1.10.1.min.js
// @grant       GM_xmlhttpRequest
// @copyright  2012+, You
// ==/UserScript==

function processClean() {
    $("#content > .title").remove();
    var sidebar = $("#sidebar");
    var $sponsors = sidebar.find("h3:contains('Sponsors')");
    $sponsors.each(function() {
        $(this).next().remove();
    });
    $sponsors.remove();
}

function processPage($parent){
    var url = $parent.find("h2 > a").attr("href");

    GM_xmlhttpRequest({
        method: 'GET',
        url: url,
        onload: function(responseDetails) {
            var $body = $(responseDetails.responseText);
            var $rbody = $body.find("#content > .post.f:eq(0)");
            var scrollTop = $(document).scrollTop();

            $rbody
            .find("h3:eq(0)").remove().end()
            .find("br:eq(0)").remove().end();

            $(document.createElement('hr'))
            .appendTo($rbody);
            $body.find(".hotcomment > .in")
            .appendTo($rbody).end()
            .find(".acv_comment").css("width", "100%");

            var closeButton = $(document.createElement('botton'))
            .css({float:'right', color:'#2854bb'})
            .text("收起")
            .click(function() {
                $rbody.fadeToggle("fast", function(){
                    $(this).replaceWith($parent.hide());
                    $parent.fadeToggle();
                    $rbody = null;
                });

                $(document).scrollTop(scrollTop);
                $parent.find(".expand_button").click(function(){
                    processPage($parent);
                });
            });

            closeButton.insertBefore($rbody.find(".break"));
            closeButton.clone(true).insertAfter($rbody.find(".time_s")); //设置clone(true):withDataAndEvents 

            $parent.fadeToggle("fast" 
Köp Levitra Receptfritt
 , function(){
                $(this).replaceWith($rbody.hide());
                $rbody.fadeToggle();
            });
        }
    });
}

function processExpand() {
    $("#content > .post.f").each(function(index,element) {
        $(document.createElement('botton'))
        .insertBefore($(element).find(".break"))
        .css({float:'right', color:'#2854bb', "margin": "1em"})
        .attr({"class":'expand_button', "index":index})
        .text("展开")
        .click(function(){
            processPage($(element));
        });
    });
}

$(document).ready(function() {  
    processClean();

    var url = window.location.href;
    if(/jandan\.net\/$/.test(url)) {
        processExpand();
    }
});

由于很少接触Javascript，所以编码规范什么的都没注意到。css选择器很强大，链式调用很优雅。但Javascript的闭包有点复杂啊。。。

成果

最终效果如图所示：

最终效果图

点击“展开”之后：

展开效果图

安装

关于油猴请看这里：

http://www.iplaysoft.com/greasemonkey.html

脚本地址：

http://userscripts.org/scripts/show/185160

后记

写完文章后Google了一下Javascript编码规范，找到这样的一篇文章，里面介绍了Javascript的几种编程规范，值得一学，摘录如下：

  • 规则1：表示区块起首的大括号，不要另起一行。
  • 规则2：调用函数的时候，函数名与左括号之间没有空格。
  • 规则3：函数名与参数序列之间，没有空格。
  • 规则4：所有其他语法元素与左括号之间，都有一个空格。
  • 规则5：不要省略句末的分号。
  • 规则6：不要使用with语句。
  • 规则7：不要使用”相等”（==）运算符，只使用”严格相等”（===）运算符。
  • 规则8：不要将不同目的的语句，合并成一行。
  • 规则9：所有变量声明都放在函数的头部。
  • 规则10：所有函数都在使用之前定义。
  • 规则11：避免使用全局变量；如果不得不使用，用大写字母表示变量名，比如UPPER_CASE。
  • 规则12：不要使用new命令，改用Object.create()命令。
  • 规则13：建构（造）函数的函数名，采用首字母大写（InitialCap）；其他函数名，一律首字母小写。
  • 规则14：不要使用自增（++）和自减（–）运算符，用+=和-=代替。
  • 规则15：总是使用大括号表示区块。

另外，值得学习的一句话是：

有人说，编译器的规范叫做”语法规则”（grammar），这是程序员必须遵守的；而编译器忽略的部分，就叫”编程风格”（programming style），这是程序员可以自由选择的。这种说法不完全正确，程序员固然可以自由选择编程风格，但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。