Raphael和「全局」變量

我試圖與拉斐爾一些SVG的東西，並嘗試，以及我有限的知識，以建立一些美麗的;）我有3個文件： 1x html文件和2xjs文件 HTML文件：有有載功能（+報頭，主體和東西）Raphael和「全局」變量

window.onload=function() 
{ 
    init(); 
}

JS文件1：具有init函數和加載JS文件（例如聖拉斐爾）和回調該文件後繼續處理的功能加載

function init() 
{ 
    getScripts(initTool) 
} 

function getScripts(callback) 
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
} 

function initTool() 
{ 
    $('body').append("<div id='tool'></div>"); 
    tool=Raphael("tool",5000,5000); 
    $('body').append("<a href='javascript:void(0)' onclick='newElement'>New element</a>") 
}

個JS文件2：在這裏，我具備的功能爲newElement應該增加（在這個例子中）單路由Rapahel

function newElement() 
{ 
    tool.path("M10,20L30,40"); 
}

創建SVG元素不幸的是，路徑不顯示了，我不知道爲什麼。我嘗試在onload之前引用「工具」變量，以防它與全局/局部變量（瘋狂猜測）相關，但這也不起作用。將svg元素的id更改爲「tool2」爲「tool2」也不起作用。

它還能是什麼？我的（可能是明顯的）盲點在哪裏？

來源

2012-07-11 user1408275

應該回調不作爲參數聲明在這裏？

function getScripts(callback) 
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
}

來源

2012-07-11 20:58:08 Andrew

對不起，getScripts（）是getScripts（回調）確實。我試圖儘量減少問題的代碼，我忘了。我將立即編輯原始問題。謝謝！ – user1408275 2012-07-11 21:07:51

說實話，我寫了很多javascript，我還沒有完全理解變量範圍。但是，在調用函數時，應該使用括號來表示它應該被執行（有幾次沒有括號引用它們，但這超出了本答案的範圍）。

所以......

$('body').append("<a href='javascript:void(0)' onclick='newElement()'>New element</a>")

但這是遠遠不夠的，使其工作，你也應該聲明你的函數是這樣的：

var newElement = function() { 
    tool.path("M10,20L30,40"); 
}

這裏是一個有效的解決方案：http://jsfiddle.net/vAjG2/

（也許有人可以擴展爲什麼需要這些改變，我自己並沒有掌握）。

來源

2012-07-11 23:37:34 Duopixel

不錯，它的工作原理！非常感謝你。但我不知道爲什麼它與以前的實施不同。如果有人能解釋，會很棒，因爲否則當我遇到同樣的問題時，我不得不再次提問，而不是意識到;） – user1408275 2012-07-12 05:02:59

該問題與變量作用域無關。您只需在內聯事件處理函數的函數名稱後面加括號。將最後一行重寫爲：

$('body').append("<a href='javascript:void(0)' onclick="newElement()">New element</a>")

而且您將啓動並運行。

但是，內聯事件處理程序出於各種原因而不滿意。正如quirksmode所說：「儘管內聯事件註冊模型是古老而可靠的，但它有一個嚴重的缺點，它要求你在XHTML結構層中編寫JavaScript行爲代碼，它不屬於它。」

更清潔的方式做，這將分離出的標記和腳本，例如：

<div id='tool'></div> 
<a id="mylink" href='#'>New element</a> 

<script> 
var tool = Raphael("tool",500,500); 

$('#mylink').on("click", function() { 
    tool.path("M10,20L30,40"); 
}); 
</script>

這段代碼在行動見本jsfiddle。

最後，作爲一個有用的提示，我會建議運行代碼的文件準備，而不是窗口負荷，尤其是你正在使用jQuery，。文檔準備好在DOM首次構建時發生。窗口負載等待所有資源完全加載，這可能需要一段時間，並且通常不是必需的。這是long considered a best practice。

來源

2013-01-24 02:27:01 Ben

Raphael和「全局」變量

回答

相關問題