Javascript Generalize多個對象的函數（Raphael JS）

Question

我正在使用Raphael JS庫並嘗試創建可應用於任何目標的hoverIn和hoverOut函數。

我認爲這個問題是一個缺乏傳遞參考的函數（我對JavaScript很陌生）。

後，我創建一組路徑，並添加屬性，查看他們：

Services = rsr.set(); 

Services.push(
    rsr.path("M698.5,98.617V96.09c0.289,0.256,0.636,0.484,1.04,0.689 c0.403,0.203,0.829,0.375,1.276,0.516c0.445,0.143,0.896,0.25,1.347,0.326c0.45,0.078,0.867,0.113,1.251,0.113 c1.318,0,2.305-0.242,2.955-0.732s0.977-1.193,0.977-2.111c0-0.496-0.106-0.922-0.325-1.291c-0.217-0.365-0.517-0.699-0.898-1.002 c-0.383-0.301-0.836-0.592-1.359-0.865c-0.521-0.275-1.088-0.568-1.689-0.875c-0.64-0.32-1.235-0.648-1.788-0.982 c-0.555-0.33-1.033-0.697-1.442-1.098c-0.408-0.398-0.729-0.854-0.964-1.359c-0.235-0.504-0.351-1.1-0.351-1.781 c0-0.834,0.184-1.561,0.549-2.178c0.366-0.615,0.846-1.125,1.442-1.525c0.596-0.398,1.273-0.697,2.036-0.893 c0.761-0.197,1.537-0.295,2.328-0.295c1.804,0,3.119,0.219,3.943,0.65v2.412c-1.082-0.748-2.468-1.123-4.161-1.123 c-0.468,0-0.938,0.051-1.404,0.148c-0.469,0.098-0.885,0.258-1.251,0.479c-0.367,0.223-0.665,0.504-0.894,0.854 c-0.23,0.35-0.346,0.775-0.346,1.275c0,0.471,0.087,0.873,0.262,1.215c0.174,0.342,0.433,0.65,0.772,0.932 c0.341,0.281,0.754,0.555,1.244,0.818c0.488,0.264,1.052,0.555,1.69,0.865c0.653,0.324,1.275,0.666,1.862,1.021 c0.587,0.357,1.103,0.754,1.546,1.188c0.441,0.432,0.793,0.916,1.054,1.443c0.258,0.525,0.389,1.133,0.389,1.811 c0,0.904-0.178,1.666-0.53,2.293c-0.353,0.625-0.828,1.137-1.43,1.523c-0.599,0.393-1.291,0.676-2.074,0.852 s-1.608,0.264-2.477,0.264c-0.29,0-0.646-0.025-1.071-0.072c-0.427-0.049-0.859-0.117-1.303-0.203 c-0.443-0.09-0.862-0.201-1.258-0.332C699.055,98.926,698.737,98.777,698.5,98.617z"), 
    rsr.path("M722.425,93.344h-9.229c0.033,1.457,0.425,2.58,1.175,3.371 c0.747,0.791,1.776,1.188,3.089,1.188c1.473,0,2.825-0.484,4.061-1.457v1.969c-1.148,0.832-2.669,1.25-4.558,1.25 c-1.847,0-3.299-0.596-4.354-1.781c-1.058-1.188-1.583-2.855-1.583-5.01c0-2.035,0.575-3.691,1.729-4.975 c1.152-1.279,2.584-1.922,4.295-1.922c1.712,0,3.035,0.555,3.972,1.66s1.404,2.643,1.404,4.607L722.425,93.344L722.425,93.344z  M720.279,91.57c-0.008-1.211-0.299-2.15-0.875-2.822c-0.574-0.672-1.372-1.01-2.394-1.01c-0.987,0-1.825,0.354-2.515,1.061 c-0.69,0.707-1.114,1.629-1.277,2.771H720.279L720.279,91.57z")) 
    ).attr({ 
    fill: '#010101', 
    stroke: '#000000', 
    'stroke-width': 0 
}); 

我在添加盤旋，懸停在了通過附加的事件如下：

