如何以编程方式运行 javascript 对象中的函数？

Question

我正在尝试使用 Dexie 创建用户查询，用户可以在其中查询自己的数据库，但我无法让它工作。

<!-- html -->

<div class="window" style="padding-top: 1.5rem;">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-grid.min.css">
 <div class="window-content">
   <div class="pane-group">
       <div class="pane" style="padding:4rem;padding-top: 0 ">
           <h3 class="text-center"><u><span class="icon icon icon-code icon-text" style="color:#4e5851;padding-right:1rem "></span>Advanced Queries</u></h3>
           <table class="table-striped mb-2">
               <thead>
               <tr>
                   <th colspan="3"><input class="form-control" type="" name="query" id="query"></th>
                   <th style="width:4rem"><button class="btn btn-default" id="run">
                       <span class="icon icon-search"></span>
                   </button></th>
               </tr>
           </thead>
           </table>
           <div class ="row" style="display: flex" id='display_body'>

           </div>
       </div>
   </div>
</div>
</div>

//script

document.querySelector('#run').addEventListener("click", function(){
const { init_data} = require('../res/reusable');
var db = init_data(Dexie);
let torun = document.querySelector('#query').value; 
let mangoArray=torun.split('.')
//console.log('mangoArray');
if (mangoArray.length== '1') {
    db[mangoArray[0]].each(item=>{
        console.log(item);
});

}else if(mangoArray.length== '2'){
db[mangoArray[0]][mongoArray[1]].each(item=>{
console.log(item);
});
}
});

当我在输入中输入devices时（dexie数据库中的table有效） 完整应该运行 db.devices.each

However i cant get functions to work inside the dexie class. so when i input devices.orderBy('name') i get undefined error

//error
Uncaught TypeError: Cannot read property 'each' of undefined

如何实现？

Answer 1

首先，你尝试做的事情是很危险的；让用户能够从应用程序的前端对数据库执行任意查询。我建议谨慎。

其次 - 错误说明了一切 - 您不能在 undefined 上调用方法 each()。那么 undefined 是什么？看，当您的查询如下所示时：devices.orderBy('name')，代码执行以下操作：

let mangoArray=torun.split('.') // ["devices", "orderBy('name')"]
...
}else if(mangoArray.length== '2'){
db[mangoArray[0]][mongoArray[1]]
// ^ now pay attention: db["devices"]["orderBy('name')"]
.each(item=>{
  console.log(item);
});

所以，虽然db对象有属性字段devices，但肯定没有orderBy('name')。如果要调用这个对象的方法，有几种处理方法。最简单的（但 最危险的 ）是跳过拆分并使用 eval:

来处理它

const query = eval(`db.${torun}`)
query.each(...)

但这允许用户对您的数据为所欲为 - 删除、修改、损坏等。更安全的方法是对输入使用一些非常复杂的正则表达式验证。

最安全、也是最受建议的做法是实际开发一个用户友好的界面，让用户可以完全控制地访问您的数据。制作一些表格，让用户选择他想要获取的数据、如何排序、过滤它们，然后通过服务器发送这些数据并 return 充分响应。这称为 "hiding implementation" - 您的应用程序的用户不需要知道您使用的是哪个数据库，更不用说这个数据库的 API！

希望对您有所帮助。

如何以编程方式 运行 javascript 对象中的函数？

How to run a function in an javascript object programatically?

javascript

dexie

如何以编程方式运行 javascript 对象中的函数？