JavaScript输入邮箱自动提示实例代码

前端技术 2023/09/09 JavaScript

本来想把之前对artTemplate源码解析的注释放上来分享下，不过隔了一年，找不到了，只好把当时分析模板引擎原理后，自己尝试

写下的模板引擎与大家分享下，留个纪念，记得当时还对比了好几个模板引擎来着。

这里所说的js的模板引擎，用的是原生的javascript语法，所以很类似php的原生模板引擎。

 

前端模板引擎的作用？

1. 可以让前端开发更简单，不需要为了生成一个dom结构而使用+运算符去拼接字符串，而只需要一个元素的（里面的html模板），或者一个变量（存储着模板），或者　　一个模板文件

2. 易于维护，减少耦合，假使你的dom结构变化了，不需要更改逻辑代码，而只需要更改对应的模板（文件）

3. 可以缓存，如果你的模板是一个类似.tpl的文件，那么完全可以用浏览器去加载，并且还存下来。说到.tpl文件，可以做的不仅仅是缓存了，你还可以做到通过模块加载器

    将.tpl作为一个模块，那就可以按需加载文件，不是更省宽带，加快页面速度吗？

4. 等等等

 

前端模板引擎的原理？

原理很简单就是 对象（数据）＋ 模板（含有变量） －> 字符串（html）

 

前端模板引擎的如何实现？

通过解析模板，根据词法，将模板转换成一个函数，然后通过调用该函数，并传递对象（数据），输出字符串（html）

（当然，具体的还要看代码的）

就像这样：

复制代码 代码如下:

var tpl = \'i am <%= name%>, <%= age=> years old\'; // <%=xxx>% 词法，标记为变量

var obj = {
    name : \'lovesueee\' ,
    age : 24
};
var fn = Engine.compile(tpl); // 编译成函数

var str = fn(obj);   // 渲染出字符串       

例子：

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
<title>ice demo</title>
<script src=\"/javascripts/jquery/jquery-1.7.2.js\"></script>
<script src=\"/javascripts/ice/ice.js\"></script>
<body>
    <div id=\"content\"></div>
</body>

<script type=\"text/html\" id=\"tpl\">
    <div>here is the render result:</div>
    <%  = this.title() ;%>
    <table border=1>
    <% for(var i=0,tl = this.trs.length,tr;i<tl;i++){  %>
        <%
            tr = this.trs[i];
            if (tr.sex === \"女\") {
        %>
        <tr>
        <td><%= tr.name;; %></td> <td><%= tr.age; %></td> <td><%= tr.sex || \"男\" %></td>
        </tr>
        <% } %>
    <% } %>
    </table>
    <img src=\"<%= this.href %>\">
    <%= this.include(\'tpl2\',this); %>
</script>
<script type=\"text/html\" id=\"tpl2\">
    <div>here is the render result:</div>
    <%  = this.print(\'Welcome to Ice Template\') ;%>
    <table border=1>
    <% for(var i=0,tl = this.trs.length,tr;i<tl;i++){  %>
        <%
            tr = this.trs[i];
            if (tr.sex === \"男\") {
        %>
        <tr>
        <td><%= tr.name;; %></td> <td><%= tr.age; %></td> <td><%= tr.sex || \"男\" %></td>
        </tr>
        <% } %>
    <% } %>
    </table>
    <img src=\"<%= this.href %>\">

</script>
<script>
    var trs = [
        {name:\"隐形杀手\",age:29,sex:\"男\"},
        {name:\"索拉\",age:22,sex:\"男\"},
        {name:\"fesyo\",age:23,sex:\"女\"},
        {name:\"恋妖壶\",age:18,sex:\"男\"},
        {name:\"竜崎\",age:25,sex:\"男\"},
        {name:\"你不懂的\",age:30,sex:\"女\"}
    ]

    // var html = ice(\"tpl\",{
    //     trs: trs,
    //     href: \"http://images.phpstudy.net/type4.jpg\"
    // },{
    //     title: function(){
    //         return \"<p>这是使用视图helper输出的代码片断</p>\"
    //     }
    // });
    var elem = document.getElementById(\'tpl\');
    var tpl = elem.innerHTML;

    var html = ice(tpl,{
        trs: trs,
        href: \"http://images.phpstudy.net/type4.jpg\"
    },{
        title: function(){
            return \"<p>这是使用视图helper输出的代码片断</p>\"
        }
    });
    console.log(html);
    $(\"#content\").html(html);

</script>
</html>

本文地址：https://www.stayed.cn/item/25721

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案