Nodejs markc[marks] 基于JsonML 的模板，研究模板同学的一起来完善。

Nodejs markc[marks] 基于JsonML 的模板，研究模板同学的一起来完善。

mark

JsonML template

https://github.com/coordcn/mark

JsonML 是以json数组来描述html的一种模板语言，整个实现参考了jqml和makrdown-js，并在这些代码的基础上加入了模板引用的实现。

markc.js是客户端实现，marks.js是服务端实现。

markc.js有两个函数，dom(template, [data])直接通过dom构建html元素，元素可以添加事件，返回dom节点。

html(template, [data])返回html字符串，使用innerHtml加入。

marks.js有一个函数，html(template, [data])返回html字符串。

具体使用请看test及JsonML


2 回复

Nodejs markc[marks] 基于JsonML 的模板

简介

mark 是一个基于 JsonML (JSON Markup Language) 的模板引擎，它允许你使用 JSON 数组来描述 HTML 结构。mark 分为客户端（markc.js）和服务端（marks.js）两部分，使得你可以根据需求选择合适的部分进行开发。

JsonML 简介

JsonML 是一种将 HTML 转换为 JSON 数组的方法，这样可以在 JavaScript 中更方便地处理 HTML 结构。例如：

[
    'div',
    { id: 'container' },
    [
        'h1',
        'Hello, World!'
    ],
    [
        'p',
        'This is a paragraph.'
    ]
]

上述 JSON 数组描述了一个包含 div 容器的简单 HTML 结构，其中包含一个 h1 和一个 p 元素。

使用示例

客户端 (markc.js)

假设你在浏览器中使用 markc.js 来生成 HTML 并插入到页面中：

// 引入 markc.js
const { dom, html } = require('markc');

// 创建一个简单的模板
const template = [
    'div',
    { id: 'main-container' },
    [
        'h1',
        'Welcome to the Page'
    ],
    [
        'p',
        'This content can be dynamically generated.'
    ]
];

// 使用 dom 函数创建 DOM 节点
const container = document.getElementById('app');
const domElement = dom(template);

// 将 DOM 节点插入到页面中
container.appendChild(domElement);

// 使用 html 函数生成 HTML 字符串
const htmlString = html(template);
console.log(htmlString); // 输出: <div id="main-container"><h1>Welcome to the Page</h1><p>This content can be dynamically generated.</p></div>
服务端 (marks.js)

在服务端，我们可以使用 marks.js 来生成 HTML 字符串，并将其发送给客户端：

// 引入 marks.js
const { html } = require('marks');

// 创建一个简单的模板
const template = [
    'div',
    { id: 'server-generated' },
    [
        'h1',
        'Server-Side Generated Content'
    ],
    [
        'p',
        'This content was generated on the server side.'
    ]
];

// 生成 HTML 字符串
const htmlString = html(template);
console.log(htmlString); // 输出: <div id="server-generated"><h1>Server-Side Generated Content</h1><p>This content was generated on the server side.</p></div>

总结

通过 mark 模板引擎，你可以使用简洁的 JSON 数组来描述复杂的 HTML 结构，并且可以轻松地在客户端和服务端之间进行转换。这不仅提高了代码的可维护性，还简化了动态内容的生成过程。如果你对模板引擎有兴趣，欢迎参与 mark 的开发和完善！


Nodejs markc[marks] 基于JsonML 的模板，研究模板同学的一起来完善

简介

JsonML 是一种基于 JSON 数组描述 HTML 结构的语言。mark 项目旨在提供一个简单而强大的模板引擎，使得开发者能够方便地通过 JSON 数组来生成 HTML 结构。该项目分为客户端 (markc.js) 和服务端 (marks.js) 实现。

客户端实现 (markc.js)

markc.js 提供了两个主要的函数：

  1. dom(template, [data]):

    • 功能：根据给定的模板和数据构建 DOM 元素，并支持绑定事件。
    • 返回值：DOM 节点对象。
    • 示例：
      const markc = require('markc');

// 模板定义
const template = ['div', { class: 'container' }, ['h1', 'Hello World']];

// 构建 DOM 节点
const domElement = markc.dom(template);

document.body.appendChild(domElement);

  2. html(template, [data]):

    • 功能：根据给定的模板和数据生成 HTML 字符串。
    • 返回值：HTML 字符串。
    • 示例：
      const markc = require('markc');

// 模板定义
const template = ['div', { class: 'container' }, ['h1', 'Hello World']];

// 生成 HTML 字符串
const htmlString = markc.html(template);

document.body.innerHTML = htmlString;

服务端实现 (marks.js)

marks.js 提供了一个函数：

  1. html(template, [data]):
    • 功能：根据给定的模板和数据生成 HTML 字符串。
    • 返回值：HTML 字符串。
    • 示例：
      const marks = require('marks');

// 模板定义
const template = ['div', { class: 'container' }, ['h1', 'Hello World']];

// 生成 HTML 字符串
const htmlString = marks.html(template);

console.log(htmlString);  // 输出: <div class="container"><h1>Hello World</h1></div>

示例模板定义

假设我们有一个复杂的模板结构，例如一个包含表单的页面：

const template = [
  'div',
  { class: 'form-container' },
  [
    'form',
    { action: '/submit-form' },
    [
      'label', { for: 'username' }, 'Username',
      'input', { type: 'text', id: 'username', name: 'username' },
      'button', { type: 'submit' }, 'Submit'
    ]
  ]
];

使用测试

你可以参考 mark 项目的测试目录来了解更多用法和细节：

如果你对模板有任何改进建议或问题，欢迎参与讨论！

回到顶部