jhtmls
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.11 • Public • Published

    jhtmls(#$)

    NPM version Build Status Coverage Status

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

    概述

    jhtmls 是什么?

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

    example 举个栗子

    <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 格式,那么采用 JavaScriptHTML 语法自然穿插的方式,学习和使用成本都很低了。

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

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

    jhtmls 解决什么问题?

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

    语法

    输出表达式

    • HTML 编码输出:#{表达式}
    • 原文输出:!#{表达式}

    如何使用

    安装

    • node 环境 $ npm install jhtmls
    • 浏览器环境 $ bower install jhtmls

    引用

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

    主要接口

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

    调用示例

    var data = [
      {
        title: '《哥斯拉》',
        date: 'today'
      },
      {
        title: '《钢铁侠》',
        date: 'tomorrow'
      }
    ];
     
    var render = jhtmls.render(function() {/*!
    <ul>
    forEach(function(item) {
      with (item) {
      <li>#{title} -- #{date}</li>
      }
    });
    </ul>
    */});
    var text = jhtmls.render('#{ JSON.stringify(this) }', data);
     
    document.getElementById('main').innerHTML = render(data);

    历史

    为了便于 jhtmls 的发展和维护,从 AceEngine 抽出 AceTemplate

    License

    MIT © zswang

    Install

    npm i jhtmls

    Homepage

    jhtmls.com/

    DownloadsWeekly Downloads

    40

    Version

    2.0.11

    License

    MIT

    Unpacked Size

    30.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar