javascript前端模版实现


<!–markdown–>刚刚修复的小站,界面还未完工,现在发现markdown也跪了。真是悲剧,请大家将就着看吧

远程服务器方式

即从服务端获取模版文本填充到客户端的做法,因为这种做法很容易造成xss漏洞,所以我们还需要花费大力气在前后端做处理,所以不是很推荐。但是,将大量无用的标签存在dom或内存中也是很糟糕的做法,如果你有大量的html标签要处理,不妨试试这种方式。

简单客户端模版

1.注释流
<p><!–more–></p>

注释文本和其他html标记或文本一样是会被记录到dom树里,可以被javascript获取,以下是简单示例。

    &lt;input type=&#39;button&#39; id=&#39;btn_ent&#39; value=&#39;我按&#39; /&gt;

    &lt;div id=&#39;container&#39;&gt;
        &lt;!--&lt;ul&gt;
                &lt;li&gt;吃饭么今天&lt;/li&gt;
                &lt;li&gt;今天只有面唉&lt;/li&gt;
                &lt;li&gt;那怎么办&lt;li&gt;
                &lt;li&gt;我们之间有一个人是食物,我不是&lt;/li&gt;
                &lt;li&gt;我也不是&lt;/li&gt;
                &lt;li&gt;你不是个鬼啊.快点给我变成食物&lt;/li&gt;
                &lt;li&gt;我不要,你去死吧&lt;/li&gt;
                &lt;li&gt;啊~~啊~~ 啊~~ 啊~~~ 啊~~~~&lt;/li&gt;
        &lt;ul&gt;--&gt;
    &lt;/div&gt;
&lt;script&gt;

    document.getElementById(&#39;btn_ent&#39;).onclick=function(){

        var container=document.getElementById(&#39;container&#39;),
            script=document.getElementById(&#39;template&#39;);

        /*
         * 注释大法 
         * 有些浏览器可以通过 container.firstNode.nodeValue直接取出注释= - = 
         * 有些浏览器却不能 = - =
         */    
                container.insertAdjacentHTML(&#39;beforeend&#39;,getTemplate(container));

    }
&lt;/script&gt;

2.自定义script标签流
一般情况下我们的script标签默认是text/javascript类型的,但是同时我们是可以自定义type='jm-tempalte',来返回一段文本,通过这个特性我们可以更简单的获取到我们的模版。以下是简单示例。

    &lt;div id=&#39;container&#39;&gt;

    &lt;/div&gt;

&lt;script type=&#39;text/jm-template&#39; id=&#39;template&#39;&gt;
    &lt;ul&gt;
        &lt;li&gt;吃饭么今天&lt;/li&gt;
        &lt;li&gt;今天只有面唉&lt;/li&gt;
        &lt;li&gt;那怎么办&lt;li&gt;
        &lt;li&gt;我们之间有一个人是食物,我不是&lt;/li&gt;
        &lt;li&gt;我也不是&lt;/li&gt;
        &lt;li&gt;你不是个鬼啊.快点给我变成食物&lt;/li&gt;
        &lt;li&gt;我不要,你去死吧&lt;/li&gt;
        &lt;li&gt;啊~~啊~~ 啊~~ 啊~~~ 啊~~~~&lt;/li&gt;
    &lt;ul&gt;
&lt;/script&gt;
&lt;script&gt;

    document.getElementById(&#39;btn_ent&#39;).onclick=function(){

        var container=document.getElementById(&#39;container&#39;),
            script=document.getElementById(&#39;template&#39;);

        /*
         * script 模版大法
         * script里取出来的文本前面总是会多一个空格,所以要记得去掉
         */
                                    container.insertAdjacentHTML(&#39;beforeend&#39;,script.text.replace(/^s*/,&#39;&#39;));

    }

&lt;/script&gt;

复杂客户端模版

复杂客户端模版一般使用Js类库实现,比如handlebars,比如backbone,又比如underscore。

最后,根据传统,放上完整demo[点我吧]
在线demo稍后上线.