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),这是程序员可以自由选择的。这种说法不完全正确,程序员固然可以自由选择编程风格,但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。