在单独的Javascript方法中调用appendGrid变量

Question

我希望这只是一个简单的问题。 因此，我在HTML文件的脚本标签中声明了appendGrid。 在同一HTML文件中的其他位置，我有一个saveTicket（）方法。 当我在此处调用appendGrid变量时，出现“未定义变量”错误。

如何将我的appendGrid变量传递到saveTicket（）方法？ 从与appendGrid不相关的按钮单击中调用saveTicket（）方法。 但是我需要在saveTicket（）方法中添加appendGrid数据。

伪代码HTML：

<script>
function saveTicket(){
//need to get var myAppendGrid data over here
}
</script>



<table id="tblAppendGrid" align="center">
</table>
<script>
$(function () {
var myAppendGrid = new AppendGrid({
initRows: 1,
element: "tblAppendGrid",
columns: [...]
});

});

</script>

Answer 1

您可以通过多种方法来实现此目的，但在这种情况下，更简单的方法是通过删除var使myAppendGrid变量成为myAppendGrid变量

<script>
function saveTicket(){
//need to get var myAppendGrid data over here
}
</script>



<table id="tblAppendGrid" align="center">
</table>
<script>
$(function () {
myAppendGrid = new AppendGrid({
initRows: 1,
element: "tblAppendGrid",
columns: [...]
});

});

</script>

更好的方法是将saveTicket()函数放在定义myAppendGrid变量的范围内

var myAppendGrid = new AppendGrid({
  initRows: 1,
  element: "tblAppendGrid",
  columns: [...]
});

function saveTicket() {
  console.log(myAppendGrid);
};

Answer 2

一种选择是用专业术语创建“名称空间”，它只是一个全局对象。 但是有了“名称空间”，您就有更多的选择可以在对象中分配对象，而不仅仅是覆盖一个给定的全局变量。

 var myNameSpace = {}; var myButton = document.querySelector('.my-super-awesome-button'); myButton.addEventListener('click', function(){ var data = myNameSpace.myAppendGrid.getAllValue(); console.log(data); }); $(function(){ myNameSpace.myAppendGrid = new AppendGrid({ element: "tblAppendGrid", uiFramework: "bootstrap4", iconFramework: "fontawesome5", columns: [ { name: "col-1", display: "Column 1" }, { name: "col-2", display: "Column 2" }, { name: "col-3", display: "Column 3" } ] }); }); 

 .my-super-awesome-button { cursor: pointer; color: blue; font-size: 2em; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.appendgrid@2/dist/AppendGrid.js"></script> <div class="my-super-awesome-button">click me</div> <div class="container-fluid"> <table id="tblAppendGrid"></table> </div>