jhtmls

KO | EN

gitlite — search

#ai #go #android #linux #docker #nodejs #macos #java #cli #kubernetes #vue #security #mcp #open-source

(★ 15)

Unmarked front-end template

jhtmls Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# jhtmls(#$)

[![NPM version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Coverage Status][coverage-image]][coverage-url]

Unmarked front-end template 无标记的前端模板

## 概述

### jhtmls 是什么？

jhtmls 是一个不使用标记符的 JavaScript 前端模版，通过分析每一行的特征，自动区分「逻辑部分」和「输出部分」

> example 举个栗子

```html
<ul> 
  forEach(function(item)) { 
    <li> 
      <a href="#{item.url}" title="#{item.desc}">#{item.title}</a> 
      if (item.photo) { 
        <img src="#{item.photo}" >
      } 
    </li> 
  } 
</ul> 
```

### 如今这么多 JavaScript 前端模板，jhtmls 存在的意义是什么？

2011年 `jhtmls` 的前身 `AceTemplate` 就已经存在了，为方便迭代已从 `AceEngine` 项目中抽离出来。

如果只处理 `HTML` 格式，那么采用 `JavaScript` 和 `HTML` 语法自然穿插的方式，学习和使用成本都很低了。

> 这种混插的方式与 `JSX` 类似。

```jsx
React.render(
  <div>
    <div>
      <div>content</div>
    </div>
  </div>,
  document.getElementById('example')
)
```

### jhtmls 解决什么问题？

尽可能少的输入字符，让写码的过程更流畅。

## 语法

### 输出表达式

+ HTML 编码输出：`#{表达式}`
+ 原文输出：`!#{表达式}`

## 如何使用

### 安装

+ node 环境 `$ npm install jhtmls`
+ 浏览器环境 `$ bower install jhtmls`

### 引用

```html
<script src="jhtmls.min.js"></script>
```

### 主要接口

```js
/**
 * 格式化输出
 *
 * @param {string|Function} template 模板本身 或 模板放在函数行注释中
 * @param {Object} data 格式化的数据，默认为空字符串
 * @param {Object} helper 附加数据(默认为渲染函数)
 * @return {Function|string} 如果只有一个参数则返回渲染函数，否则返回格式化后的字符串
 */
function render(template, data, helper) { ... }
```

## 调用示例

```js
var data = [
  {
    title: '《哥斯拉》',
    date: 'today'
  },
  {
    title: '《钢铁侠》',
    date: 'tomorrow'
  }
];

document.getElementById('main').innerHTML = render(data);
```

### 历史

为了便于 `jhtmls` 的发展和维护，从 `AceEngine` 抽出 [AceTemplate](https://code.google.com/p/ace-engine/wiki/AceTemplate) 。

## License

[npm-url]: https://npmjs.org/package/jhtmls
[npm-image]: https://badge.fury.io/js/jhtmls.svg
[travis-url]: https://travis-ci.org/zswang/jhtmls
[travis-image]: https://travis-ci.org/zswang/jhtmls.svg?branch=master
[coverage-url]: https://coveralls.io/github/zswang/jhtmls?branch=master
[coverage-image]: https://coveralls.io/repos/zswang/jhtmls/badge.svg?branch=master&service=github

jhtmls

jhtmls Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

jhtmls

jhtmls Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README