BlogJava-zx_bing-随笔分类-js

输入框要求用JAVASCRIPT去验证不能超过12个数字或英文或数字英文组合，还要求不能超过6个汉字,还要验证汉字和字母，数字的组合

zx_bing — Fri, 27 Jul 2012 06:06:00 GMT

数据库里面username vachar2(12)

这个输入框要求用JAVASCRIPT去验证不能超过12个数字或英文或数字英文组合，还要求不能超过6个汉字,还要验证汉字和字母，数字的组合

如：用户名1999(就可以)，麦克斯韦1999(就不行)

因为数据库里面要求的长度是12，一个汉字就占两个，但是在页面可以输入12个汉字
请用JAVASCRIPT写出你的解决方案？

Js代码

"Content-Type" content="text/html; charset=utf-8">
输入待测字串: "text" onblur="test(this.value);">

zx_bing 2012-07-27 14:06 发表评论

Ajax 模拟动态列表

zx_bing — Fri, 27 Jul 2012 06:04:00 GMT

three.html

Java代码

"-//W3C//DTD HTML 4.01 Transitional//EN">
index.html
"keywords" content="keyword1,keyword2,keyword3">
"description" content="this is my page">
"content-type" content="text/html; charset=GBK">
select1:
select2:
"button" value="显示select2的值" onclick="alert(select2.value)">

three.jsp

Java代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!
private String fromDB (String valueFromSelect) {
StringBuffer sb = new StringBuffer();
if (valueFromSelect.equals("1")) {
sb.append(" \n");
sb.append(" haha\n");
sb.append(" 哈哈\n");
sb.append(" \n");
sb.append(" \n");
sb.append(" hehe\n");
sb.append(" 呵呵\n");
sb.append(" \n");
} else if (valueFromSelect.equals("2")) {
sb.append(" \n");
sb.append(" heihei\n");
sb.append(" 嘿嘿\n");
sb.append(" \n");
sb.append(" \n");
sb.append(" gaga\n");
sb.append(" 嘎嘎\n");
sb.append(" \n");
sb.append(" \n");
sb.append(" woyun\n");
sb.append(" 我晕\n");
sb.append(" \n");
sb.append(" \n");
sb.append(" 123\n");
sb.append(" 456\n");
sb.append(" \n");
}
return sb.toString();
}
%>
<%
String valueFromSelect = request.getParameter("valueFromSelect");
StringBuffer sb = new StringBuffer();
sb.append("\n");
sb.append("\n");
sb.append(fromDB(valueFromSelect));
sb.append("\n");
response.setHeader("content-type", "text/xml;charset=GBK");
System.out.println(sb);
out.println(sb.toString());
//out.flush();
out.close();
%>

zx_bing 2012-07-27 14:04 发表评论

全选调用的JS函数

zx_bing — Fri, 27 Jul 2012 06:03:00 GMT

Java代码

