21个值得收藏的Javascript技巧

(空) 作者: xcheng1986 发布于:2014-04-03 阅读(1976) (暂无评论)  

  在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率。   1 Javascript数组转换为CSV格式   首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件。则我们可以使用如下的小技巧,代码如下:
varfruits = ['apple','peaches','oranges','mangoes'];
varstr = fruits.valueOf();
  输出:apple,peaches,oranges,mangoes   其中,valueOf()方法会将Javascript数组转变为逗号隔开的字符串。要注意的是,如果想不使用逗号分割,比如用|号分割,则请使用join方法,如下:
varfruits = ['apple','peaches','oranges','mangoes'];
varstr = fruits.join("|");
  输出: apple|peaches|oranges|mangoes   2 将CSV格式重新转换回Javscript数组   那么如何将一个CSV格式的字符串转变回Javascript数组呢?可以使用split()方法,就可以使用任何指定的字符去分隔,代码如下:
varstr ="apple, peaches, oranges, mangoes";
varfruitsArray = str.split(",");
  输出 fruitsArray[0]: apple   3 根据索引移除数组中的某个元素   假如需要从Javascript数组中移除某个元素,可以使用splice方法,该方法将根据传入参数n,移除数组中移除第n个元素(Javascript数组中从第0位开始计算)。
functionremoveByIndex(arr, index) {
    arr.splice(index, 1);
}
test =newArray();
test[0] ='Apple';
test[1] ='Ball';
test[2] ='Cat';
test[3] ='Dog';
alert("Array before removing elements: "+test);
removeByIndex(test, 2);
alert("Array after removing elements: "+test);
  则最后输出的为Apple,Ball,Dog   4 根据元素的值移除数组元素中的值   下面这个技巧是很实用的,是根据给定的值去删除数组中的元素,代码如下:
	
functionremoveByValue(arr, val) {
    for(vari=0; i
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
}
varsomearray = ["mon","tue","wed","thur"]
removeByValue(somearray,"tue");
//somearray 将会有的元素是 "mon", "wed", "thur"
  当然,更好的方式是使用prototype的方法去实现,如下代码:
	
Array.prototype.removeByValue =function(val) {
    for(vari=0; i
        if(this[i] == val) {
            this.splice(i, 1);
            break;
        }
    }
}
//..
varsomearray = ["mon","tue","wed","thur"]
somearray.removeByValue("tue");
  5 通过字符串指定的方式动态调用某个方法   有的时候,需要在运行时,动态调用某个已经存在的方法,并为其传入参数。这个如何实现呢?下面的代码可以:
varstrFun ="someFunction";//someFunction 为已经定义的方法名
varstrParam ="this is the parameter";//要传入方法的参数
varfn = window[strFun];
 
//调用方法传入参数
fn(strParam);
  6 产生1到N的随机数
	
varrandom = Math.floor(Math.random() * N + 1);
 
//产生1到10之间的随机数
varrandom = Math.floor(Math.random() * 10 + 1);
 
//产生1到100之间的随机数
varrandom = Math.floor(Math.random() * 100 + 1);
  7 捕捉浏览器关闭的事件   我们经常希望在用户关闭浏览器的时候,提示用户要保存尚未保存的东西,则下面的这个Javascript技巧是十分有用的,代码如下:
………
  就是编写onbeforeunload()事件的代码即可   8 检查是否按了回退键   同样,可以检查用户是否按了回退键,代码如下:
window.onbeforeunload =function() {
    return"You work will be lost.";
};
  9 检查表单数据是否改变   有的时候,需要检查用户是否修改了一个表单中的内容,则可以使用下面的技巧, 其中如果修改了表单的内容则返回true,没修改表单的内容则返回false。代码如下:
	
functionformIsDirty(form) {
  for(vari = 0; i < form.elements.length; i++) {
    varelement = form.elements[i];
    vartype = element.type;
    if(type =="checkbox"|| type =="radio") {
      if(element.checked != element.defaultChecked) {
        returntrue;
      }
    }
    elseif(type =="hidden"|| type =="password"||
             type =="text"|| type =="textarea") {
      if(element.value != element.defaultValue) {
        returntrue;
      }
    }
    elseif(type =="select-one"|| type =="select-multiple") {
      for(varj = 0; j < element.options.length; j++) {
        if(element.options[j].selected !=
            element.options[j].defaultSelected) {
          returntrue;
        }
      }
    }
  }
  returnfalse;
}
 
window.onbeforeunload =function(e) {
  e = e || window.event; 
  if(formIsDirty(document.forms["someForm"])) {
    // IE 和 Firefox
    if(e) {
      e.returnValue ="You have unsaved changes.";
    }
    // Safari 浏览器
    return"You have unsaved changes.";
  }
};
  10 完全禁止使用后退键   下面的技巧放在页面中,则可以防止用户点后退键,这在一些情况下是需要的。代码如下:
    onpageshow="if (event.persisted) noBack();"onunload="">
  11 删除用户多选框中选择的项目   下面提供的技巧,是当用户在下拉框多选项目的时候,当点删除的时候,可以一次删除它们,代码如下:
	
functionselectBoxRemove(sourceID) {
   
    //获得listbox的id
    varsrc = document.getElementById(sourceID);
    
    //循环listbox
    for(varcount= src.options.length-1; count >= 0; count--) {
   
         //如果找到要删除的选项,则删除
        if(src.options[count].selected ==true) {
    
                try{
                         src.remove(count,null);
                           
                 }catch(error) {
                           
                         src.remove(count);
                }
        }
    }
}
  12 Listbox中的全选和非全选   如果对于指定的listbox,下面的方法可以根据用户的需要,传入true或false,分别代表是全选listbox中的所有项目还是非全选所有项目,代码如下:
functionlistboxSelectDeselect(listID, isSelect) {
    varlistbox = document.getElementById(listID);
    for(varcount=0; count < listbox.options.length; count++) {
            listbox.options[count].selected = isSelect;
    }
} 
  13 在Listbox中项目的上下移动   下面的代码,给出了在一个listbox中如何上下移动项目
functionlistbox_move(listID, direction) {
   
    varlistbox = document.getElementById(listID);
    varselIndex = listbox.selectedIndex;
   
    if(-1 == selIndex) {
        alert("Please select an option to move.");
        return;
    }
   
    varincrement = -1;
    if(direction =='up')
        increment = -1;
    else
        increment = 1;
   
    if((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length-1)) {
        return;
    }
   
    varselValue = listbox.options[selIndex].value;
    varselText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text
   
    listbox.options[selIndex + increment].value = selValue;
    listbox.options[selIndex + increment].text = selText;
   
    listbox.selectedIndex = selIndex + increment;
}
//..
//..
  
listbox_move('countryList','up');//move up the selected option
listbox_move('countryList','down');//move down the selected option
  14 在两个不同的Listbox中移动项目   如果在两个不同的Listbox中,经常需要在左边的一个Listbox中移动项目到另外一个Listbox中去,下面是相关代码:
	
functionlistbox_moveacross(sourceID, destID) {
    varsrc = document.getElementById(sourceID);
    vardest = document.getElementById(destID);
   
    for(varcount=0; count < src.options.length; count++) {
   
        if(src.options[count].selected ==true) {
                varoption = src.options[count];
   
                varnewOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected =true;
                try{
                         dest.add(newOption,null);//Standard
                         src.remove(count,null);
                 }catch(error) {
                         dest.add(newOption);// IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}
//..
//..
listbox_moveacross('countryList','selectedCountryList');