「玩一玩」能力不足，眼力辅助——山寨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); }); },/// <summary> /// 插件标题，显示给用户看 /// </summary> caption: "由野比(conmajia)提供的旺旺表情插件V1.0", /// <summary> /// 设计者在CSDN的ID /// </summary> designer: "conmajia",
/// <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)\" />"; }
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)\" />"; }