function selectall()
{
//获取页面上所有的输入元素
var a = document.getElementsByTagName("input");
//如果全选按钮按上
if(document.getElementById("quanxuanbutton").checked == true)
{
//循环是checkbox类型的，就设置为true
for (var i=0; i
{
if (a[i].type == "checkbox")
{
a[i].checked =true;
}
}
}else{ //如果全选按钮没有按上
for (var i=0; i
{
if (a[i].type == "checkbox")
{
a[i].checked =false;
}
}
}
}

zx_bing 2012-07-27 14:03 发表评论

dwr 实现二级联动 js

zx_bing — Fri, 27 Jul 2012 06:02:00 GMT

Java代码

//省市联动
var c_cigy = '';
//记录第二个列表id，以备回调函数用
var cityItemName = '';
function changeCityOyp(province,city,relateItemName) {
ServerDwrUtil.getCityList(province.value,setCityOption);
//记录二级下拉的 id relateItemName 供回调函数使用
cityItemName = relateItemName;
// 中国则二级下拉不能选择
if(province.value == '0001') {
document.getElementById(cityItemName).disabled = true;
} else {
document.getElementById(cityItemName).disabled = false;
}
//省份在一个单元格里，省份前面有个input输入框,得到input对象，再把省份传进去
var provinceInput = province.parentNode.firstChild;
//如果省份为空，则单元格为空
if (province.value == '') {
provinceInput.value = '';
return;
}
provinceInput.value = province.options[province.selectedIndex].text;
}
// 回调函数 args返回的是list.add(Map) map中{id}，经过 spring配置对于一些特例返回的Class，且dwr不能识别的，
//
// 设置二级下拉列表
function setCityOption (args) {
alert(args.toString());
DWRUtil.removeAllOptions(cityItemName);
DWRUtil.addOptions(cityItemName, [ "" ]);
//id和name怎么确保的 args{[id:xxx,name:yyy],[id:xxx,name:yyyy]}
DWRUtil.addOptions(cityItemName, args, "id", "name");
}

zx_bing 2012-07-27 14:02 发表评论

javascript获取select的值全解

zx_bing — Fri, 27 Jul 2012 06:01:00 GMT

Js代码

获取显示的汉字
document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text
获取数据库中的id
window.document.getElementById("bigclass").value
获取select组分配的索引id
window.document.getElementById("bigclass").selectedIndex
例子：
使用
document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text
的结果是：我适宜市哈
使用
window.document.getElementById("bigclass").value
的结果是：4
使用
window.document.getElementById("bigclass").selectedIndex
的结果是：1

zx_bing 2012-07-27 14:01 发表评论

js变量作为URL参数中文乱码解决方法

zx_bing — Fri, 27 Jul 2012 06:00:00 GMT

1--前台页面

Java代码

var uuid = encodeURI(encodeURI(oRecord.getData("uuid")));
var uname =encodeURI(encodeURI(oRecord.getData("uname")));
alert(uuid+"--"+uname);
var updateURL = contextPath+"/yuidemo/userManager.do?method=updateUser?uuid="+uuid+"&uname="+uname;

var uuid = encodeURI(encodeURI(oRecord.getData("uuid")));
			 var uname =encodeURI(encodeURI(oRecord.getData("uname")));
			  alert(uuid+"--"+uname);
			  var updateURL =  contextPath+"/yuidemo/userManager.do?method=updateUser?uuid="+uuid+"&uname="+uname;

2--控制层

Java代码

String uuid = java.net.URLDecoder.decode(request.getParameter("uuid"),"utf-8");

String uuid =  java.net.URLDecoder.decode(request.getParameter("uuid"),"utf-8");

zx_bing 2012-07-27 14:00 发表评论

提高js性能注意事项

zx_bing — Tue, 24 Jul 2012 22:44:00 GMT

一．执行效率
1. DOM
1.1 使用DocumentFragment优化多次append
说明：添加多个dom元素时，先将元素append到DocumentFragment中，最后统一将DocumentFragment添加到页面。
该做法可以减少页面渲染dom元素的次数。经IE和Fx下测试，在append1000个元素时，效率能提高10%-30%，Fx下提升较为明显。

服用前：
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    document.body.appendChild(el);
}

服用后：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

1.2 通过模板元素clone，替代createElement
说明：通过一个模板dom对象cloneNode，效率比直接创建element高。
性能提高不明显，约为10%左右。在低于100个元素create和append操作时，没有优势。

服用前：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

服用后：
var frag = document.createDocumentFragment();
var pEl = document.getElementsByTagName('p')[0];
for (var i = 0; i < 1000; i++) {
    var el = pEl.cloneNode(false);
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

1.3 使用一次innerHTML赋值代替构建dom元素
说明：根据数据构建列表样式的时候，使用设置列表容器innerHTML的方式，比构建dom元素并append到页面中的方式，效率有数量级上的提高。

服用前：
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
    var el = document.createElement('p');
    el.innerHTML = i;
    frag.appendChild(el);
}
document.body.appendChild(frag);

服用后：
var html = [];
for (var i = 0; i < 1000; i++) {
    html.push('' + i + '
');
}
document.body.innerHTML = html.join('');

1.4 使用firstChild和nextSibling代替childNodes遍历dom元素
说明：约能获得30%-50%的性能提高。逆向遍历时使用lastChild和previousSibling。

服用前：
var nodes = element.childNodes;
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i];
……
}

