js 模板引擎

221 阅读1分钟
 <div>        <ul class="container">            <script id="temp" type="text/html">                {{each $data item i}}                <li>                    {{item.name}}                    {{if i <2}}                    <i>hot</i>                    {{/if}}                </li>                {{/each}}            </script>                    </ul>    </div>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>    <script src="./artTemplate.js"></script>    <script>        $.get('http://simbajs.com:89/sys/menu', data => {                            let str = data.filter(r => r.pid===0)                console.log(str)                let app = template('temp',str)                $('.container').html(app)               })    </script>

js 模板引擎 可以实现向后端请求数据实现页面的元素的生成  jquery 也可以做到 但代码空缺给同行的的人阅读带来一定难度  模板引擎就可以方便直接将js 代码片段与html相结合 程序员可以根据需求进行更改  而且代码方便易读懂 

上面介绍的是一个简单的列子 通过对数据进行处理  形成一个对象  这样在实际使用过程中方便易使用

let app = template('temp',str)  temp是要加在标签的位置id名 str是经过处理过的数据

$('.container').html(app) 最后一定加在标签里