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

浠ラ箍发布于2019-08-22 11:08 / 2092人阅读

摘要：可以包括，或者其他的赋值语句或者逻辑代码这里有一个已知的需要注意的点不要在模板中使用单引号，如果必须要使用，请使用转义字符用法创建一个模板对象将模板字符串编译成函数编译之后的模板使用不同的变量进行渲染，渲染的时候需要使用接收输出示例

tplite

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

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

项目地址　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节点初始化组件：

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("{{title}}")

编译之后的模板使用不同的变量进行渲染，渲染的时候需要使用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.

GPU云服务器云服务器前端组件前端组件维护通用前端组件前端组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91837.html

「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0
#yyds干活盘点#Nginx服务器的安装以及配置

摘要：介绍是一个高性能的和反向代理服务器，同时也提供了服务。其将源代码以类许可证的形式发布，因它的稳定性丰富的功能集简单的配置文件和低系统资源的消耗而闻名。是一款轻量级的服务器反向代理服务器及电子邮件代理服务器，在协议下发行。 Nginx介绍Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也...

番茄西红柿 2021-11-24 09:39 评论0 收藏2637
Java Web 前端高性能优化（二）

摘要：在高性能服务器上该配置将非常有用。小结前端高性能优化一二总结了前端性能问题定位以及图片优化的几种方式，将它们归结起来，在读者需要的时候，可以查看本文的内容，相信按照本文的方法，可以辅助读者进行前端性能优化。一.上文回顾上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题（详见Java Web 前端高性能优化（一)）本次我们主要从图像BASE64 编码、GZIP压缩、懒加载与预...

yvonne 2019-08-14 15:08 评论0 收藏0
nginx 在前端领域的应用

摘要：什么是其实就是一个轻量级的服务器，可以很好的处理反向代理和负载均衡可以很好的处理静态资源所以很适合我们前端使用，也很简单。也是阿里系的常用做法适配与移动通过判断，做跳转到的路径和的路径查看端口是否被占用什么是nginx ? 其实就是一个轻量级的服务器，可以很好的处理反向代理和负载均衡；可以很好的处理静态资源；所以很适合我们前端使用，也很简单。我们主要用来做接口转发（以及一些其他事情）...

魏明 2019-07-25 13:56 评论0 收藏0
nginx服务器安装及配置文件详解

摘要：部分设置的指令将影响其它所有部分的设置部分的指令主要用于指定虚拟主机域名和端口的指令用于设置一系列的后端服务器，设置反向代理及后端服务器的负载均衡部分用于匹配网页位置比如，根目录等等。 nginx在工作中已经有好几个环境在使用了，每次都是重新去网上扒博客，各种编译配置，今天自己也整理一份安装文档和nginx.conf配置选项的说明，留作以后参考。像负载均衡配置（包括健康检查）、缓存（包...

mylxsw 2019-07-25 13:30 评论0 收藏0