.hover(
    function(){Services.animate({"fill": "#128A8F"}, 500), 
    function(){Services.animate({"fill": "#010101"}, 500)); 

而且能正常工作。

但是，我將這個效果應用到我的腳本中的許多路徑，並通過懸停框應用它，所以我需要能夠使懸停功能更具延展性。

我嘗試了下面懸停目標概括爲傳遞的對象，但由於JavaScript是按值傳遞不大概工作：

function menuHoverIn(target){ 
     target.animate({ 
      "fill": "#128A8F" 
     }, 500); 
    }; 

function menuHoverOut(target){ 
     target.animate({ 
      "fill": "#010101" 
     }, 500) 
    }; 

那麼，如何讓上述功能工作，我'期望他們在JavaScript中？我只想讓傳遞的對象變成動畫。

謝謝！

Answer 1

你的問題非常模糊，但我想我明白你的意思：你只是想能夠將可重用的懸停函數傳遞給一個元素或集合。

在解決方案之前，我必須糾正你的一點：JavaScript不是一種傳遞值語言，至少在所有時間都不是。 JavaScript通過引用傳遞引用類型（對象），並且原子類型（字符串，數字，布爾值）按值傳遞（除非它們被包裝在它們的關聯對象類型中）。

此外，在繼續之前，我想提供一些關於編寫更好的SO問題的建議（這些問題更有可能得到解答）。首先，嘗試將問題簡化爲簡單且易於消化的問題。在這種情況下，沒有人關心（或希望看到）你的漫長道路。你可以用圓圈代替那些，你會有一個更容易閱讀的問題。其次，提供重現問題所需的所有信息。並不是每個人都會知道設置Raphael對象所涉及的細節等。最好提供一個jsfiddle（對於可能沒有CDN的Raphael這樣的庫來說可能會很棘手 - 但是我能夠找到一份拉斐爾在CDN）。嘗試遵循JavaScript約定;它會減少試圖回答你的問題的人們之間的混淆。在你的情況下，你可以調用你的對象Services，它不僅對你的問題的讀者不透明，而且JavaScript中的大寫變量通常保留給對象構造函數。

好了，就到了解決方案：

如果你看一下documentation for hover，你看到.hover()有兩個功能，和那麼雙上下文對象。這意味着JavaScript正在調用函數call或apply，該函數設置函數的上下文（即變量this），就像它們是方法調用一樣。所以，你要的是這樣的：

var paper = Raphael(0, 0, 200, 200); // create Raphael surface 
// re-usable hover functions: 
function menuHoverIn(){ 
    // note the use of 'this'; we are animating the 'this' object, 
    // as if this were a method on an object. JavaScript is very 
    // flexible this way, and this method can (and will) be called 
    // as if it were a method of the element you're trying to animate 
    this.animate({'fill': '#128A8F'}, 500); 
}; 
function menuHoverOut(){ 
    this.animate({'fill': '#010101'}, 500); 
}; 

var set = paper.set(); // create Raphael set; renamed from "Services" in OP 
    set.push(paper.circle(50, 50, 25, 25)) // put a circle in the set 
    .attr({       // set attributes of all elements in set 
     fill: '#010101', 
     stroke: '#000', 
     'stroke-width': 0 
    }) 
// provide .hover function for entire set; notice how we pass in set itself 
// as the hover in and out context (which will become the 'this' value) 
.hover(menuHoverIn, menuHoverOut, set, set); 

事實證明，拉斐爾將正在操作的默認上下文對象，所以設置在這種情況下，背景實際上是不必要的。這已足夠：

.hover(menuHoverIn, menuHoverOut); 

這是jsfiddle demonstrating this solution。

Answer 2

你可以這樣做：

var menuHoverIn = function(target) { 
    target.animate({ 
     "fill": "#128A8F" 
    }, 500); 
}; 

var menuHoverOut = function(target) { 
    target.animate({ 
     "fill": "#010101" 
    }, 500) 
}; 

something.hover(menuHoverIn, menuHoverOut); 

這裏是關於對象的兩個好文章 「和」 功能：和http://hangar.runway7.net/javascript/guidehttp://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

要動畫另一個對象：

// Function.prototype.bind polyfill 
if (!Function.prototype.bind) { 

    Function.prototype.bind = function(obj) { 
    if(typeof this !== 'function') // closest thing possible to the ECMAScript 5 internal IsCallable function 
     throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); 

    var slice = [].slice, 
     args = slice.call(arguments, 1), 
     self = this, 
     nop = function() {}, 
     bound = function() { 
      return self.apply(this instanceof nop ? this : (obj || {}), 
           args.concat(slice.call(arguments)));  
     }; 

    bound.prototype = this.prototype; 

    return bound; 
    }; 
} 

var menuHoverIn = function(target) { 
    this.animate({ 
     "fill": "#128A8F" 
    }, 500); 
}; 

var menuHoverOut = function(target) { 
    this.animate({ 
     "fill": "#010101" 
    }, 500) 
}; 

something.hover(menuHoverIn.bind(YourElement), menuHoverOut.bind(YourElement)); 

也許你有做一些調整，但我有一個類似的代碼與我合作。不要忘記用你想要的動畫替換元素。