Javascript 试图通过代码构建HTML元素，包括函数

这是我的第一篇帖子，希望有人能帮助我：

我希望构建一个web项目，其中所有HTML元素都存储在数据库中，并从中获取以构建web页面

我发现按钮有问题，我找不到一种方法来存储按钮的函数，我使用Jquery来构建元素，因为现在测试元素定义是在我在Js文件开始时留下的一些数组中模拟的，我唯一能让按钮工作的方法是如果函数是在Js文件中硬编码的，有没有一种方法可以让我也从数据库中获取函数？把它们排成一列

这是我的项目示例：

HTML

JS文件

/**
VARIABLE DEFINITIONS
THESE ARE SUPPOSED TO COME FROM A DATABASE
STILL UNKNOWN HOW TO BRING THE FUNCTIONS, AS STRING THEY ARE NOT ALLOWED. FOR NOW THERE ARE TEST FUNCTIONS.
**/

let buttonIds = ['btn1', 'btn2'];
let buttonText = ['Show Text', 'Show HTML'];
let buttonFunc = [alert1, alert2];
//let buttonFunc = ['alert("Hi");', 'alert("Hello");'];
let paragraphs = ['This is some <b>bold</b> text in a paragraph.', 'another <b>bold</b> test'];


//HELPER FUNCTIONS
// **** THESE ARE SUPPOSED TO COME FROM DATABASE, UNKNOWN HOW TO DO IT. ****

function alert1() {
    alert("Hi");
}

function alert2(){
    alert("Hello");
}




function addElements(){ 
    for(var p=0; p<paragraphs.length; p++){ addParagraphs('#div1', paragraphs[p]);                  }
    for(var i=0; i<buttonIds.length; i++) { createButton( '#div1', buttonIds[i]  , buttonText[i]);  }
}

// ANY ELEMENTS FUNCTION IS DEFINED HERE ONCE THE PAGE IS LOADED.
$(document).ready(function(){
    for(var x=0;x<buttonIds.length; x++){ activateButton(buttonIds[x], buttonFunc[x]); }
});


//HELPER FUNCTIONS USED TO BUILD THE HTML ELEMENTS ON THE MAIN PAGE.
function addParagraphs(location, text){
  $(location).append('<p id="test">'+text+'</p>');
}


function createButton(location, id, text){
var definition;

definition = "<button id="+id+">"+text+"</button>";
$(location).append(definition);
}


function activateButton(buttonId, functionName){
  var composedId = "#"+buttonId;
    $(composedId).click(functionName);
}

/**
变量定义
这些应该来自数据库
仍然不知道如何引入函数，因为它们是不允许的。目前还有测试功能。
**/
让buttonIds=['btn1'，'btn2']；
let buttonText=['Show Text'，'Show HTML']；
let buttonFunc=[alert1，alert2]；
//let buttonFunc=['alert（“Hi”）；'，'alert（“Hello”）；']；
让段落=[“这是段落中的一些粗体文本。”，“另一个粗体测试”]；
//辅助函数
//****这些应该来自数据库，不知道如何做****
函数alert1（）{
警报（“Hi”）；
}
函数alert2（）{
警惕（“你好”）；
}
函数加法器（）{
对于（var p=0；p您可以生成Javascript文件服务器端，其中包含您需要的所有函数。
假设Node.js可以执行以下操作：

expressApp.get("some.js", (req, res) => {
  getDataFromDatabase() // depends on your database
  .then(data => {
    let body = 'function your_fn () { alert("'+ JSON.stringify(data) +'")}';
    res.send(body);
  }) 
});

一种方法是使用对象将函数存储在javascript中，并使用存储在db中的属性名称将哪个函数与哪个元素关联起来

如果不了解更多的用例，就很难真正帮助设计一个合适的系统来使用

下面是一个非常基本的例子


//存储在js文件中的函数
常量funcs={
f1：函数（e）{console.log（'func-one-called，id='，this.id）}，
f2：函数（e）{console.log（'func2已调用，id='，this.id）}
}
//来自数据库的数据
常数=[
{id:1，类名：'one'，func:'f1'，文本：'Item 1'}，
{id:1，类名：'two'，func:'f2'，文本：'Item 2'}
]
forEach元素（e=>{
const$el=$（“”，{id:e.id，class:e.className，text:e.text，单击：funcs[e.func]}）
$（'body'）。追加（$el）；
})；
div{margin:1em；}
.1{颜色：红色；}
.two{color:green；}

点击项目


这些函数应该如何生成并添加到数据库中？对于所有这些，更高级别的用例是什么？从技术上讲，这可能是一个很好的解决方案，您可以将整个JS文件转换为字符串，并在单独的文件或
脚本
标记中运行。但这似乎不是一个好的解决方案练习。可以进一步解释这个问题的原因吗？我同意其他评论。这听起来真的不像是解决问题的可伸缩或性能好的方法。你的目标到底是什么？关注点分离是任何设计的一个重要部分。通过将HTML元素和JS函数存储在数据库中，你完全消除了分离关注的焦点。让数据库代表你的数据。让一个HTML文件定义你数据的结构和语义。让CSS处理你的演示。让JS处理你的行为。你们是对的，我没有提供足够的信息，所以让我解释一下上下文：我在一家使用创建web应用程序的平台的公司工作，它的interface有它的菜单、右窗格和报表。它还有一个管理部分，我可以在其中定义按钮、给它命名、定义位置{菜单、右窗格或报表内}，我可以创建按钮，然后我可以在自己的编辑器中赋予它功能。我知道我创建的所有内容都保存到数据库中，并在显示时内置到Web应用程序中。因此我想以自己的方式做一些符号化的事情。到目前为止，Jquery允许我从数据库中获取几乎所有内容：名称、Id，甚至按钮的文本，但我不能将数组中的函数作为其他元素，因为代码将函数识别为字符串而不是函数，即使文本是相同的。这就是我被卡住的原因。有些人会说：问问构建平台的人。我已经尝试过了，也许他们没有时间，也许他们想保护他们的产品，anyway、 我正试图找到一种方法，因为现在我只知道这是可能的。我喜欢你的例子的编码方式，从我看来这很难（或者可能不可能）要在数据库中存储按钮的功能，但是可以使用从数据库中获取的参数使用预定义的功能。基于此示例，此选项的功能仍然有限，但由于此，我现在更接近了，谢谢。
expressApp.get("some.js", (req, res) => {
  getDataFromDatabase() // depends on your database
  .then(data => {
    let body = 'function your_fn () { alert("'+ JSON.stringify(data) +'")}';
    res.send(body);
  }) 
});