輕量級(jí)前端組件實(shí)現(xiàn)(885byte with gzip)

浠ラ箍發(fā)布于2019-08-22 11:08 / 2213人閱讀

摘要：可以包括，或者其他的賦值語句或者邏輯代碼這里有一個(gè)已知的需要注意的點(diǎn)不要在模板中使用單引號(hào)，如果必須要使用，請(qǐng)使用轉(zhuǎn)義字符用法創(chuàng)建一個(gè)模板對(duì)象將模板字符串編譯成函數(shù)編譯之后的模板使用不同的變量進(jìn)行渲染，渲染的時(shí)候需要使用接收輸出示例

tplite

一個(gè)基于輕量級(jí)模板庫實(shí)現(xiàn)的前端組建庫

可以像react一樣在前端使用組件的方式構(gòu)建應(yīng)用
基于一個(gè)只有415字節(jié)的模板庫實(shí)現(xiàn)（基于字符串模式）
只暴露幾個(gè)簡(jiǎn)單的接口render, mount, setState, trigger.
在渲染的時(shí)候，使用閉包將需要的事件或者方法綁定到對(duì)應(yīng)的DOM元素上面

項(xiàng)目地址　https://github.com/lloydzhou/...
完整的todo mvc示例　https://lloydzhou.github.io/t...

使用組件

  
  
    {{title}}
  
  {{ encodeURIComponent(title)}}
  
  {% if (messages && messages.length > 0) { %}
    {% messages.forEach(function(message, index){ %}
      
      {{sub(messageTmpl, messageMethods, {message: message, index: index})}}
    {% })%}
  {% } %}

使用模板，初始化的initState以及需要綁定或者操作的方法以及root節(jié)點(diǎn)初始化組件：

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"

模板語法

簡(jiǎn)單來說，這個(gè)模板只提供兩種語法：

{{ value }} 將中間的value當(dāng)成字符串輸出

{% statement %} 將中間的當(dāng)成js語句執(zhí)行。（可以包括，if/for或者其他的賦值語句或者邏輯代碼）

Issue

這里有一個(gè)已知的需要注意的點(diǎn)：
不要在模板中使用單引號(hào)，如果必須要使用，請(qǐng)使用轉(zhuǎn)義字符　

用法

創(chuàng)建一個(gè)模板對(duì)象

var template = new tplite.Template()

將模板字符串編譯成函數(shù)

var compile = template("{{title}}")

編譯之后的模板使用不同的變量進(jìn)行渲染，渲染的時(shí)候需要使用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

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