能力不足，眼力輔助——山寨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)提供的WangWang表情外掛程式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)提供的WangWang表情外掛程式V1.0",            "http://images.cnblogs.com/cnblogs_com/conmajia/385085/r_1.gif",            function () {                var htmlDialog = str_Html();                var point = absolutePoint(this);                CsdnScriptWorkshop.showDialog("野比的WangWang表情", 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)提供的WangWang表情外掛程式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）