輕量級前端組件實現(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.