好久没来啦,最近用artTemplate做了一个公司的官网,下面把项目中用到的一些知识点做个总结

小精豆2016
小精豆2016 发布于 2017-01-09 17:46:38 浏览:1260 类型:原创 - 随笔 分类:类库框架 - 前端模板 二维码: 作者原创 版权保护
artTemplate-3.0 新一代 javascript 模板引擎
性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)
支持运行时调试,可精确定位异常模板所在语句(演示)
对 NodeJS Express 友好支持
安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
支持include语句
可在浏览器端实现按路径加载模板(详情)
支持预编译,可将模板转换成为非常精简的 js 文件
模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
支持所有流行的浏览器   
------------以上是官网上的说明

下面直接贴代码,针对具体代码分析

<script id="sortProList" type="text/html">
			{{each model}}    //循环读取数据
			<div class="pro-content">
				{{if $value.text}}   //如果text存在
				<h3 class="sort-name">{{$value.text}}</h3>  //把数据渲染到页面上
				{{else}} //如果不存在,就不渲染
				{{/if}}
				<ul class="clearfix content-list">
					{{each $value.children}}  //循环children 把children里的数据渲染出来
					<li>
						<a href="product_details.html?id={{$value.id}}">
							<img src="{{$value.phoneimg}}" alt="{{$value.pname}}" />
							<h4>{{$value.pname}}</h4>
						</a>
					</li>
					{{/each}}

				</ul>
			</div>
			{{/each}}
		</script>

jsonp格式好久没来啦,最近用artTemplate做了一个公司的官网,下面把项目中用到的一些知识点做个总结
var sortpro = function(sid) {
				$.ajax({
					url: url + "getproduct?pstatic=" + sid,
					type: "GET",
					dataType: "jsonp",  //jsonp跨域
					jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)  
					success: function(data) {
						if(data != null) {
							var temp = template('sortProList', {     //把数据渲染到id=sortProList的模板里
								model: data
							});

							$('.product-list').html(temp); //把该模板插入到.product-list的元素里

						} else {
							$('.product-list').html("暂时没有要显示的数据");  //如果数据为null,提示用户没有要显示的数据
						}
					},
					error: function(jqXHR) {
						console.log("发生错误" + jqXHR.status); //如果请求发生错误,就打印出错误代码
					}
				});
			}

jsonp后台返回数据配置
HttpServletRequest req;  
 //公共接口类HttpServletRequest继承自ServletRequest。客户端浏览器发出的请求被封装成为一个HttpServletRequest对象。对象包含了所有的信息包括请求的地址,请求的参数,提交的数据,上传的文件客户端的ip甚至客户端操作系统都包含在其内。HttpServletResponse继承了ServletResponse接口,并提供了与Http协议有关的方法,这些方法的主要功能是设置HTTP状态码和管理Cookie
String jsonp=req.getParameter("callback");
return jsonp+"("+HelpJson.returnjson(pro)+")";  //pro为返回的数据
z
给个赞 7 人点赞
收藏 3 人收藏
评论 已有 6 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
fantasy525
fantasy5252017-01-13 16:43:436F
这个方法我也只是看过一些资料,具体没实践过,网上说要么两套代码,服务器端做判断如果是爬虫就输出静态的,如果不是就按一般用户处理,这个需要后天考虑,还有就是听说是淘宝搞出来的用NODE.js当中间层。这个如果你们公司不是搞页面展示型的注重被用户搜索的话那也不用考虑太多seo //@小精豆2016:呃...这个问题还真没有考虑,你有什么好的建议和想法吗 //@fantasy525:你们SEO怎么 处理的?用模板引擎SEO这个方面毕竟是js渲染的,爬虫不识别啊,两套代码?node.js中间件?
举报 支持 (0) 回复 (0)
小精豆2016
小精豆20162017-01-13 12:06:595F
呃...这个问题还真没有考虑,你有什么好的建议和想法吗 //@fantasy525:你们SEO怎么 处理的?用模板引擎SEO这个方面毕竟是js渲染的,爬虫不识别啊,两套代码?node.js中间件?
举报 支持 (0) 回复 (1)
fantasy525
fantasy5252017-01-12 10:01:174F
你们SEO怎么 处理的?用模板引擎SEO这个方面毕竟是js渲染的,爬虫不识别啊,两套代码?node.js中间件?
举报 支持 (0) 回复 (1)
Mr豆花
Mr豆花2017-01-10 12:49:453F
哦哦,好的,谢啦。 //@小精豆2016:这个callback需要在后台接口处进行配置,第三模板的代码就是后台配置的,这个你要给你们程序员说下,让他返回jsonp格式的数据,你给这个代码给他看下,他就明白了 //@Mr豆花:楼主你好,我对这点不是很明白,想请教你个问题。‘ jsonp: "callback" ’这里的callback回掉函数怎么使用啊,我们在这个ajax后面都可以直接调用吗?
举报 支持 (0) 回复 (0)
小精豆2016
小精豆20162017-01-10 10:46:282F
这个callback需要在后台接口处进行配置,第三模板的代码就是后台配置的,这个你要给你们程序员说下,让他返回jsonp格式的数据,你给这个代码给他看下,他就明白了 //@Mr豆花:楼主你好,我对这点不是很明白,想请教你个问题。‘ jsonp: "callback" ’这里的callback回掉函数怎么使用啊,我们在这个ajax后面都可以直接调用吗?
举报 支持 (0) 回复 (1)
Mr豆花
Mr豆花2017-01-10 09:45:031F
楼主你好,我对这点不是很明白,想请教你个问题。‘ jsonp: "callback" ’这里的callback回掉函数怎么使用啊,我们在这个ajax后面都可以直接调用吗?
举报 支持 (0) 回复 (1)
小精豆2016 小精豆2016 作者

作者最新