服用后：
var node = element.firstChild;
while (node) {
……
node = node.nextSibling;
}

2. 字符串

2.1 使用Array做为StringBuffer，代替字符串拼接的操作
说明：IE在对字符串拼接的时候，会创建临时的String对象；经测试，在IE下，当拼接的字符串越来越大时，运行效率会急剧下降。Fx和Opera都对字符串拼接操作进行了优化；经测试，在Fx下，使用Array的join方式执行时间约为直接字符串拼接的1.4倍。

服用前：
var now = new Date();
var str = '';
for (var i = 0; i < 10000; i++) {
    str += '123456789123456789';
}
alert(new Date() - now);

服用后：
var now = new Date();
var strBuffer = [];
for (var i = 0; i < 10000; i++) {
    strBuffer.push('123456789123456789');
}
var str = strBuffer.join('');
alert(new Date() - now);

3. 循环语句

3.1 将循环控制量保存到局部变量
说明：对数组和列表对象的遍历时，提前将length保存到局部变量中，避免在循环的每一步重复取值。

服用前：
var list = document.getElementsByTagName('p');
for (var i = 0; i < list.length; i++) {
    ……
}

服用后：
var list = document.getElementsByTagName('p');
for (var i = 0, l = list.length; i < l; i++) {
    ……
}

3.2 顺序无关的遍历时，用while替代for
说明：该方法可以减少局部变量的使用。比起效率优化，更能直接看到的是字符数量的优化。该做法有程序员强迫症的嫌疑。

服用前：
var arr = [1,2,3,4,5,6,7];
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
    sum += arr[i];
}

服用后：
var arr = [1,2,3,4,5,6,7];
var sum = 0, l = arr.length;
while (l--) {
    sum += arr[l];
}

4. 条件分支

4.1 将条件分支，按可能性顺序从高到低排列
说明：可以减少解释器对条件的探测次数。

4.2 在同一条件子的多（>2）条件分支时，使用switch优于if
说明：switch分支选择的效率高于if，在IE下尤为明显。4分支的测试，IE下switch的执行时间约为if的一半。

4.3 使用三目运算符替代条件分支
服用前：
if (a > b) {
num = a;
} else {
num = b;
}

服用后：
num = a > b ? a : b;

5. 定时器

5.1 需要不断执行的时候，优先考虑使用setInterval
说明：setTimeout每一次都会初始化一个定时器。setInterval只会在开始的时候初始化一个定时器

服用前：
var timeoutTimes = 0;
function timeout () {
    timeoutTimes++;
    if (timeoutTimes < 10) {
        setTimeout(timeout, 10);
    }
}
timeout();

服用后：
var intervalTimes = 0;
function interval () {
    intervalTimes++;
    if (intervalTimes >= 10) {
        clearInterval(interv);
    }
}
var interv = setInterval(interval, 10);

5.2 使用function而不是string
说明：如果把字符串作为setTimeout和setInterval的参数，浏览器会先用这个字符串构建一个function。

服用前：
var num = 0;
setTimeout('num++', 10);

服用后：
var num = 0;
function addNum () {
    num++;
}
setTimeout(addNum, 10);

6. 其他

6.1 尽量不使用动态语法元素
说明：eval、Function、execScript等语句会再次使用javascript解析引擎进行解析，需要消耗大量的执行时间。

6.2 重复使用的调用结果，事先保存到局部变量
说明：避免多次取值的调用开销。

服用前：
var h1 = element1.clientHeight + num1;
var h2 = element1.clientHeight + num2;

服用后：
var eleHeight = element1.clientHeight;
var h1 = eleHeight + num1;
var h2 = eleHeight + num2;

6.3 使用直接量
说明：
var a = new Array(param,param,...) -> var a = []
var foo = new Object() -> var foo = {}
var reg = new RegExp() -> var reg = /.../

