使用javascript原型鏈接點擊後數據的持久性

我想要獲得一個處理JavaScript和原型（不是庫）來創建一個可重用的腳本，最終將輸出一個很好的格式化的數據庫中的數據表。我可以使用jQuery AJAX以JSON格式獲取數據，並生成沒有問題的表。理想情況下，它會被排序和分頁，這就是麻煩開始的地方。使用javascript原型鏈接點擊後數據的持久性

我已經嘗試了一些構建方法，但似乎使用javascript的原型是我想要的，如果我正確地理解它。我似乎誤解（至少）是當用戶通過單擊鏈接或按鈕來採取行動時的數據持久性。

下面是我自己製作的說明這個問題很短：

http://jsfiddle.net/Scopique/yrt3krn9/

//Uses jQuery 1.11.0 because IE 

var Outside = function() { 
    this.MyVariable = 'Hi'; 
    this.PersistVariables = 'Oops'; 
} 

Outside.prototype.GenerateHTML = function() { 
    var that = this; 

    //Value pops as expected 
    alert(that.PersistVariables); 

    var localHTML = "<a href='#' id='link' onclick='Outside.prototype.Respond(\"" + that.MyVariable + "\");'>Click Me</a>"; 
    $("#output").html(localHTML); 
} 


Outside.prototype.Respond = function (whatVariable) { 
    var that = this; 

    alert(whatVariable); 

    //Value does not pop... 
    alert(that.PersistVariables); 

} 

$(document).ready(function() { 
    var out = new Outside(); 
    out.GenerateHTML(); 
});

而且超出了但只是：

<div id="output"></div>

在這個例子中，值當Outside.prototype.Respond通過點擊在運行時添加到DIV的鏈接觸發時，MyVariable是可見的，因爲它通過p明確地傳遞定義的過程，構建HTML並作爲參數傳遞給方法。

但是，當調用Respond時，PersistVariables始終返回爲undefined。它在構造函數中被分配了一個值，並且當GenerateHTML被調用時它會顯示正確的值 - 一個自然的執行流，我假設 - 但是在鏈接被點擊後，Respond中的值不被理解。

我可以問「我錯過了什麼」，但我懷疑這並不那麼簡單：D我想正確訪問作用域的變量嗎？如果是這樣，關於點擊鏈接的鏈接是什麼，導致他們在鏈接點擊後失去主意。

謝謝！

來源

2014-11-13 Chris Smith

該代碼的問題在於'this'引用了調用對象。用'window.alert'或'alert'調用警報alert中的'this'的值將是窗口。調用'Outside.prototype.Respond'時，Respond中'this'的值將是Outside.prototype而不是Outside的實例。你應該注意你的大小寫;構造函數通常以大寫字母開頭，但不作爲構造函數使用的函數不會。這裏的原型的更多信息：http://stackoverflow.com/a/16063711/1641941 – HMR

您的問題與範圍和您對原型編程的理解有關。這是一個很深的主題，網上有很多參考資料，所以我不打算在這裏做一個完整的解釋。

基本上通過向原型屬性添加屬性意味着將功能添加到您正在創建的對象的所有實例。當你輸出HTML時，連接到元素的JavaScript的上下文是全局上下文，所以它不知道Outside原型中的任何方法。在這種情況下，您需要的是對您的外部實例out的全局引用。然後你的點擊處理函數可以調用out.Respond

這裏是你的更新Fiddle

var Outside = function() { 
 
    this.MyVariable = 'Hi'; 
 
    this.PersistVariables = 'Oops'; 
 
} 
 

 
Outside.prototype.GenerateHTML = function() { 
 
    var that = this; 
 

 
    var localHTML = "<a href='#' id='link' onclick='out.Respond(\"" + that.MyVariable + "\");'>Click Me</a>"; 
 
    $("#output").html(localHTML); 
 
} 
 

 

 
Outside.prototype.Respond = function(whatVariable) { 
 
    var that = this; 
 

 
    alert(whatVariable); 
 
    alert(that.PersistVariables); 
 
} 
 

 
var out = new Outside(); 
 
$(document).ready(function() { 
 
    //var out = new Outside(); 
 
    out.GenerateHTML(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="output"></div>

- 編輯 -

MDN Prototype是最有可能會提供一些最好的信息。

下面是第一眼看上去還不錯的一些其他鏈接：

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#newwindow=1&q=javascript+prototype+-site:w3schools.com

來源

2014-11-13 21:17:41 HJ05

啊！完全明白。我在真實的代碼中改變了方法，它像魅力一樣工作。感謝您的協助和解釋！ –

點擊鏈接會導致重置範圍的回傳（清除您加載的任何javascript代碼）。這就是爲什麼你必須在頁面中包含<script>標籤，因爲每次加載時都必須加載JavaScript。

這就是說有可能做你想做的事。

大多數瀏覽器都支持名爲Local或Web Storage的Html5功能Go here for more info on how to use Local Storage。也可以使用cookies以json格式存儲少量數據，並且可以在回發後訪問這些數據。最後，您可以通過攔截點擊事件來避免完成回發，並撥打ajax來獲取您想要的數據。

我希望這會有所幫助。

來源

2014-11-13 21:13:16

這個問題有href ='＃'，所以這個答案不適用於這個特定的問題。當在同一網站上的不同頁面之間導航時，該答案仍然有效。 – HMR

您所介紹的onClick鏈接不會調用您之前創建的Outside實例。

我已經更新了小提琴把out變量放在全局範圍內，然後讓它在插入的鏈接中被引用。

http://jsfiddle.net/yrt3krn9/3/

我也建議處理的「onClick」屬性之外的事件。也就是說，創建鏈接的事件處理程序，如下所示：

$("#output").on("click","#link",function(e){ 
    //handle event 
});

來源

2014-11-13 21:14:48 mspaly

由於賈裏德（HJ05）表示;有一個更好的方式來附加事件的元素。既然你想用你的html填充某個容器（帶有id輸出的元素），並且只對容器中的事件做出響應，最好在該容器上附加一個點擊處理器。

然後使用event和target.target（clicked元素）以及數據屬性（在本例中爲data-action）來確定點擊操作。

這裏有一個例子：在構造函數和原型

<!DOCTYPE html> 
<html> 
<head> 
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <div id="output"></div> 
    <script> 
     var Outside = function (id) { 
      var me = this; 
      this.myVariable = 'Hi'; 
      this.PersistVariables = 'Oops'; 
      this.container = $("#"+id); 
      this.container.on('click',function(e){ 
       me.clickHandler(e); 
      }); 
     } 
     Outside.prototype.generateHTML = function() { 
      var localHTML = 
       "<a href='#' id='link' " 
       +"data-action='sayMyVariable'>Click Me</a>"; 
      this.container.html(localHTML); 
     } 
     Outside.prototype.clickHandler = function (e) { 
      var action = e.target.getAttribute('data-action'); 
      if(action && typeof this[action] === 'function'){ 
       this[action](e); 
      }else{ 
       throw new Error('Action:'+action 
        +' is not supported by Outside'); 
      } 
     } 
     Outside.prototype.sayMyVariable = function(e){ 
      console.log('The event:',e); 
      console.log('this:',this); 
      alert(this.myVariable); 
     } 
     //no need for document.ready for scripts executing right before </body> 
     //even if this is not inline script but <script src=... it will still work 
     //without document.ready 
     var out = new Outside('output'); 
     out.generateHTML(); 
    </script> 
</body> 
</html>

更多信息，可以發現here。

來源

2014-11-14 00:48:19 HMR

使用javascript原型鏈接點擊後數據的持久性

回答

相關問題