JAvascriptテンプレートプラグインamaze.js

3131 ワード

要約:
最近プロジェクトを開発する時、非同期インタフェースはフロントエンドのレンダリングデータを必要として、jsのつなぎ合わせはあまりにも低級で、必ずテンプレートプラグインを使います.これまでjQueryベースやjuicerなどのプラグインを使っていたが、今後の会社のプロジェクト上の統一、モバイル側とpc側の統一、メンテナンス性を考慮してテンプレートプラグインamazeを独自に開発した.js.
IE 5+、chromeなどのストリームブラウザをサポートし、forとif構文をサポートし、式をサポートします.
コード:https://github.com/baixuexiyang/amaze
例:
<script src="../src/amaze.js"></script>           
<div id="demo"></div>           
<script id="test" type="text/amaze">           
    <div>   :{{ amaze.name }}</div>           
    <div>  :{{ amaze.sex===1 ? ' ': ' ' }}</div>           
    <div>   :{{ 12/4 }}</div>           
    <ul>           
    {{@ for(var i = 0, _l = amaze.contact.length; i < _l; i++){ }}           
        {{@ if(amaze.contact[i].name === '  ') { }}           
            <li>           
                <span>  :{{ amaze.contact[i].name + '    ' }}</span>           
                <span>  :{{ amaze.contact[i].sex===1 ? ' ': ' ' }}</span>           
            </li>           
        {{@ } else { }}           
            <li>           
                <span>  :{{ amaze.contact[i].name }}</span>           
                <span>  :{{ amaze.contact[i].sex===1 ? ' ': ' ' }}</span>           
            </li>           
        {{@ } }}           
    {{@ } }}           
    </ul>           
</script>           
<script>           
    var data = {           
        name: '  ',           
        sex: 1,           
        contact: [{name: '  ', sex: 1},           
            {name: '  ', sex: 2}]           
    };           
    var temp = document.getElementById('test');           
    amaze.template(temp).render(data, function(html){           
        document.getElementById('demo').innerHTML = html;           
    });           
</script>

注意:
1、テンプレートのtypeは'text/amaze'でなければなりません.
2、テンプレートはjQueryで取得できます.例えばamaze.template($('#temp'))