6.4 避免使用with
说明： with虽然可以缩短代码量，但是会在运行时构造一个新的scope。
OperaDev上还有这样的解释，使用with语句会使得解释器无法在语法解析阶段对代码进行优化。对此说法，无法验证。

服用前：
with (a.b.c.d) {
property1 = 1;
property2 = 2;
}

服用后：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

6.5 巧用||和&&布尔运算符

服用前：
function eventHandler (e) {
if(!e) e = window.event;
}

服用后：
function eventHandler (e) {
e = e || window.event;
}

服用前：
if (myobj) {
doSomething(myobj);
}

服用后：
myobj && doSomething(myobj);

6.6 类型转换
说明：
1).    数字转换成字符串，应用"" + 1，性能上：("" +) > String() > .toString() > new String()；
2).    浮点数转换成整型，不使用parseInt()， parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，建议使用Math.floor()或者Math.round()
3).    对于自定义的对象，推荐显式调用toString()。内部操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String。

二．内存管理

2.1 循环引用
说明：如果循环引用中包含DOM对象或者ActiveX对象，那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前，即使是刷新页面，这部分内存不会被浏览器释放。

简单的循环引用：
var el = document.getElementById('MyElement');
var func = function () {…}
el.func = func;
func.element = el;

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

如：
function init() {
    var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();

init在执行的时候，当前上下文我们叫做context。这个时候，context引用了el，el引用了function，function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用：

1)    置空dom对象

服用前：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
}
init();

服用后：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
el = null;
}
init();

将el置空，context中不包含对dom对象的引用，从而打断循环应用。
如果我们需要将dom对象返回，可以用如下方法：

服用前：
function init() {
    var el = document.getElementById('MyElement');
    el.onclick = function () {……}
    return el;
}
init();

服用后：
function init() {
var el = document.getElementById('MyElement');
el.onclick = function () {……}
try{
return el;
} finally {
    el = null;
}
}
init();

2)    构造新的context
服用前：
function init() {
    var el = document.getElementById('MyElement');
    el.onclick = function () {……}
}
init();

服用后：
function elClickHandler() {……}
function init() {
    var el = document.getElementById('MyElement');
    el.onclick = elClickHandler;
}
init();

把function抽到新的context中，这样，function的context就不包含对el的引用，从而打断循环引用。

2.2 通过javascript创建的dom对象，必须append到页面中
说明：IE下，脚本创建的dom对象，如果没有append到页面中，刷新页面，这部分内存是不会回收的！

示例代码：

    function create () {
        var gc = document.getElementById('GC');
        for (var i = 0; i < 5000 ; i++)
        {
            var el = document.createElement('div');
            el.innerHTML = "test";

            //下面这句可以注释掉，看看浏览器在任务管理器中，点击按钮然后刷新后的内存变化
            gc.appendChild(el);
        }
    }

2.3 释放dom元素占用的内存
说明：
将dom元素的innerHTML设置为空字符串，可以释放其子元素占用的内存。
在rich应用中，用户也许会在一个页面上停留很长时间，可以使用该方法释放积累得越来越多的dom元素使用的内存。

2.4 释放javascript对象
说明：在rich应用中，随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。
对象：obj = null
对象属性：delete obj.myproperty
数组item：使用数组的splice方法释放数组中不用的item

2.5 避免string的隐式装箱
说明：对string的方法调用，比如'xxx'.length，浏览器会进行一个隐式的装箱操作，将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时，采用如下写法：
var myString = new String('Hello World');

zx_bing 2012-07-25 06:44 发表评论

BlogJava-zx_bing-随笔分类-js

输入框要求用JAVASCRIPT去验证不能超过12个数字或英文或数字英文组合，还要求不能超过6个汉字,还要验证汉字和字母，数字的组合

Ajax 模拟动态列表

全选调用的JS函数

dwr 实现二级联动 js

javascript获取select的值全解

js变量作为URL参数 中文乱码解决方法

提高js性能注意事项

js变量作为URL参数中文乱码解决方法