如何實現動態內容生成的不顯眼的JavaScript？

我寫了很多動態生成的內容（在PHP下開發），我使用jQuery爲我的項目添加了額外的靈活性和功能。如何實現動態內容生成的不顯眼的JavaScript？

事情是，它很難以不顯眼的方式添加JavaScript。以下是一個示例：

您必須生成隨機數div元素，每個元素具有不同的功能觸發onClick。我可以使用div元素上的onclick屬性來調用帶有參數的JS函數，但這只是一個不好的解決方案。此外，我可以在我的PHP for循環中隨每個div一起生成一些jQuery代碼，但這又不會完全不引人注目。

那麼這種情況下的解決方案是什麼？

來源

2008-09-24 Brayn

你能提供一個不太模糊的例子嗎？不引人注意的JavaScript的一般方法是，你可以在沒有JavaScript的情況下工作，然後添加JavaScript，它可以在頁面加載時做任何它需要做的事情，以啓用它提供的任何增強功能，因此該頁面適用於所有人。 – 2008-09-24 10:30:52

優雅的退化是我關注使用不同方法的一個方面。雖然你說得對，但你說得對。 – Brayn 2008-09-24 10:46:35

div元素在渲染時是否需要在頁面上？即它們是否包含頁面上所需的有價值的內容，或者它們是否只是增加了功能？ – roryf 2008-09-24 17:30:41

您需要添加一些定義是什麼類型的行爲他們，然後使用jQuery選擇這些div並添加行爲的div。一種選擇是使用類屬性，雖然可以說這應該用於表示而不是行爲。另一種選擇是rel屬性，但我通常會發現，您還希望爲每個行爲指定不同的CSS，因此在此實例中，類可能是可以的。

因此，舉例來說，讓我們假設你想奇數和偶數行爲：

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div>

然後在jQuery的：

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
});

jQuery有，可以找到基於任何基於CSS的一個非常強大的選擇器引擎選擇器，還支持一些XPath和它自己的選擇器。瞭解他們！ http://docs.jquery.com/Selectors

來源

2008-09-24 10:30:18 roryf

這是一個有點難以從你的問題告訴我們，但也許你可以使用不同的jQuery選擇設置不同的點擊行爲？例如，假設你有以下情況：

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div>

也許你可以做jQuery中的以下內容：

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...);

基本上，基於上下文需要採取什麼決定。您也可以選擇所有div並測試某些父元素或子元素以確定它們獲得的功能。

我不得不更多地瞭解你的情況的細節給予更多的關注意見，但也許這將讓你開始。

來源

2008-09-24 10:32:42

我會建議不顧W3C標準，並在需要連接到他們的處理程序的元素寫出HTML屬性：

注：這會不會打破頁面的呈現！

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul>

聲明幾個功能：

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { }

然後使用jQuery像這樣：

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
});

務實。

來源

2008-09-24 10:52:42 roosteronacid

我並沒有真正瞭解JQuery，但我確實知道DOJO工具包確實使得JavaScript非常不引人注意。

看看這裏的例子：

演示動態地添加事件，以基於類的純HTML表格。

又如行爲特徵，說明如下：http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

來源

2008-09-24 10:56:42

我會建議你使用這個東西叫做「Event delegation」。這是它的工作原理。

所以，如果你想更新一個區域，比如說一個div，並且你想不加區分地處理事件，你可以在這個div上附加一個事件處理函數。使用你喜歡的任何框架來做到這一點。無論您是否更新了div，事件附件都可以隨時發生。

附加到此div的事件處理程序將接收事件對象作爲其參數之一。使用這個事件對象，你可以確定哪個元素觸發了事件。您可以更新div的次數：div的子元素生成的事件會冒泡到div，您可以捕捉並處理它們。

如果您正在考慮將多個處理程序附加到div內的多個元素，這也證明是一個巨大的性能優化。

來源

2008-09-24 11:30:34

如何實現動態內容生成的不顯眼的JavaScript？

回答

相關問題