npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

btpl

v1.4.2

Published

极简极致的 JavaScript 模板引擎

Downloads

3

Readme

简要

bt 模版引擎立志成为极简极致的模版引擎,bt 对于性能的追求到达极致,几乎超越市面上已有的任何模版引擎。bt 引擎采用惰性函数模式,让模版性能更是到达巅峰。经过极端的压力测试,性能与 laytpl, doT, artTemplate 并驾齐驱,更是比其他引擎快了20-40倍不止。(性能测试)

语法方面,除了几个特定的符号,其他代码可以直接用原生js语法书写 (Native JavaScript) 让您的学习成本降低到几乎为零。

在 1.3 以后的版本,更是添加了数组迭代和过滤器的功能,让您能更加方便的渲染数据。

从 1.4 版本开始,分为 极致版(v1.x) 和 扩展版(v2.x) 两个版本,版本号 1.x 为极致版,2.x 为扩展版。

文件说明

  • bt.js - 极致版
  • bt.ext.js - 扩展版
  • filters.js - 过滤器 (配合 扩展版 使用)

极致版不包含过滤器,后期不再扩展功能。扩展版包含过滤器功能,但要配合过滤器文件使用。

查看详细例子

优势

  1. 没有依赖第三方库,原生js (Native JavaScript) 实现
  2. 性能卓绝,与 laytpl, doT, artTemplate 并驾齐驱,比baiduTemplate、kissyTemplate等快20-40倍
  3. 具备转义等安全机制,较科学的报错功能
  4. 具备数组迭代,可以简单方便的输出数组内容
  5. 具备过滤器,轻而易举的处理您输出的数据
  6. 空白符号可控,可以通过参数 strip 忽略或保留空白
  7. 模版中可任意书写Native JavaScript,充分确保模版的灵活度
  8. 支持应用在Node.js平台
  9. 支持所有浏览器,包括 IE6+

性能压力测试图

更新日志

[v2.0] 2015-07-31 修改引擎 - 扩展版,包含过滤功能,以及基础过滤器

[v1.4] 2015-07-31 修改引擎 - 极致版,不包括过滤器
[v1.3] 2015-06-30 结构调整,加入数组迭代和过滤器功能
[v1.2] 没有1.2,因为功合并到1.3同时发布了
[v1.1] 2015-06-29 优化代码,添加多平台支持
[v1.0] 2015-06-17 第一版本发布

快速上手

1 在你的html中引入 bt.js 或者 bt.min.js 文件

<script type="text/javascript" src="bt.min.js"></script>

2 准备数据,例如你有以下数据:

var data = {
    title: '前端圈',
    intro: '一群码js的骚年,幻想改变世界,却被世界改变。',
    list: [
        {name: '贤心', city: '杭州'},
        {name: '乱码', city: '杭州'},
        {name: '谢亮', city: '北京'},
        {name: '浅浅', city: '杭州'},
        {name: 'Dem', city: '北京'}
    ]
};

3 根据数据编写你的模版

<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
    <li>
        <span>{{ d.list[i].name }}</span>
        <span>所在城市:{{ d.list[i].city }}</span>
    </li>
{{# } }}
</ul>

4 ok 完成了。查看详细例子

API

配置

/**
 * 核心函数
 * @param {string} tpl 模板数据
 * @param  {object} options [可选] 配置参数 (详见下面 修改引擎配置 部分)
 * @return {object} 返回模版引擎对象
 */
bt(tpl, options);


// 先用 var tpl = bt(tpl); 得到模版引擎对象后
/**
 * 渲染数据,生成最终展示的html代码
 * @param  {object} data 待渲染的数据
 * @return {string}      渲染后的html
 */
tpl.render(data);


/**
 * 修改引擎配置
 * @param  {object}
 */
bt.config(options);
// options 配置参数如下
{
    begin: "{{",  // 模板起始标签
    end: "}}",    // 模板闭合标签
    varname: "d", // 对象替换符
    strip: true   // 忽略空白符
}


/**
 * 得到版本号
 * @type {number}
 */
bt.ver;


/** 以下是拓展版功能 **/
/**
 * 注册过滤器
 * @param  {string}   name     过滤器名
 * @param  {function} callback 回调函数
 */
bt.filter = function (name, callback);
// 在 filters.js 文件中有几个默认过滤器例子,你也可以在 filters.js 文件中添加自己的过滤器

查看详细例子

模版标签语法

{{ }}	输出一个普通字段 (别名 插值表达式)
{{= }}	输出一个实体转码后的字段
{{# }}	JavaScript脚本
{{@ }}	迭代标签

PS: 要注意操作符的符号不能和 {{ 直接有空格,

比如 {{ = d.text }} 这样是错误的,一定要写成 {{= d.text }} 才对,

操作符后面的空格随意,闭合标签 }} 前面的空格也随意,

所以你可以 {{= d.text }} 也是没问题的。