瑞金佬的前端路

在线demo及文档请点击这里查看

Validform v4.0 更新增强以下功能：

• 增加了usePlugin参数，实现调用外部插件；
• 增加showAllError参数，传入该参数可以在提交表单时显示所有错误提示；
• postonce=true时，只有当成功提交后才不能再次提交表单，在提交出错时还可以继续提交表单；
• 修正了实时验证的表单元素会重复触发验证请求的bug；
• 修正$.Showmsg调用报错的bug；
• 点击重置按钮时可以重置表单的错误提示。

主要增强了以下功能：

1，实时验证在后台文件中还可以接收到name参数，改参数值为当前表单元素的name属性值。可以通过该值来判断是哪个文本框请求处理，这样当有多个实时验证请求时可以指定同一个文件处理；

2，callback增强。如果不是ajax方式提交表单传入callback回调，那么表单在全部验证通过后将不会提交，而是执行该回调函数；

3，自定义datatype（可以传入函数或正则），可以增加任何你想要的自定义datatype类型，有两种扩展方式，具体请参考demo页；

4，形如 *6-16 的自定义范围，如内置datatype类型中有 “*6-16” 表示6-16位任意字符，你可以任意更改数字的范围，如这时你指定datatype为“*2-12”将表示2-12位任意字符。这个对自定义的datatype也同样有效，如你扩展了“z2-4”表示2-4位的中文字符，那么你可以用“z2-6”来表示2-6位中文字符；

5，tiptype增强，3.0版开始几乎可以实现你想要的任何信息提示效果，具体使用方法请参考demo页。

另外，在这对各位网友热情的反馈表示衷心的感谢！Validform下一版本将会把重点放在外部组件的扩展上，如网友提出的上传文件的检测、datatype为date时弹出日期控件等。

最近再次啃上了正则，之前一直困惑的问题，今天一看竟然顿悟了！
先看下面的两个正则：

1
2

var reg1=/(a)(?=\1\1\1)\1+/;
var reg2=/(a)((?=\1\1\1)\1)+/;

先补充下小知识：(?=xxxxx)是正向预搜索，即所在缝隙的右侧，必须要满足 xxxxx 这条件才能记录进结果，仅充当附加条件，不影响后面表达式的匹配。

回归正题，reg1与reg2的区别就在于reg2多了一个括号。

reg1比较好理解，就是在字符串中查找字母”a”，找到字母”a”后，这个字母”a”后面要跟着一个或多个”a”字母[\1+]，但是有个附加条件，找到的这个字母”a”右侧至少要有3个”a”字母[(?=\1\1\1)]。

如匹配这个字符串”aaa bbbb aaaaa”，那么reg1只可以匹配到”aaaaa”。

但是reg2怎么理解呢？

看下面一段代码的执行结果：

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">  
document.write('<script type="text/javascript" src="js/test.js"><\/script>');  
document.write('<script type="text/javascript"> ');  
document.write('alert(a+2);');  
document.write('<\/script>');  
</script>  
<script type="text/javascript">  
alert(a+3);
</script>
 
//test.js文件里的内容如下：
var a="a";
alert(a+1);

以上代码在非ie下执行正常，依次弹出a1，a2，a3，
但是在ie下报错了！在执行alert(a+2)时报undefined错误。
难道是ie下外部文件加载有延时以至于test.js还没准备就绪就已经执行到了alert(a+2)？
前面提到“每个script块按顺序先后串行执行”，于是想到以下解决方法：

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">  
document.write('<script type="text/javascript" src="js/test.js"><\/script>');
</script>
<script type="text/javascript">
document.write('<script type="text/javascript"> '); 
document.write('alert(a+2);');  
document.write('<\/script>');
</script> 
<script type="text/javascript">  
alert(a+3);
</script>

ControlJS能做什么：

• 异步加载脚本
• 脚本延迟执行

先看两个示例页面：

没有使用ControlJS的页面 | 使用了ControlJS的页面

ControlJS是怎样工作的？

ControlJS是通过什么方式让页面中的脚本可以无阻塞的下载执行？在上面的使用方法中你可能已经知道了他的运行方式。它是通过修改页面中script标签的相关属性，让浏览器识别不了这是脚本文件，然后在页面中查找type属性为“text/cjs” 的script标签，让这些脚本文件以img(在IE和Opera中)或object(除IE和Opera的其他浏览器中)的方式下载，从而实现了无阻塞，而且，因为这些脚本文件不是通过script标签下载的，它们在下载之后不会立即执行。

默认情况下，ControlJS是在window对象的onload事件里执行的（也可让它在脚本或某dom对象装载完就执行）。页面里的脚本会按它出现的先后顺序执行。外部引入的脚本，一旦它伪装成的图片对象或OBJECT对象下载完成，便会以SCRIPT标签的形式嵌入到页面中去，这样这些脚本就能被解析执行。

注：文章没有完全按google文档原意翻译，翻出来的文字是结合了自己的理解表达的，如有发现错误的地方，感谢指正。原文请参阅：Google文档

怎样尽可能的缩短浏览器上页面渲染的时间，文章从以下几方面着手：

• 写出高效的css代码
• 避免使用css表达式
• 把css文件放在页面顶部
• 指定页面图片的尺寸
• 页面头部标明文档编码

一，写出高效的css代码

首先弄清浏览器解析html代码的过程：构建一个dom树，页面要显示的各元素都会创建到这个dom树当中。每当一个新元素加入到这个dom树当中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。css引擎查找样式表，对每条规则都按从右到左的顺序去匹配。

了解过程后，我们可以看出可以从两方面优化我们的css代码：1，定义的css样式规则条数越少越好，所以赶紧删除css文件中不必要的样式定义；2，优化每条规则的选择符书写方式，尽量让css引擎一看就知道这个规则是否需要应用到当前这个元素上，让引擎少走不必要的弯路。

可以实现滑动、鼠标拖动、滑轮滚动等多种效果！最少仅需传入一个参数：

1
2
3

$(".container").hScrollPane({
	mover:".press"
});

功能介绍：
1、支持滚动内容时的滑动效果；
2、支持鼠标拖动效果及滑轮滚动效果；
3、拖动滚动条时可选择变换样式，实现高仿真滚动条效果；
4、可限定滚动条的最小宽度，默认滚动条宽度适应滚动内容的长短；
5、支持是否显示左右箭头。

PS：接手的项目经常有需要水平滚动条的效果，本想在网上找个比较成熟完善的插件直接套用，发现大都是垂直方向的滚动条插件【推荐jScrollPane】，所以干脆响应毛主席的号召：自己动手，丰衣足食！hScrollPane从最初成型至今已有8个多月，已在许多项目中接受过考验并逐渐完善。今天整理了一下代码正式发布跟各位共享，欢迎反馈您的意见和建议。

Html代码如下：

1
2
3
4
5
6

<div style="line-height:150%;font-size:16px;">
    <div style="font-size:30px;">
          瑞金佬的前端路
          父元素行高为line-height:150%时
    </div>
</div>

发现真理：
父元素的行高为150%或1.5em时，会根据父元素的字体大小先计算出行高值然后再让子元素继承，而1.5是根据子元素的字体大小动态计算出行高值让子元素继承。