轻量级前端组件实现(885byte with gzip)

tplite

一个基于轻量级模板库实现的前端组建库

可以像react一样在前端使用组件的方式构建应用
基于一个只有415字节的模板库实现（基于字符串模式）
只暴露几个简单的接口render, mount, setState, trigger.
在渲染的时候，使用闭包将需要的事件或者方法绑定到对应的DOM元素上面

项目地址　https://github.com/lloydzhou/...
完整的todo mvc示例　https://lloydzhou.github.io/t...

使用组件

  <!-- 变量或者表达式取值之后进行替换 -->
  <h1>
    {{title}}
  </h1>
  <b>{{ encodeURIComponent(title)}}</b>
  <!-- 下面的js代码会原封不动的被执行，包括if/for -->
  {% if (messages && messages.length > 0) { %}
    {% messages.forEach(function(message, index){ %}
      <!-- 这个地方是生成一个子组件 -->
      <p>{{sub(messageTmpl, messageMethods, {message: message, index: index})}}</p>
    {% })%}
  {% } %}
  <!-- 将定义的方法add绑定到这个按钮上 -->
  <button onclick="{{ add() }}">ADD</button>

使用模板，初始化的initState以及需要绑定或者操作的方法以及root节点初始化组件：

var root = document.getElementById("root")
  , tmpl = document.getElementById("tpl").innerHTML
  , initState = {title: 'Demo for mocro javascript template!', messages: ['test demo 1', 'test demo2']};

var app = new tplite.Component(root, tmpl, initState, {
  view: function(message){
    alert(message)
  },
  add: function(message){
    var  messages = this.state.messages;
    messages.push('test demo' + (messages.length + 1))
    this.setState({ messages, messages })
  },
  remove: function(index){
    var  messages = this.state.messages;
    messages.splice(index, 1)
    this.setState({ messages, messages })
  },
  onUpdate: function(){
    // will trigger when component render
    console.log('update', this.state)
  }
})

完整的例子

please see result in "component.html"

模板语法

简单来说，这个模板只提供两种语法：

1. {{ value }} 将中间的value当成字符串输出
2. {% statement %} 将中间的当成js语句执行。（可以包括，if/for或者其他的赋值语句或者逻辑代码）

Issue

这里有一个已知的需要注意的点：
不要在模板中使用单引号，如果必须要使用，请使用转义字符　

用法

创建一个模板对象

var template = new tplite.Template()

将模板字符串编译成函数

var compile = template("<h1>{{title}}</h1>")

编译之后的模板使用不同的变量进行渲染，渲染的时候需要使用callback接收输出

var stringbuffer = new tplite.StringBuffer()
compile({title: 'Title !!!'}, stringbuffer)
console.log(stringbuffer.toString())

// render template and write to document
compile({title: 'Title !!!'}, function(s){document.write(s);})

示例

please see result in "index.html"

LICENSE

Copyright 2014-2017 @Lloyd Zhou

Released under the MIT and GPL (version 2 or later) Licenses.