外星人源码论坛 首页 编程经验 轻量级前端组件实现(885byte with gzip)

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

2018-3-5 06:49
原作者: 外星人源码网 来自: 外星人源码网 收藏 分享 邀请

tplite 一个基于轻量级模板库实现的前端组建库 可以像react一样在前端使用组件的方式构建应用基于一个只有415字节的模板库实现(基于字符串模式)只暴露几个简单的接口render, mount, setState, trigger.在渲染的时 ...

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"

模板语法

简单来说,这个模板只提供两种语法:

    {{ value }} 将中间的value当成字符串输出 {% 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.


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读22 回复0
上一篇:
javascript 算法整理发布时间:2018-03-05
下一篇:
【222天】黑马程序员27天视频学习笔记【Day25-上】发布时间:2018-03-05
推荐资讯
阅读排行
国内最专业的源码技术交流社区
全国免费热线电话

0373-5171417

周一至周日9:00-23:00

反馈建议

admin@eenot.com 在线QQ咨询

扫描二维码关注我们