Javascript，views and events best practices

我正在創建一個頁面，可以根據用戶選擇使用備用插件播放視頻文件。該URL會編碼應播放哪個視頻。Javascript，views and events best practices

頁面從PHP服務器腳本中檢索。用戶通過點擊一些AJAX鏈接來選擇插件。每個鏈接通過使用Javascript函數執行AJAX請求從服務器檢索所需的插件。該功能必須將視頻ID作爲參數。在客戶端，我使用jQuery Javascript框架。

我想知道哪些是做這種設計模式的最佳做法。我想在幾個備選方案：

的AJAX鏈接使用onclick HTML屬性調用從服務器檢索內容的功能
使用jQuery $(#element).click()到地圖的JavaScript函數檢索內容。

如果我用第一個替代方案可以輕鬆地將視頻ID傳遞給JavaScript函數：

<a id="X" href="#" onclick="retrieveXPlugin('<?php echo $id ?>')">X Plugin</a>

但視圖代碼搗碎事件代碼，這是不是一個好的做法。

第二種選擇看起來更好，但我必須在同一個PHP文件中像這樣的單擊事件綁定：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin('<?php echo $id ?>'); 
    }); 
} 
</script>

當我弄清楚我可以不包括單獨的.js文件，因爲我上面的代碼需要服務器端PHP變量$id。做到這一點的唯一方法是使用全局的Javascript變量，這看起來不太好。

那麼，哪個組織視圖和事件在這個例子和任何其他的最佳做法？我在等你的建議。

來源

2011-07-26 Calin-Andrei Burloiu

您可以使用，對於爲例，你的鏈接的名稱屬性：

<a id="X" href="#" name="<?php echo $id ?>">X Plugin</a>

，並在單獨.js文件：

$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin($(this).attr ('name')); 
    }); 
}

或事件更好，就像在下面的評論說：，是data-*屬性（感謝Raynos），所以你能做到這一點是這樣的：

<a id="X" href="#" data-xplugin="<?php echo $id ?>">X Plugin</a>

而且在九月arate .js文件：

$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin($(this).attr ('data-xplugin')); 
    }); 
}

來源

2011-07-26 12:48:09 Johnny5

將它存儲在其他地方。不在名稱中。也許'data-XPLugin' – Raynos

@Raynos你能解釋一下嗎？據我所知，data-XPLugin不是一個有效的html屬性。 – Johnny5

[它是有效的HTML5]（http://html5doctor.com/html5-custom-data-attributes/）。 name屬性用於服務器端回發和標識元素。我相信把這些數據放在那裏是不好的標記。 – Raynos

你可以簡單地返回錨+腳本標籤，像這樣：

<a id="X" href="#" onclick="retrieveXPlugin('<?php echo $id ?>')">X Plugin</a> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#X').click(function() { 
     retrieveXPlugin('<?php echo $id ?>'); 
    }); 
} 
</script>

，這將錨綁定到你的播放器。

來源

2011-07-26 12:40:49 zatatatata

Javascript，views and events best practices

回答

相關問題