Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zswang/jhtmls
Unmarked front-end template
https://github.com/zswang/jhtmls
frontend-template jhtmls
Last synced: about 1 month ago
JSON representation
Unmarked front-end template
- Host: GitHub
- URL: https://github.com/zswang/jhtmls
- Owner: zswang
- License: mit
- Created: 2014-05-20T17:45:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-26T10:28:17.000Z (over 6 years ago)
- Last Synced: 2024-09-07T05:43:19.214Z (2 months ago)
- Topics: frontend-template, jhtmls
- Language: JavaScript
- Homepage: http://jhtmls.com
- Size: 91.8 KB
- Stars: 15
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
-
#{item.title}
if (item.photo) {
}
forEach(function(item)) {
}
```
### 如今这么多 JavaScript 前端模板，jhtmls 存在的意义是什么？
2011年 `jhtmls` 的前身 `AceTemplate` 就已经存在了，为方便迭代已从 `AceEngine` 项目中抽离出来。
如果只处理 `HTML` 格式，那么采用 `JavaScript` 和 `HTML` 语法自然穿插的方式，学习和使用成本都很低了。
> 这种混插的方式与 `JSX` 类似。
```jsx
React.render(
document.getElementById('example')
)
```
### jhtmls 解决什么问题？
尽可能少的输入字符，让写码的过程更流畅。
## 语法
### 输出表达式
+ HTML 编码输出：`#{表达式}`
+ 原文输出：`!#{表达式}`
## 如何使用
### 安装
+ node 环境 `$ npm install jhtmls`
+ 浏览器环境 `$ bower install jhtmls`
### 引用
```html
```
### 主要接口
```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'
}
];
var render = jhtmls.render(function() {/*!
- #{title} -- #{date}
forEach(function(item) {
with (item) {
}
});
*/});
var text = jhtmls.render('#{ JSON.stringify(this) }', data);
document.getElementById('main').innerHTML = render(data);
```
### 历史
为了便于 `jhtmls` 的发展和维护，从 `AceEngine` 抽出 [AceTemplate](https://code.google.com/p/ace-engine/wiki/AceTemplate) 。
## License
MIT © [zswang](http://weibo.com/zswang)
[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