今天想说的,是怎样不看教程,直接山寨。实际上不可能每次山寨都有资料可寻,用到的知识点也不可能都是我们会的。怎么在这样的情况下山寨出成品,是对手艺、对眼力的考验。在我们能力不足的时候,善于观察的眼力往往可以解决很大的问题。
说实话,我对javascript并不熟悉,但它只有一个文件,我想实现难度并不高,不妨来山寨一番。
怎样山寨一个自己并不熟悉的东西?有人说了,去看书,学一遍再来。那你这智商真的让我们大家都深表遗憾。
我们需要的只是常识+眼力。
也许有人马上要喷了,这个简单你才能吹牛逼,复杂的东西你还行吗?
对此我想说,你非得时刻都让我们替你遗憾吗?复杂的东西,我肯定不行,既然复杂,难道我看看书,学一遍就行了?省省吧,有那精力,我不如找几个精通的人来搞。我虽然提倡自力更生,但也得有个效率和限度啊。
下面开始分析。
山寨一个东西,尤其是这种表情插件,几个关键地方改成我们自己的:logo、提示文字、标题、表情图片,那就针对这几个地方去找。
这太简单了,根本不需要学js,直接修改成我们的内容。
注意这个地方:「"http://tim-tang.googlecode.com/files/24.gif",」,在我们山寨的时候要善于抓住关键点,这里我们应该敏锐的看到「24.gif」,说明这是一张图片,它的前面一句话「this.buttons["icon"]」,关键词icon,说明这个部分和图标相关。把图标地址粘贴到浏览器地址栏,查看,发现这张图标就是UBB工具栏上的插件图标。所以把它换成我们自己的图标。
继续往下看,有这段代码
可以看到imgCount=60,从字面来看这个应该是image count(图片计数),也就是图片总数,那这个就应该是指表情插件一共有多少个图标。下面有个for循环,i从1到imgCount,循环体里面是一个组合而成的.gif图片地址。这就验证了我们的猜测。把地址换成我们自己图片的地址。
保存js文件,找一个空间上传。(我传到了博客园,地址是http://files.cnblogs.com/conmajia/demo.js)
现在开始测试,点开管理器,装载我们自己的js插件。
![](https://img-my.csdn.net/uploads/201206/01/1338488549_6458.jpg)
于是乎,不出所料,我们的插件出来了。
![](https://img-my.csdn.net/uploads/201206/01/1338488589_3445.jpg)
点开看看,可以看到已经基本成功。
![](https://img-my.csdn.net/uploads/201206/01/1338488675_3064.jpg)
下面测试下:
完全成功。
通过简单的分析,做出自己的插件。相信今后会涌现出不少有趣的表情插件甚至其他功能插件。欢迎大家发挥创意。
今天看到咖啡猫发布了「兔子表情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",
"https://i-blog.csdnimg.cn/blog_migrate/ec18a031d7789b514fe15030f8f0a19b.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插件。
![](https://img-my.csdn.net/uploads/201206/01/1338488549_6458.jpg)
于是乎,不出所料,我们的插件出来了。
![](https://img-my.csdn.net/uploads/201206/01/1338488589_3445.jpg)
点开看看,可以看到已经基本成功。
![](https://img-my.csdn.net/uploads/201206/01/1338488675_3064.jpg)
下面测试下:
![](https://i-blog.csdnimg.cn/blog_migrate/ec18a031d7789b514fe15030f8f0a19b.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8172b0080c3792057dc7af968ca4bc61.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/5b46511b5a001edca51954427a3d9ab7.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/affd481d7f7d5975f7477478b04f54a7.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/306480b7fdc44900819d8abb2cc53d8e.gif)
完全成功。
通过简单的分析,做出自己的插件。相信今后会涌现出不少有趣的表情插件甚至其他功能插件。欢迎大家发挥创意。
鸣谢
咖啡猫(q107770540)