前端模板引擎 超轻量

;(function(global ,undefined){
    var cache = {}
    var sn = ‘_ret_‘ + new Date().toString(36)
    function etic(tplNode , data){
        var tplId = tplNode.id || (tplNode.id = uuid())

        function  cbk(){
            return data ? cache[tplId].call(data) : cache[tplId]
        }

        if (cache[tplId]) return cbk()

        var tpl = tplNode.innerHTML
        var con = ‘var ‘ + sn + ‘ ="" ;‘
        function tLine(str ){
            return str.replace(/[\r\t\n]/g, " ").replace(/‘/g , "\\‘")
        }

        while (true){
            var sPos = tpl.indexOf(‘<?‘)
            if (-1 == sPos) break
            var ePos = tpl.indexOf(‘?>‘ , sPos + 2)

            var part1 = tpl.slice(0,sPos)
                , f = tpl.slice(sPos + 2 , ePos)
                ,tpl = tpl.slice(ePos + 2)
            var op = f.charAt(0)
            if (part1.length) con += sn + " += ‘" + tLine(part1) + "‘;"
            switch (op){
                case ‘=‘ :
                    f = f.slice(1)
                    con += sn + " += " + f + ";"
                    break
                default:
                    con += f
            }

        }

        tpl.length  && (con += sn + " += ‘" + tLine(tpl) + "‘;")
        con += ‘return ‘ + sn
        try{
            cache[tplId] = new Function("" , con)
            return cbk()
        }catch(e){
            console && console.log(e , tpl)
        }

    }
    global.etic = etic
})(this)

前端模板引擎 超轻量

时间: 2024-07-29 23:39:50

前端模板引擎 超轻量的相关文章

前端模板引擎入门

模板引擎 模板引擎 起到 数据和视图分离的作用, 模板对应视图, 关注如何展示数据, 在模板外头准备的数据, 关注那些数据可以被展示. 后端模板引擎 freemarker 如下介绍,  java后台的模板引擎, freemark介绍,其图能很好标明这种关系. http://freemarker.org/ Apache FreeMarker is a template engine: a Java library to generate text output (HTML web pages, e

前端模板引擎arttemplate,后端模板引擎Nvelocity

It's my first blog 大家好,我叫曾岑,朋友们都叫我包子,今年21岁,湖北人,刚大学毕业,学的.net开发.去年一年,在南京工作了一年,那时候还没有拿到毕业证,找工作也是蛮难的,别人说没毕业证,也没经验,工资只能给个基础工资,不过还好,和几个朋友一起结伴去的,一起租的房子住的.在南京的工作经历就不说那么多了,至少让我看到了编程的这个世界. 今年7月份,辞掉了南京的工作,来到了深圳这个城市,重新开始找工作,运气还算不错,第二天就面试上了,第三天就正式上班了,工资待遇对于我这种新手来

Smarty前端模板引擎 - 我看过的PHP开源框架

Smarty Smarty可以说是我接触PHP这门语言用到的第一个开源框架,当时在Smarty的帮助下,很好地完成了项目的开发,也很好地遵循了MVC的模式.但是到了后来,慢慢地发现,很多人都很熟悉Smarty,但是都不愿意使用它.大概的原因在于:慢. 当初以为Smarty很神奇,到后来发现也是通过PHP来实现的.再到后来别人反映使用Smarty会影响性能,所以也就想深入了解一下它的源代码,看下它是怎么实现的,是不是真的会慢? 其实,Smarty只是用PHP做了一个中间层,来把自定义的一些模板标签

前端模板引擎汇总

1. 本文所指的模板引擎是指用在传统的jquery项目中,所以和  Vue.react 项目本身就没有可比性,模板引擎本身也只是做数据的渲染和简单的逻辑处理,想有其他的功能那就直接用 Vue .react好了 2. 模板引擎就和其他的类库框架一样有很多种,本文只列出适合我自己的或是比较流行的几个 一.hogan.js 1. 语法最简单,只做数据渲染,没有逻辑处理,出自 推特 2. 官网:https://twitter.github.io/hogan.js/      github:https:/

juicer前端模板引擎

Juicer 中文文档:http://www.juicer.name/docs/docs_zh_cn.html官网:http://juicer.name/ 一个Javascript模板引擎的实现和优化(http://www.open-open.com/lib/view/open1335161835655.html)完全剥离html和代码逻辑,便于多人协作和后期的代码维护.市面上众多的模板引擎,诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, n

Mustache.js前端模板引擎初识

目前在看一个项目,在一遍遍撸代码的时候,发现代码里调用了一个Mustache.render()方法. 经过百度后,发现Mustache.js是一套轻量级模板引擎. 所以现在就要仔细学习一下,它是如何工作的. 一般来说mustache在js中的使用方法都是如下: var template = $('#template').html(); Mustache.parse(template);   // optional, speeds up future uses var rendered = Mus

Mustache.js前端模板引擎源码解读【二】

上一篇解读完解析器的代码,这一篇就来解读一下渲染器. 在之前的解读中,解读了parseTemplate如何将模板代码解析为树形结构的tokens数组,按照平时写mustache的习惯,用完parse后,就是直接用 xx.innerHTML = Mustache.render(template , obj),因为此前会先调用parse解析,解析的时候会将解析结果缓存起来,所以当调用render的时候,就会先读缓存,如果缓存里没有相关解析数据,再调用一下parse进行解析. Writer.proto

art template前端模板引擎

偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template('detail', {data: data.data, shstatus: status}); artDialog({ content: '<div id="vorder_detail">' + html + '</div>', lock: true, fixed:

学习前端模板引擎 jade (一)

一.为什么要学习jade? 通常大部分前端开发工作者一开始步入前端开发的时候,都是直接简单的写html页面然后丢给后台开发,后台开发在来嵌入模版. 对于日益庞大的前端页面来说,还是用老的字符串拼接的方法来嵌入html内容已经不适应当下的开发趋势了. 废话不多说,直接切入正题. 二.开始装jade. jade基于nodejs的开发环境,所以我们首先要安装nodejs,nodejs的安装方法其实还是挺复杂的,所以请大家自己去百度或者google,省事可以直接去nodejs的官方网站下载nodejs的