我如何构建用于自动网页生成的迷你编程语言 - 一步一步

原创

ithorizon 4周前 (10-19) 阅读数 41 #CSS

构建网页通常会让人感觉重复且耗时，尤其是在 html、css 和其他技术之间切换时。这让我产生了一个想法：创建一种简化的语言，自动生成网页的过程，使我能够以极简语法编写代码，然后我的自定义解析器将其转换为 html 和 css。

在本文中，我将向您介绍如何使用 python 构建自定义编程语言，解释解析器如何解释该语言，并展示我如何简化 web 开发过程。如果您对它的工作原理感到好奇或想要做出贡献，我们邀请您探索该项目！

这个项目的想法来自于简化 web 开发的愿望。我注意到编写 html 和 css 可能是乏味且重复的，因此我决定创建一种自定义语言，使这个过程更加直观。

我的语言的工作原理：“我创建的语言允许用户使用简单的语法来定义网页的结构和样式。例如，您可以使用如下结构，而不是编写复杂的 html 和 css：page {
标题：“我的增强型网站”；
标题 {
文字：“欢迎！”；
风格：{
颜色：红色；
字体大小：30px；
}
}
}
然后，我用 python 构建的解析器会自动将其转换为功能齐全的 html 页面。

我使用 python 实现了这个项目，并使用正则表达式 (regex) 来解析自定义语法。以下是解析器关键组件的细分：

webpage 类处理页面元素，例如标题、按钮、表单和表格。
parse_webcode 函数读取自定义 .webcode 文件并从中生成有效的 html。
表单、表格和按钮等元素在 .webcode 文件中以更简单的方式定义，解析器会自动生成相应的 html。”
一切如何结合在一起：“解析 .webcode 文件后，它会生成一个 output.html 文件，可以在浏览器中打开该文件以查看结果。这是解析器生成的最终输出的示例。”

挑战和未来计划：在整个项目中，主要挑战之一是确保解析器正确处理所有 html 元素和属性。展望未来，我计划通过添加更多交互式元素（例如 javascript 支持和 css 样式框架）来扩展功能。

合作邀请：如果您有兴趣贡献或有改进建议，欢迎您探索该项目并留下反馈。这是您可以做出贡献的存储库的链接。

代码片段：.webcode 文件中的自定义语法
解释您的语言如何允许用户以更简单的语法编写网页元素：`page {
标题：“我的增强型网站”；

header {
    text: "welcome!";
    style: {
        color: red;
        font-size: 30px;
    }
}

button {
    text: "click me";
    action: onclick {
        alert('button clicked!');
    }
}

table {
    rows: [
        ["name", "age", "email"],
        ["john", "30", "john@example.com"],
        ["jane", "25", "jane@example.com"]
    ];
}

}
`

片段：用于转换语法的 python 解析器代码
以下是 python 代码读取自定义 .webcode 语法并将其转换为有效 html 的方式。 parse_webcode 函数处理这个过程： `def parse_webcode(filename):
以 open(filename, 'r') 作为文件：
lines = file.read()

# Extract the page title
title_match = re.search(r'title:\s*"(.+?)";', lines)
title = title_match.group(1) if title_match else "Untitled Page"

# Create a new WebPage object
page = WebPage(title)

# Extract header, style, and other elements (like buttons and tables)
header_match = re.search(r'header\s*{\s*text:\s*"(.+?)";\s*style:\s*{(.+?)}\s*}', lines, re.DOTALL)
if header_match:
    header_text = header_match.group(1)
    style_text = header_match.group(2)
    style_dict = parse_style(style_text)
    page.add_header(header_text, style_dict)

# Extract table data
table_match = re.search(r'table\s*{\s*rows:\s*\[(.+?)\]\s*;\s*}', lines, re.DOTALL)
if table_match:
    table_rows = table_match.group(1).split("],")
    rows = [row.replace("[", "").replace("]", "").replace('"', '').split(",") for row in table_rows]
    page.add_table(rows)

return page.generate_html()

片段：生成的 html 输出
这是自定义语法解析并转换为 html 后最终 html 的示例：`

我的增强型网站