能力不足,眼力辅助——山寨CSDN发帖表情插件

今天想说的,是怎样不看教程,直接山寨。实际上不可能每次山寨都有资料可寻,用到的知识点也不可能都是我们会的。怎么在这样的情况下山寨出成品,是对手艺、对眼力的考验。在我们能力不足的时候,善于观察的眼力往往可以解决很大的问题。

今天看到咖啡猫发布了「兔子表情2.0」(参见此处),大概看了下,发现是通过加载某个js文件实现的。


(感谢咖啡猫辛勤的劳动。)


说实话,我对javascript并不熟悉,但它只有一个文件,我想实现难度并不高,不妨来山寨一番。

怎样山寨一个自己并不熟悉的东西?有人说了,去看书,学一遍再来。那你这智商真的让我们大家都深表遗憾。

我们需要的只是常识+眼力。

也许有人马上要喷了,这个简单你才能吹牛逼,复杂的东西你还行吗?

对此我想说,你非得时刻都让我们替你遗憾吗?复杂的东西,我肯定不行,既然复杂,难道我看看书,学一遍就行了?省省吧,有那精力,我不如找几个精通的人来搞。我虽然提倡自力更生,但也得有个效率和限度啊。

下面开始分析。

山寨一个东西,尤其是这种表情插件,几个关键地方改成我们自己的:logo、提示文字、标题、表情图片,那就针对这几个地方去找。

首先从原版的使用方法开始。原版是通过点击发帖工具栏上的「管理UBB插件」按钮,进入插件管理窗口,在插件地址处输入插件的js文件地址(http://tim-tang.googlecode.com/files/demo.js)实现安装的,就像这样。



然后工具栏上会出现自定义插件的图标,鼠标移上去会有工具提示,点开后就可以输入表情,像这样。(图片摘自咖啡猫的帖子)



下一步怎么办?从什么地方切入呢?

观察

我们现在获得的信息有哪些?第一,js文件路径,第二插件图标,第三,插件界面。

那么从js文件入手,由于有了绝对路径,所以可以通过把路径粘贴到浏览器地址栏,来下载这个js文件,就像这样。



点击保存,我们用记事本打开这个js文件(或者dw或者vs随便)。

首先看到的就是这样的代码。很好,文件没有加密,这就让以下的山寨成为了可能。

var CsdnScriptPlugin999 = {
    /// <summary>
    /// 接口版本
    /// </summary>
    interfaceVersion: "1.0",

    /// <summary>
    /// 插件标题,显示给用户看
    /// </summary>
    caption: "由兔子党Tim(q107770540)提供的兔子表情插件V2.0",

    /// <summary>
    /// 设计者在CSDN的ID 
    /// </summary>
    designer: "q107770540",

    /// <summary>
    /// 按钮对象,可选项
    /// </summary>
    buttons: {},

    /// <summary>
    /// 分隔条对象,可选项
    /// </summary>
    separators: {},

    /// <summary>
    /// 装载
    /// </summary>
    load: function () { 
        this.separators["icon"] = CsdnScriptWorkshop.addSeparator(); 
        this.buttons["icon"] = CsdnScriptWorkshop.addButton(
            "由兔子党Tim(q107770540)提供的兔子表情插件V2.0",
            "http://tim-tang.googlecode.com/files/24.gif",
            function () {
                var htmlDialog = str_Html();
                var point = absolutePoint(this);
                CsdnScriptWorkshop.showDialog("兔子表情", htmlDialog, point.x, point.y + 18, 400, 220);
            });
    },

这太简单了,根本不需要学js,直接修改成我们的内容。

    /// <summary>
    /// 插件标题,显示给用户看
    /// </summary>
    caption: "由野比(conmajia)提供的旺旺表情插件V1.0",

    /// <summary>
    /// 设计者在CSDN的ID 
    /// </summary>
    designer: "conmajia",

注意这个地方:「"http://tim-tang.googlecode.com/files/24.gif",」,在我们山寨的时候要善于抓住关键点,这里我们应该敏锐的看到「24.gif」,说明这是一张图片,它的前面一句话「this.buttons["icon"]」,关键词icon,说明这个部分和图标相关。把图标地址粘贴到浏览器地址栏,查看,发现这张图标就是UBB工具栏上的插件图标。所以把它换成我们自己的图标。

    /// <summary>
    /// 装载
    /// </summary>
    load: function () { 
        this.separators["icon"] = CsdnScriptWorkshop.addSeparator(); 
        this.buttons["icon"] = CsdnScriptWorkshop.addButton(
            "由野比(conmajia)提供的旺旺表情插件V1.0",
            "http://images.cnblogs.com/cnblogs_com/conmajia/385085/r_1.gif",
            function () {
                var htmlDialog = str_Html();
                var point = absolutePoint(this);
                CsdnScriptWorkshop.showDialog("野比的旺旺表情", htmlDialog, point.x, point.y + 18, 400, 220);
            });
    },

继续往下看,有这段代码

var imgCount = 60;
var userName = "";  
function str_Html() { 
    var str = "<div style=\" width:360px; height:200px; position:relative\"><div id=\"div2\" style=\"padding:10px;width:335px; height:200px;\">";
    for (var i = 1; i <= imgCount; i++) {
        str += "<img src=\"http://tim-tang.googlecode.com/files/" + i + ".gif\" title=\"由兔子党Tim(q107770540)提供的兔子表情插件V2.0\" width=\"20px\" height=\"20px\" style=\"margin:2px; border:1px solid Green;\" οnmοuseοver=\"doit(this)\" />";
    }

可以看到imgCount=60,从字面来看这个应该是image count(图片计数),也就是图片总数,那这个就应该是指表情插件一共有多少个图标。下面有个for循环,i从1到imgCount,循环体里面是一个组合而成的.gif图片地址。这就验证了我们的猜测。把地址换成我们自己图片的地址。

var imgCount = 5;
var userName = "";  
function str_Html() { 
    var str = "<div style=\" width:360px; height:200px; position:relative\"><div id=\"div2\" style=\"padding:10px;width:335px; height:200px;\">";
    for (var i = 1; i <= imgCount; i++) {
        str += "<img src=\"http://images.cnblogs.com/cnblogs_com/conmajia/385085/r_" + i + ".gif\" title=\"由野比(conmajia)提供的旺旺表情插件V1.0\" width=\"20px\" height=\"20px\" style=\"margin:2px; border:1px solid Green;\" οnmοuseοver=\"doit(this)\" />";
    }

保存js文件,找一个空间上传。(我传到了博客园,地址是http://files.cnblogs.com/conmajia/demo.js)

现在开始测试,点开管理器,装载我们自己的js插件。



于是乎,不出所料,我们的插件出来了。



点开看看,可以看到已经基本成功。



下面测试下:

      

完全成功。

通过简单的分析,做出自己的插件。相信今后会涌现出不少有趣的表情插件甚至其他功能插件。欢迎大家发挥创意。


鸣谢

咖啡猫(q107770540)

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页