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

microtmpl

v0.0.1

Published

Super Micro Template

Downloads

2

Readme

MicroTmpl 微型模板

Super Micro JavaScript Template Engine

超微型前端模板

Brief Introduction 简介

The only advantage is that this template engine is super micro, just about 15 lines.

唯一的优点就是超微型,只有15行左右的代码

Features 特性

  • No logic 无逻辑
  • Automatic loop for Arrays 数组自动遍历
  • No JavaScript Runtime 不支持模板中的JavaScript代码

Usage 用法

See we have a template string like this:

假设我们有如下模板:

var tmplStr = '<li>My Name is {%name%}, I\'m {%age%} years old.</li>';

And an Array, an Object:

以及一个数组,一个对象:

//Array 数组
var arr = [{
	name:'TooBug',
	age:18
},{
	name:'ThreeBug',
	age:18.1
}];

//Object 对象
var obj = {
	name:'Another TooBug',
	age:18.2
};

Render like this:

这样渲染:

var html1 = MicroTmpl(tmplStr,arr);
// <li>My Name is TooBug, I\'m 18 years old.</li><li>My Name is ThreeBug, I\'m 18.1 years old.</li>

var html2 = MicroTmpl(tmplStr,obj);
// <li>My Name is Another TooBug, I\'m 18.2 years old.</li>

Addtions 其它

Depend on Array.forEach of ES5, so if used in the browsers that is not so modern, you will need a polyfill.

依赖ES5中的Array.forEach,所以如果用在不是那么新的浏览器上,需要一个ES5数组补丁。

Since the performance is not so well, it only suit for little projects.(Which maybe the JS code is smaller than a template engine.)

由于这个模板的性能不是那么好,所以它只适合比较小的项目。(比如项目的JS代码本身比模板引擎还要小的。)