圣弘建设股份有限公司网站,广州市番禺人才网,做网站 公司,wordpress天气代码转载自 baiduTemplate / artTemplate
JS引擎模板 一、baiduTeplate
模板语法 提供一套模板语法#xff0c;用户可以定义一个模板区块#xff0c;每次根据传入的数据生成对应数据产生的html片段#xff0c;从而渲染不同的界面效果#xff1b; 优点#xff1a;
语法简单…转载自 baiduTemplate / artTemplate
JS引擎模板 一、baiduTeplate
模板语法 提供一套模板语法用户可以定义一个模板区块每次根据传入的数据生成对应数据产生的html片段从而渲染不同的界面效果 优点
语法简单直观学习成本低开发效率低采用JavaScript的原生语法效率较高默认html转义(防止XSS攻击)并且支持包括URL转义等多种转义变量未定义直接输出为空防止页面错乱分隔符可以自定义
用法
1.引入文件使用百度模板时需要引入baiduTemplate.js文件script src./baiduTemplate.js typetext/javascript/script 2.放置模板片段 页面中模块可以放在script标签中设置type为text/html 或 text/template,用 id 标识代码示例script idcontainer1 typetext/html 模板部分 /script 2.或者存放在textarea中一般情况设置其CSS样式display:none来隐藏掉textarea同样用id来标识代码示例textarea idcontainer2 styledisplay:none; 模板部分 /textarea 3.直接定义变量存储模板var tpl 模板内容 3.调用引擎方式 模板数据结构是json可以在本地加载也可以从服务端加载过来 方式1baidu.template(container1,data); // 直接传入id即可 方式2baidu.template(tpl,data); // tpl是传入的模板(String类型),可以是模板的id也可以是一个模板片段的字符串传入模板和对应的数据返回对应的html片段 方式3只传入tpl,这是返回的是一个编译后的函数可以把这个函数缓存下来传入不同的data就可以生成不同的html片段 代码示例 var fun baidu.template(tpl); fun(data); // data 产生的html片段 fun(data1); // data1 产生的html片段
自定义 分隔符
模板的分隔符为%也可以自定义自定义语法如下设置左分隔符baidu.template.LEFT_DELIMITER !;设置右分隔符baidu.template.RIGHT_DELIMITER !模板js语法 % var test function(){//函数体};if(1){}else{};function testFun(){return;};% 数据设置value值时需要使用 var data{title:欢迎使用baiduTemplate,list:[test1:默认支持HTML转义如输出script也可以关掉语法:value 详见API,test2:,test3:,test4:list[5]未定义模板系统会输出空]};二、atrTempalte
模板语法(两个版本可供使用,原生与简洁)
原生语法 原生语法需要引入原生语法版 template-native.js 1.使用 在页面中引用引擎 script src./template-native.js/script 2.表达式 % % 符号包裹起来的语句则为模板的逻辑表达式 对内容编码输出%data% 不编码输出%#data% 编码可以防止数据中含有 HTML 字符串避免引起 XSS 攻击。 3.逻辑 支持js原生语法 a.使用一个typetext/html的script标签存放模板h1%#name%/h1%for(var i 0; ifriends.length;i){%ulli%friends[i]%/li/ul%}%b.渲染模板 var data {name:tom,friends:[{name:cat},{name:jerry},{name:lily}]}var html template(id,data);document.body.innerHTML html;4.模板包含表达式用于嵌套子模板 5.模板不能访问全局对象使用公用方法 template.helper(name,callback)注册公用辅助方法 template.helper($ubb2html, function (content) {// 处理字符串...return content;});模板中使用方式 % $ubb2html(content) %简介用法 简洁语法需要引入简洁语法版 template.js 推荐使用语法简单实用利于读写。 1.使用 在页面中引用引擎 script src./template.js/script 2.表达式 {{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。 条件表达式{{if admin}}padmin/p{{else if code 0}}pmaster/p{{else}}perror!/p{{/if}}遍历表达式 {{each list as value index}}li{{index}} - {{value.user}}/li{{/each}}// 或者 (此方法需要加$符){{each list}}li{{$index}} - {{$value.user}}/li{{/each}}方法
1.template(id, data)根据渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数那么将返回一渲染函数。2.template.compile(source, options) 返回一个渲染参数3.template.helper(name, callback) 返回一个渲染结果(添加辅助方法)4.template.config(name, value); 更改引擎的默认设置
artTemplate 支持nodejs Express
1.安装npm-install art-template2.使用 var template require(art-template); var data {list:[data1,data2]}; var html template(__dirname index/main,data);
Nodejs Express var template require(art-template);template.config(base, );template.config(extname, .html);app.engine(.html, template.__express);app.set(view engine, html);//app.set(views, __dirname /views);运行demonode demo/node-template-express.js
