{"id":16832652,"url":"https://github.com/zswang/jhtmls","last_synced_at":"2025-04-11T04:32:43.625Z","repository":{"id":17222180,"uuid":"19991001","full_name":"zswang/jhtmls","owner":"zswang","description":"Unmarked front-end template","archived":false,"fork":false,"pushed_at":"2018-04-26T10:28:17.000Z","size":94,"stargazers_count":15,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T02:39:52.251Z","etag":null,"topics":["frontend-template","jhtmls"],"latest_commit_sha":null,"homepage":"http://jhtmls.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zswang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-20T17:45:26.000Z","updated_at":"2023-10-30T13:23:02.000Z","dependencies_parsed_at":"2022-08-31T20:31:29.572Z","dependency_job_id":null,"html_url":"https://github.com/zswang/jhtmls","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fjhtmls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fjhtmls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fjhtmls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zswang%2Fjhtmls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zswang","download_url":"https://codeload.github.com/zswang/jhtmls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247838446,"owners_count":21004580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend-template","jhtmls"],"created_at":"2024-10-13T11:49:53.895Z","updated_at":"2025-04-11T04:32:43.566Z","avatar_url":"https://github.com/zswang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jhtmls(#$)\n\n[![NPM version][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n[![Coverage Status][coverage-image]][coverage-url]\n\nUnmarked front-end template 无标记的前端模板\n\n## 概述\n\n### jhtmls 是什么？\n\njhtmls 是一个不使用标记符的 JavaScript 前端模版，通过分析每一行的特征，自动区分「逻辑部分」和「输出部分」\n\n\u003e example 举个栗子\n\n```html\n\u003cul\u003e \u003c!--「输出部分」--\u003e\n  forEach(function(item)) { \u003c!--「逻辑部分」--\u003e\n    \u003cli\u003e \u003c!--「输出部分」--\u003e\n      \u003ca href=\"#{item.url}\" title=\"#{item.desc}\"\u003e#{item.title}\u003c/a\u003e \u003c!--「输出部分」--\u003e\n      if (item.photo) { \u003c!--「逻辑部分」--\u003e\n        \u003cimg src=\"#{item.photo}\" \u003e\u003c!--「输出部分」--\u003e\n      } \u003c!--「逻辑部分」--\u003e\n    \u003c/li\u003e \u003c!--「输出部分」--\u003e\n  } \u003c!--「逻辑部分」--\u003e\n\u003c/ul\u003e \u003c!--「输出部分」--\u003e\n```\n\n### 如今这么多 JavaScript 前端模板，jhtmls 存在的意义是什么？\n\n2011年 `jhtmls` 的前身 `AceTemplate` 就已经存在了，为方便迭代已从 `AceEngine` 项目中抽离出来。\n\n如果只处理 `HTML` 格式，那么采用 `JavaScript` 和 `HTML` 语法自然穿插的方式，学习和使用成本都很低了。\n\n\u003e 这种混插的方式与 `JSX` 类似。\n\n```jsx\nReact.render(\n  \u003cdiv\u003e\n    \u003cdiv\u003e\n      \u003cdiv\u003econtent\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e,\n  document.getElementById('example')\n)\n```\n\n### jhtmls 解决什么问题？\n\n尽可能少的输入字符，让写码的过程更流畅。\n\n## 语法\n\n### 输出表达式\n\n+ HTML 编码输出：`#{表达式}`\n+ 原文输出：`!#{表达式}`\n\n## 如何使用\n\n### 安装\n\n+ node 环境 `$ npm install jhtmls`\n+ 浏览器环境 `$ bower install jhtmls`\n\n### 引用\n\n```html\n\u003cscript src=\"jhtmls.min.js\"\u003e\u003c/script\u003e\n```\n\n### 主要接口\n\n```js\n/**\n * 格式化输出\n *\n * @param {string|Function} template 模板本身 或 模板放在函数行注释中\n * @param {Object} data 格式化的数据，默认为空字符串\n * @param {Object} helper 附加数据(默认为渲染函数)\n * @return {Function|string} 如果只有一个参数则返回渲染函数，否则返回格式化后的字符串\n */\nfunction render(template, data, helper) { ... }\n```\n\n## 调用示例\n\n```js\nvar data = [\n  {\n    title: '《哥斯拉》',\n    date: 'today'\n  },\n  {\n    title: '《钢铁侠》',\n    date: 'tomorrow'\n  }\n];\n\nvar render = jhtmls.render(function() {/*!\n\u003cul\u003e\nforEach(function(item) {\n  with (item) {\n  \u003cli\u003e#{title} -- #{date}\u003c/li\u003e\n  }\n});\n\u003c/ul\u003e\n*/});\nvar text = jhtmls.render('#{ JSON.stringify(this) }', data);\n\ndocument.getElementById('main').innerHTML = render(data);\n```\n\n### 历史\n\n为了便于 `jhtmls` 的发展和维护，从 `AceEngine` 抽出 [AceTemplate](https://code.google.com/p/ace-engine/wiki/AceTemplate) 。\n\n## License\n\nMIT © [zswang](http://weibo.com/zswang)\n\n[npm-url]: https://npmjs.org/package/jhtmls\n[npm-image]: https://badge.fury.io/js/jhtmls.svg\n[travis-url]: https://travis-ci.org/zswang/jhtmls\n[travis-image]: https://travis-ci.org/zswang/jhtmls.svg?branch=master\n[coverage-url]: https://coveralls.io/github/zswang/jhtmls?branch=master\n[coverage-image]: https://coveralls.io/repos/zswang/jhtmls/badge.svg?branch=master\u0026service=github\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzswang%2Fjhtmls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzswang%2Fjhtmls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzswang%2Fjhtmls/lists"}