arttemplate嵌套子模板,属性不存在时,取值bug与解决办法

无可置疑,arttemplate是本人用过的最好用的前端模板引擎。不过随着使用的深入与更加广泛,还是遇到了一些梗。下面将较少一个本人遇到的实际问题,分析方法与采用的解决办法。

一、问题描述

Arttemplate嵌套子模板,属性不存在时,默认值$data取值为当前父级。

<body>
<div id="demo"></div>

<!--
作者:1209461019@qq.com
时间:2017-02-17
描述:主模板
-->
<script type="text/html" id="demo_T">
{{each}}
	<div>姓名:{{$value.name}}</div>
	<div>性别:{{$value.age}}</div>
	<!--
		作者:1209461019@qq.com
		时间:2017-02-17
		描述:嵌套子模板
	-->
	<div>朋友:{{include 'demo_sub_T' $value.friends}}</div>
	<hr /> 
{{/each}}
</script>
<!--
	作者:1209461019@qq.com
	时间:2017-02-17
	描述:子模板
-->
<script type="text/html" id="demo_sub_T">
{{each}}
	<div>朋友姓名:{{$value.name}}</div>
	<div>朋友年龄:{{$value.age}}</div>
{{/each}}
</script>
 继续阅读arttemplate嵌套子模板,属性不存在时,取值bug与解决办法

javascript闭包与匿名自执行函数的演变原理

js的闭包特性,使得js弄出一套稀奇古怪的语法。而对于这些特殊的语法,已经有点js基础的同学看起来还是比较吃力甚至头疼。下面深入浅出的js“匿名自执行函数”的演变过程。啥,你还不知道什么是“匿名自执行函数”?我想(function(){})();这种语法,在各位同学阅读js库源码时多多少少碰见过。对,就是这家伙!

首先,我们看些正常的js函数定义方式:

//常规函数
function normalFun(){
console.log(“normalFun”);
}
normalFun();

//函数变量

var fun = function() {
console.log(“fun”);
};

fun();

以上两种函数定义的方式都有个共同特点:函数有个名字,通过函数名字调用函数。好了,下面奇葩的事就发生了~

继续阅读javascript闭包与匿名自执行函数的演变原理

KindEditor,好用的文本编辑器

KindEditor,一款效果还挺不错的文本编辑器。它的本质还是一个js库,不仅可以由程序员编程时添加到页面中去,官方还提供了它扩展出来的wordpress后台编辑器插件,代替了wordpress自带的简陋的文本编辑器!而且,更加神奇的是,KindEditor还支持代码的高亮显示和行号显示。

//获取提交的表单数据
//方式一获取
/*
*普通方法,通过request对象中的getParameter()方法获取需要的数据
*/
String name = request.getParameter("name");
String age = request.getParameter("age");
String description = request.getParameter("description");
//方法二获取
/*
*通过request对象中的getParameterNames()方法获取输入数据的name属性枚举
*通过遍历枚举获取所有name,并利用getParameter()方法获取对应值
*/
Map<String,String> map = new HashMap<String,String>();
Enumeration names =  request.getParameterNames();
while(names.hasMoreElements()){
	String key = (String)names.nextElement();
	String value = request.getParameter(key);
	map.put(key, value);
}
//方法三获取
/*
*通过request对象中的getParameterMap()方法获取提交数据的map集合,
*不过要注意的是键值对是String:String[]
*/
Map nextMap = request.getParameterMap();//键是String,值是String[]

	
//数据输出
PrintWriter pw = response.getWriter();
//方式一打印
pw.println("name:" + name + "<br />");
pw.println("age:" + age + "<br />");
pw.println("description:" + description + "<br /><hr />");
//方法二打印
Set<Entry<String,String>> set = map.entrySet();
Iterator<Entry<String,String>> it = set.iterator();
while(it.hasNext()){
	Entry<String,String> entry = (Entry<String,String>)it.next();
	String key = entry.getKey();
	String value = entry.getValue();
	pw.println(key + ":" + value + "<br />");
}
pw.println("<hr />");
//方法三遍历
Set<Entry<String,String[]>> nextSet = nextMap.entrySet();
Iterator<Entry<String,String[]>> nextIt = nextSet.iterator();
while(nextIt.hasNext()){
	Entry<String,String[]> entry = (Entry<String,String[]>)nextIt.next();
	String key = entry.getKey();
	String[] value = entry.getValue();
	pw.println(key + ":" + value[0] + "<br />");
}

代码的高亮显示,需要在KindEditor后台(可以在“设置”中找到)勾选启用高亮,并选择喜欢的风格!

至于显示行号,还需要修改此插件的源代码。找到KindEditor的源代码,找到文件/wp-content/plugins/kindeditor-for-wordpress-master/plugins/code/code.js,进行如下设置:

html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';
更改为:
html = '<pre class="prettyprint linenums' + cls + '">\n' + K.escape(code) + '</pre> '

稍后你将看到一个还算说得过去的高亮并显示行号的代码显示窗口~

实现简单的PHP接口,以及使用js/jquery ajax技术调用此接口

本博文主要介绍下如何编写简单的php接口,以及使用js/jquery的ajax技术调用此接口。

Php接口文件(check.php):

<?php
$jsonp_supporter = $_GET[‘callback’];
$p_name=$_GET[‘p_name’];
$result=array(‘err’=>0,’data’=>$p_name);
echo $jsonp_supporter,”(“.json_encode($result).”)”;
?>

Js/jquery通过ajax技术调用接口:

$.get(“http://***/check.php”,{p_name:’ddd’},function(data){
console.log(data.data);
},’jsonp’);

这里使用了query中的get方法与接口进行数据交互。

js实现逻辑色子功能

本文章介绍了使用javascript编写逻辑色子的功能,以及功能检测辅助程序。

思路:使用Math库中的random()方法获取一个[0,1)的随机数,并对这个随机数处理后产生[1,6]的随机整数。检测程序则是对逻辑色子执行1000次,并对结果使用统计:一方面,计算各值分布总和是否为1000——以便检测逻辑色子是否产生意外值;另一方面,可以计算值的分布——预先知道值得分布情况! 继续阅读js实现逻辑色子功能