javascript 验证表单提交的数据...-jQuery笔记-jQuery筛选器children()...-JS特性性能缺陷及JIT的解决方案

当前位置: 编程技术>WEB前端

本页文章导读:

▪javascript 验证表单提交的数据库 1：博客说明: 此文章主要结合上一篇文章消息统一管理功能写一个公共的js验证方法,从而对用户提交的表单数据进行验证验证包括：字符串长度电话号.........

▪jQuery笔记-jQuery筛选器children()详解作者：老默 http://senir.blog.163.com (转载请注明出处）jQuery入门简介-老默 jQuery的选择包含两种，一种是选择器，一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。children()是一.........

▪JS特性性能缺陷及JIT的解决方案拜读了David的《Know Your Engines: How to Make Your JavaScript Fast》，David是Mozilla的JS引擎工程师，文章主要介绍了JIT与GC原理，以及如何根据某些基本原理，优化js代码的.........

[1]javascript 验证表单提交的数据库

来源: 发布时间: 2013-11-06

1：博客说明: 此文章主要结合上一篇文章消息统一管理功能写一个公共的js验证方法,从而对用户提交的表单数据进行验证

验证包括：字符串长度电话号码传真邮箱是否为数字等

1 /**
2 * ①IsEmpty 判断字符串是否为空 IsEmpty("chengminglian");
3 * ②IsEmail 判断字符串是否为合法邮件地址 IsEmail("yuansiyong223@126.com",false);
4 * ③IsUrl 判断字符串是否为合法URL地址 IsUrl("yuansiyong223@126.com",false);
5 * ④IsPhone 正则表达式电话的验证 IsPhone("02925366958",false);
6 * ⑤IsAllowLength 判断字符串长度是否在给定长度范围内 IsAllowLength("testlength",20);
7 * ⑥IsPostNo 判断字符串是否为邮政编码 IsPostNo("131121",true);
8 * ⑦IsFaxNo 判断字符串是否为传真 IsFaxNo("710075",true);
9 * ⑧IsNumber 判断字符串是否为数字 IsNumber("123",false);
10 * ⑨IsEqual 判断两个字符串是否相等 IsEqual("123","456");
11 * ValidateCheck 统一表单验证方法 ValidateCheck("teststr",false,20,allowType.Default,replaceChar);
12 */
13 var CommonValidator ={
14 allowType: {
15 Default: "",
16 Email: "Email",
17 Url: "Url",
18 Phone: "Phone",
19 PostNo: "PostNo",
20 FaxNo: "FaxNo ",
21 Number: 'Number',
22 IsSignNumber: 'SignNumber'
23 },
24 /**
25 　　　　* 判断字符串是否为空
26 　　　　* @参数： {str} 验证对象
27 * @return：true：验证成功 true：验证失败
28 　　　　*/
29 IsEmpty: function (str) {
30 if (str.length == 0) {
31 return false;
32 }
33 return true;
34 },
35 /**
36 　　　　* 判断字符串是否为合法邮件地址
37 　　　　* @参数： {str} 验证对象
38 * @参数： {allowNull} 是否允许为空
39 　　　　* @return：消息
40 　　　　*/
41 IsEmail: function (str, allowNull) {
42 if (str.length == 0) return allowNull;
43 var myReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
44 if (myReg.test(str) == false) {
45 return false;
46 }
47 return true;
48 },
49 /**
50 　　　　* 判断url是否为正确的URl地址
51 　　　　* @参数： {str} 验证对象
52 * @参数： {allowNull} 是否允许为空
53 　　　　* @return：消息
54 　　　　*/
55 IsUrl: function (str, allowNull) {
56 if (str.length == 0) return allowNull;
57 var myReg = "^((https|http|ftp|rtsp|mms)://)?[a-z0-9A-Z]{3}\.[a-z0-9A-Z][a-z0-9A-Z]{0,61}?[a-z0-9A-Z]\.com|net|cn|cc (:s[0-9]{1-4})?/$";
58 var tempReg = new RegExp(myReg);
59 if (tempReg.test(str) == false) {
60 return false;
61 } else {
62 return true;
63 }
64 },
65 /**
66 　　　　* 正则表达式电

[2]jQuery笔记-jQuery筛选器children()详解

来源: 发布时间: 2013-11-06

作者：老默 http://senir.blog.163.com (转载请注明出处）

jQuery入门简介-老默

jQuery的选择包含两种，一种是选择器，一种是筛选器。筛选器是对选择器选定的jQuery对象做进一步选择。

children()是一个筛选器，顾名思义就是筛选孩子，筛选那些符合条件的孩子。

完整的格式如下：

.children(expr)

其中children是筛选器的名称，expr是表达式，所有选择器中的表达式都可以用在这，比如按标签名"div",按类名".class",按序号":first"等等，如果表达式为空，那么返回的是所有的孩子，返回的结果仍为jQuery对象。例如：

<body>
<div id="main">
<div id="like" >
<h2>猜你喜欢</h2>
<ul>
<li>海飞丝洗头膏</li>
<li>六神花露水</li>
<li>舒肤佳香皂</li>
<li>心相印纸巾</li>
<li>哇哈哈矿泉水</li>
<li>王老吉</li>
</ul>
</div>
<div id="hot" >
<h2>热门推荐</h2>
<ul>
<li>融氏橄榄油</li>
<li>帮宝适纸尿裤</li>
<li>有机大米</li>
<li>妙洁垃圾袋</li>
<li>优乐美奶茶</li>
<li>亲亲果冻</li>
</ul>
</div>
<div id="inner"></div>
</div>
</body>

1 <script type="text/javascript" language="javascript">
2 //此处为jQuery代码
3 </script>

需求1：把所有div的孩子的字体颜色变为红色

$("div").children().css("color","red");//所有的文字都变成了红色

需求2：把所有的div的孩子中是h2标签的字体颜色变为红色

$("div").children("h2").css("color","red");//所有h2标题的文字都变成了红色

需求3：把所有div的孩子中是li标签的字体颜色变为红色

$("div").children("li").css("color","red");//失败！

为什么不成功呢？因为children只能找孩子，找不到孙子辈的，而div的孩子是h2和ul，所以找不到li；

那么要想通过children找到li，只有先选定li的父亲ul

$("div ul").children("li").css("color","red");//所有li的文字都变成了红色

$("div ul")是一个联级选择器，意思是选择div下面的ul，这里不详细解释。

需求4：把ul的第二个孩子的字体颜色变为红色

[3]JS特性性能缺陷及JIT的解决方案

来源: 发布时间: 2013-11-06

拜读了David的《Know Your Engines: How to Make Your JavaScript Fast》，David是Mozilla的JS引擎工程师，文章主要介绍了JIT与GC原理，以及如何根据某些基本原理，优化js代码的执行效率，虽然是老文了，但对我来说仍受益匪浅。这里，我根据上文整理了本文，同时，大家也可以从侧面了解下JIT。

近5年来，在主流浏览器上，Javascript的运行速度有10-100倍的提升，这要归功于Javascript新引擎JIT。但在深入了解JIT前，我们先看看Javascript的一个最重要的特性：untyped（无类型）。

一. 无类型：

Javascript是个无类型的语言，这导致了 x = y +ｚ这种表达式，可以有很多含义。比如：

（1）y，z是数字，则+表示加法。

（2）y，z是字符串，则+表示字符串连接。

……

而JS引擎内部则使用“细粒度”的类型，比如：32-bit* integer, 64-bit* floating-point，如图：

这就要求js类型-js引擎类型，需要做“boxed/unboxed（装箱/解箱）”，在处理一次x = y + z这种计算，需要经过的步骤如下：

（1）从内存，读取 x = y + z的操作符。

（2）从内存，读取 y，z。

（3）检查y，z类型，确定操作的行为。

（4）unbox y，z。

（5）执行操作符的行为（唯一有效的步骤……）。

（6）box x。

（7）把x写入内存。

只有（5）是真正有效的操作，其他都是为（5）做准备/收尾的，效率之低可见。javascript的untyped特性很好用，但也为此付出了很大的性能代价。

二. 对象属性

function f(obj) {
return obj.a + 1;
}

在Js里，对象属性的访问是比较慢的。至于原因，要从Javascript对象存储说起，这里借用其他文章的一个图：

如上图，访问对象属性，需要先从本地变量表找到对象，然后遍历属性，如果在本对象的属性列表里没找到，再得从prototype里面一层层的找。不能直接索引，只能遍历，这就慢的原因。

二. 2006版-Javascript引擎

这版引擎在执行x = y + z时，就是执行了以上流程。它模块图如下：

三. 2011新版-Javascript引擎

模块图如下：

可以看到，除了老版的解析器外，新引擎增加了JIT，以及Type-specializing JIT。

1. JIT

先看看JIT对untyped的优化，在JIT下，执行x = y + z流程：

（1）从内存，读取 x = y + z的操作符。

（2）从内存，读取 y，z。

（3）检查y，z类型，确定操作的行为。

（4）unbox y，z。

（5）执行操作符的行为（唯一有效的步骤……）。

（6）box x。

（7）把x写入内存。

其中，（1），（2） CPU帮我们搞定；（7）JIT把结果保存在寄存器里。

但可惜不是所有情况都能使用JIT，上面看到，Front-end有3条分支，“一般的情况”可以走JIT分支，比如：number + number；string + string …，但特殊情况，比如：number + undefined就不行了，只能走旧解析器。

除了针对untyped的优化，新引擎还对“对象属性”访问做了优化，解决方案叫：inline caching，俗称：IC。简单的说，就是做cache。优化流程直接看图：

这个相当于遍历cache list了，如果当list很大时，这种方案反而影响效率。下图是评测：

2. Type-specializing JIT

从名称上可以猜到，这个引擎是处理typed类型（声明类型）变量的。厄……但Javascript都是untype类型的……

Type-specializing JIT的解决方案是：

（1）先通过扫描，监测类型。

（2）通过编译优化（当然，他的优化对象不仅仅只是“类型”，还包括对JS代码的优化，但类型优化是核心的。），生成类型变量。

（3）再做后续计算。

来看看Type-specializing JIT的执行x = y + z流程吧：

（1）从内存，读取 x = y + z的操作符。

（2）从内存，读取 y，z。

（3）检查y，z类型，确定操作的行为。

（4）unbox y，z。

（5）执行操作符的行为。

（6）box x。

（7）把x写入内存。

高效的优化啊……当然，这也是有代价的，代价就是：前置的扫描类型，编译优化