能力不足，眼力辅助——山寨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;\" onmouseover=\"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;\" onmouseover=\"doit(this)\" />";    }

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

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



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



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



下面测试下：

      

完全成功。

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

鸣谢

咖啡猫（q107770540）