Nodejs中定义标签名为函数名来生成 HTML 的办法怎么样?

Nodejs中定义标签名为函数名来生成 HTML 的办法怎么样?

尝试做了一下, 感觉有点怪, 不过个人还能接受 http://jiyinyiyong.github.com/lilyturf/page/ https://github.com/jiyinyiyong/lilyturf

12 回复

Node.js 中定义标签名为函数名来生成 HTML 的办法怎么样？

在 Node.js 中，使用模板引擎或自定义函数来生成 HTML 是一种常见的做法。其中一种方法是通过定义标签名称为函数名来生成 HTML。这种方法可以让你以更简洁、直观的方式编写代码，但也有其局限性和潜在的缺点。

示例代码

假设我们想要生成一个简单的 HTML 文档，其中包括一个标题和一个段落。我们可以定义一些函数来表示这些标签：

function h1(content) {
    return `<h1>${content}</h1>`;
}

function p(content) {
    return `<p>${content}</p>`;
}

// 使用这些函数生成 HTML
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Page</title>
</head>
<body>
    ${h1('这是一个标题')}
    ${p('这是段落内容')}
</body>
</html>
`;

console.log(html);

在这个例子中，h1 和 p 函数分别用于生成 <h1> 和 <p> 标签，并将内容插入到标签中。

优点

  1. 简洁性：代码看起来更加简洁和直观。
  2. 可读性：对于熟悉 HTML 的开发者来说，这种方式更容易理解。

缺点

  1. 维护性：如果需要添加更多的属性或复杂的结构，这种方式可能会变得复杂。
  2. 错误处理：没有内置的错误处理机制，如果内容中有特殊字符，可能会导致 HTML 渲染错误。
  3. 灵活性：这种硬编码的方式不如模板引擎灵活，例如无法轻松地进行条件渲染或循环渲染。

总结

虽然定义标签名为函数名来生成 HTML 可以使代码更加简洁和直观，但它也有一些局限性。如果你的应用相对简单且不需要复杂的逻辑，这种方法是可以接受的。然而，对于更复杂的应用场景，使用成熟的模板引擎（如 EJS、Pug 或 Handlebars）可能是更好的选择。


多个属性呢，比如onclick之类的怎么写

多个属性就是 {} 多写键值对, 貌似没问题呀…

不多说了，看这个：https://github.com/gradus/coffeecup

例子里好象没有layout的用法

Layout? 不是 CSS 做的么? … 我没写出来正规的模板引擎啊, 可能理解有偏差

很早以前看 coffeecup 结果当时 -> 连用我还不懂 coffee 的语法能这么写… 没去想居然思路是一样的… 居然有这种事情…

我的改进：dom.coffee 实现了 -> ，但是还是需要 @ ，coffeecup 怎么去掉 @ 依赖的还不知道，希望没有污染全局空间

原来你又改了… 我刚把 Coffeekup 那种办法想出来… 比较怀疑 Coffeekup 根本没处理过污染全局的问题, 因为人家就是模板引擎. 我是打算在 CoffeeScript 运行过程用, 所以才会考虑

log = console.log

elements = “”"
body head div section footer nav input p
“”"


result = “”
stack = “”


html = (t) ->
stack = "  " + stack
result += “\n#{stack}” + t
stack = stack[2…]


attrs = (options) ->
str = “”
for key, value of options
str += " #{key}=’#{value}’"
str


elements.trim().split(/\s+/).map (tag) ->
global[tag] = (options, f…) ->
if (typeof options is “function”)
f.unshift options
options = {}


result += "\n#{stack}&lt;#{tag}#{attrs options}&gt;"

stack = "  " + stack
f.forEach (func) -&gt; func()
stack = stack[2..]

result += "\n#{stack}&lt;/#{tag}&gt;"

body class: “ok”, ->
div class: “name”, id: “fine”, ->
p -> html “string”
p -> html “string”
p -> html “string”


log result

运行结果:

➤➤ coffee simulate.coffee 

<body class='ok'>
  <div class='name' id='fine'>
    <p>
        string
    </p>
    <p>
        string
    </p>
    <p>
        string
    </p>
  </div>
</body>

看了 coffeekup 代码, 人家用 eval 解决了全局变量的问题… https://github.com/mauricemach/coffeekup/blob/master/src/coffeekup.coffee#L311-L324 对我来说难度比较大了, 貌似 eval 有些人不喜欢的

… 下意识写 eval 了, 是 Function 生成函数… 找到了把函数的 template 转化到 string 的操作 https://github.com/mauricemach/coffeekup/blob/master/src/coffeekup.coffee#L280 表示函数生成器从来没用过… 比不上 Lisp 来得简单,

使用标签名作为函数名来生成 HTML 是一种自定义 DSL（领域特定语言）的方法，可以使代码更加简洁和易读。这种方法在某些场景下可以提高开发效率和可维护性。下面展示如何通过这种方式来生成 HTML。

示例代码

首先，我们可以创建一个简单的库，定义一些函数用于生成 HTML 标签：

function h(tag) {
    return function(...args) {
        let attributes = {};
        let content = '';
        
        // 处理属性和内容
        for (let arg of args) {
            if (typeof arg === 'string' || typeof arg === 'number') {
                content += arg;
            } else if (typeof arg === 'object' && !Array.isArray(arg)) {
                Object.assign(attributes, arg);
            }
        }

        let attrString = Object.keys(attributes).map(key => `${key}="${attributes[key]}"`).join(' ');
        return `<${tag}${attrString ? ' ' + attrString : ''}>${content}</${tag}>`;
    };
}

// 定义一些常用标签的函数
const div = h('div');
const span = h('span');
const p = h('p');

// 使用这些函数生成 HTML
console.log(div({class: "container"}, 
    p("Hello, world!"),
    span("This is a span.")
));

解释

  • h 函数：这个函数接收一个参数 tag，表示 HTML 标签名。返回的函数接收任意数量的参数 args。
  • 处理参数：在返回的函数内部，我们遍历 args 参数，区分字符串和对象，字符串作为标签内容，对象作为标签属性。
  • 生成标签：根据标签名和属性生成对应的 HTML 字符串，并插入内容。

上述代码定义了几个常用的标签函数（如 div, span, p），然后使用这些函数来生成 HTML 结构。这种方法不仅让代码更具可读性，还可以根据需求扩展更多功能，例如增加事件处理器、CSS 类等。

虽然这种方法有一定的创新性和可读性优势，但在实际项目中，还需考虑团队习惯、维护成本等因素。

回到顶部