提供几个实用的JS类

Question

前段时间在开发的时候也积累了几个通用的JS类，可以很方便的应用，下面发上来和大家分享一下~~~1）表单AJAX提交
    这个类参考了dojo里的表单提交，提取出来成为一个简单的应用
function Form(){};
Form.prototype = {
/**
 * 对指定的汉字进行编码设置，尤其是在使用prototype.js的时候，如果传递的参数
 * （不是加在URL后面的）中含有中文的话就会报错误。
 */
encode : function(/*string*/str, /*boolean*/multiPart) {
if (typeof(str) != 'string') return null;
var mt = multiPart || false;
return mt == true ? encodeURI(str) : encodeURIComponent(str);
},

/**
 * 对使用encode进行编码的进行解编码
 */
decode : function(/*string*/str, /*boolean*/multiPart) {
if (typeof(str) != 'string') return null;
var mt = multiPart || false;
return mt == true ? decodeURI(str) : decodeURIComponent(str);
}, /**
 * 将指定form节点的所有可提交元素组合成字符串返回
 */
_formValues : function(/*object*/formNode)
{
if ((!formNode) || (!formNode.tagName) || (!formNode.tagName.toLowerCase() == "form")) {
this.alert('请指定一个正确的form节点！');
return null;
}
var values = [];
for (var i = 0; i < formNode.elements.length; i++) {
var elm = formNode.elements[i];
if (!elm || elm.tagName.toLowerCase() == "fieldset" || !this._formFilter(elm)) {
continue;
}
var name = this.encode(elm.name);
var type = elm.type.toLowerCase();
if (type == "select-multiple") {
for (var j = 0; j < elm.options.length; j++) {
if (elm.options[j].selected) {
values.push(name + "=" + this.encode(elm.options[j].value));
}
}
} else {
if (["radio", "checkbox"].include(type)) {
if (elm.checked) {
values.push(name + "=" + this.encode(elm.value));
}
} else {
values.push(name + "=" + this.encode(elm.value));
}
}
}
var inputs = formNode.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type.toLowerCase() == "image" && input.form == formNode && this._formFilter(input)) {
var name = this.encode(input.name);
values.push(name + "=" + this.encode(input.value));
values.push(name + ".x=0");
values.push(name + ".y=0");
}
}
return values.join("&") + "&";
}, /**
 * 表单可提交元素过滤器.
 */
_formFilter : function(/*object*/node) {
var type = (node.type || "").toLowerCase();
return !node.disabled && node.name && !(["file", "submit", "image", "reset", "button"].include(type));
}, /**
 * 向服务器发送请求，并指定处理函数
 */
request : function(/*string*/_url, /*function*/onSuccess, /*string*/paras, /*string*/_method) {
new Ajax.Request(
_url,
{
method : !_method ? 'POST' : _method,
evalScripts : true,
parameters : !paras ? '' : paras,
onComplete : onSuccess
}
);
}, /**
 * 使用form进行表单提交.
 */
formSubmit : function(/*string*/_url, /*function*/onSuccess, /*string*/_formId)
{
var paras = this._formValues($(_formId));
if (paras == null) return;
this.request(_url, onSuccess, paras, 'POST');
}};
2.针对网页中select元素的操作实用类（静态方法）
/**-----------------------------------------------------------------------
 * ------------------------针对select操作的实用Select类-------------------
 * -----------------------------------------------------------------------
 */
function Select(){};
/**
 * 根据指定的JSON对象来生成指定的select的options项（清除原来的options）.
 */
Select.create = function(/*string*/selectId,/*json object*/json) {
Select.clear(selectId);
Select.add(selectId, json);
};
/**
 * 该方法同create,只不过是在原来的基础上进行追加
 */
Select.add = function(/*string*/selectId,/*json object*/json) {
try {
if (!json.options) return;
for (var i = 0; i < json.options.length; i ++) {
Select.addOption(selectId,json.options[i].value,json.options[i].text);
}
} catch (ex) {
base.alert('设置select错误：指定的JSON对象不符合Select对象的解析要求！');
}
};
/**
 * 创建一个options并返回
 */
Select.createOption = function(/*string*/value, /*string*/text) {
var opt = document.createElement('option');
opt.setAttribute('value', value);
opt.innerHTML = text;
return opt;
};
/**
 * 给指定的select添加一个option,并返回当前option对象
 */
Select.addOption = function(/*string*/selectId, /*string*/value, /*string*/text) {
var opt = Select.createOption(value, text);
$(selectId).appendChild(opt);
return opt;
};
/**
 * 获取指定select的当前被选中的options对象，如果为多选且有多个被选中则返回数组.
 */
Select.getSelected = function(/*string*/selectId) {
var slt = $(selectId);
if (!slt) return null;
if (slt.type.toLowerCase() == "select-multiple") {
var len = Select.len(selectId);
var result = [];
for (var i = 0; i < len; i ++) {
if (slt.options[i].selected) result.push(slt.options[i]);
}
return result.length > 1 ? result : (result.length == 0 ? null : result[0]);
} else {
var index = $(selectId).selectedIndex;
return $(selectId).options[index];
}
};
/**
 * 使指定索引位置的option被选中.从0开始.
 */
Select.select = function(/*string*/selectId, /*int*/index) {
var slt = $(selectId);
if (!slt) return false;
for (var i = 0; i < slt.options.length; i ++) {
if (index == i) {
slt.options[i].setAttribute("selected", "selected");
return true;
}
}
return false;
};
/**
 * 选中指定的select的所有option选项，如果支持多选的话
 */
Select.selectAll = function(/*string*/selectId) {
var len = Select.len(selectId);
for (var i = 0; i < len; i ++) Select.select(selectId, i);
};
/**
 * 获取指定select的总的options个数
 */
Select.len = function(/*string*/selectId) {
return $(selectId).options.length;
};
/**
 * 清除select中满足条件的options，如果没有指定处理方法则清除所有options项
 */
Select.clear = function(/*string*/selectId, /*function*/iterator) {
if (typeof(iterator) != 'function') {
$(selectId).length = 0;
} else {
var slt = $(selectId);
for (var i = slt.options.length - 1; i >= 0; i --) {
if (iterator(slt.options[i]) == true) slt.removeChild(slt.options[i]);
}
}
};
/**
 * 复制指定的select的option对象到另外一指定的select对象上.如果指定了处理
 * 函数，那么只有返回true时才会copy.
 * 函数iterator参数：当前处理的option对象、目标select的options数组
 */
Select.copy = function(/*string*/srcSlt, /*string*/targetSlt, /*function*/iterator) {
var s = $(srcSlt), t = $(targetSlt);
for (var i = 0; i < s.options.length; i ++) {
if (typeof(iterator) == 'function') {
if (iterator(s.options[i], $(targetSlt).options) == true) {
t.appendChild(s.options[i].cloneNode(true));
}
} else {
t.appendChild(s.options[i].cloneNode(true));
}
}
};这几个实用类有些用到了prototype.js，使用的时候需要导入~~~~希望对你有帮助：-）
也欢迎一起交流，请访问：http://j2ee.blog.sohu.com

Answer 1

前段时间在开发的时候也积累了几个通用的JS类，可以很方便的应用，下面发上来和大家分享一下~~~1）表单AJAX提交
    这个类参考了dojo里的表单提交，提取出来成为一个简单的应用
function Form(){};
Form.prototype = {
/**
 * 对指定的汉字进行编码设置，尤其是在使用prototype.js的时候，如果传递的参数
 * （不是加在URL后面的）中含有中文的话就会报错误。
 */
encode : function(/*string*/str, /*boolean*/multiPart) {
if (typeof(str) != 'string') return null;
var mt = multiPart || false;
return mt == true ? encodeURI(str) : encodeURIComponent(str);
},

/**
 * 对使用encode进行编码的进行解编码
 */
decode : function(/*string*/str, /*boolean*/multiPart) {
if (typeof(str) != 'string') return null;
var mt = multiPart || false;
return mt == true ? decodeURI(str) : decodeURIComponent(str);
}, /**
 * 将指定form节点的所有可提交元素组合成字符串返回
 */
_formValues : function(/*object*/formNode)
{
if ((!formNode) || (!formNode.tagName) || (!formNode.tagName.toLowerCase() == "form")) {
this.alert('请指定一个正确的form节点！');
return null;
}
var values = [];
for (var i = 0; i < formNode.elements.length; i++) {
var elm = formNode.elements[i];
if (!elm || elm.tagName.toLowerCase() == "fieldset" || !this._formFilter(elm)) {
continue;
}
var name = this.encode(elm.name);
var type = elm.type.toLowerCase();
if (type == "select-multiple") {
for (var j = 0; j < elm.options.length; j++) {
if (elm.options[j].selected) {
values.push(name + "=" + this.encode(elm.options[j].value));
}
}
} else {
if (["radio", "checkbox"].include(type)) {
if (elm.checked) {
values.push(name + "=" + this.encode(elm.value));
}
} else {
values.push(name + "=" + this.encode(elm.value));
}
}
}
var inputs = formNode.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type.toLowerCase() == "image" && input.form == formNode && this._formFilter(input)) {
var name = this.encode(input.name);
values.push(name + "=" + this.encode(input.value));
values.push(name + ".x=0");
values.push(name + ".y=0");
}
}
return values.join("&") + "&";
}, /**
 * 表单可提交元素过滤器.
 */
_formFilter : function(/*object*/node) {
var type = (node.type || "").toLowerCase();
return !node.disabled && node.name && !(["file", "submit", "image", "reset", "button"].include(type));
}, /**
 * 向服务器发送请求，并指定处理函数
 */
request : function(/*string*/_url, /*function*/onSuccess, /*string*/paras, /*string*/_method) {
new Ajax.Request(
_url,
{
method : !_method ? 'POST' : _method,
evalScripts : true,
parameters : !paras ? '' : paras,
onComplete : onSuccess
}
);
}, /**
 * 使用form进行表单提交.
 */
formSubmit : function(/*string*/_url, /*function*/onSuccess, /*string*/_formId)
{
var paras = this._formValues($(_formId));
if (paras == null) return;
this.request(_url, onSuccess, paras, 'POST');
}};
2.针对网页中select元素的操作实用类（静态方法）
/**-----------------------------------------------------------------------
 * ------------------------针对select操作的实用Select类-------------------
 * -----------------------------------------------------------------------
 */
function Select(){};
/**
 * 根据指定的JSON对象来生成指定的select的options项（清除原来的options）.
 */
Select.create = function(/*string*/selectId,/*json object*/json) {
Select.clear(selectId);
Select.add(selectId, json);
};
/**
 * 该方法同create,只不过是在原来的基础上进行追加
 */
Select.add = function(/*string*/selectId,/*json object*/json) {
try {
if (!json.options) return;
for (var i = 0; i < json.options.length; i ++) {
Select.addOption(selectId,json.options[i].value,json.options[i].text);
}
} catch (ex) {
base.alert('设置select错误：指定的JSON对象不符合Select对象的解析要求！');
}
};
/**
 * 创建一个options并返回
 */
Select.createOption = function(/*string*/value, /*string*/text) {
var opt = document.createElement('option');
opt.setAttribute('value', value);
opt.innerHTML = text;
return opt;
};
/**
 * 给指定的select添加一个option,并返回当前option对象
 */
Select.addOption = function(/*string*/selectId, /*string*/value, /*string*/text) {
var opt = Select.createOption(value, text);
$(selectId).appendChild(opt);
return opt;
};
/**
 * 获取指定select的当前被选中的options对象，如果为多选且有多个被选中则返回数组.
 */
Select.getSelected = function(/*string*/selectId) {
var slt = $(selectId);
if (!slt) return null;
if (slt.type.toLowerCase() == "select-multiple") {
var len = Select.len(selectId);
var result = [];
for (var i = 0; i < len; i ++) {
if (slt.options[i].selected) result.push(slt.options[i]);
}
return result.length > 1 ? result : (result.length == 0 ? null : result[0]);
} else {
var index = $(selectId).selectedIndex;
return $(selectId).options[index];
}
};
/**
 * 使指定索引位置的option被选中.从0开始.
 */
Select.select = function(/*string*/selectId, /*int*/index) {
var slt = $(selectId);
if (!slt) return false;
for (var i = 0; i < slt.options.length; i ++) {
if (index == i) {
slt.options[i].setAttribute("selected", "selected");
return true;
}
}
return false;
};
/**
 * 选中指定的select的所有option选项，如果支持多选的话
 */
Select.selectAll = function(/*string*/selectId) {
var len = Select.len(selectId);
for (var i = 0; i < len; i ++) Select.select(selectId, i);
};
/**
 * 获取指定select的总的options个数
 */
Select.len = function(/*string*/selectId) {
return $(selectId).options.length;
};
/**
 * 清除select中满足条件的options，如果没有指定处理方法则清除所有options项
 */
Select.clear = function(/*string*/selectId, /*function*/iterator) {
if (typeof(iterator) != 'function') {
$(selectId).length = 0;
} else {
var slt = $(selectId);
for (var i = slt.options.length - 1; i >= 0; i --) {
if (iterator(slt.options[i]) == true) slt.removeChild(slt.options[i]);
}
}
};
/**
 * 复制指定的select的option对象到另外一指定的select对象上.如果指定了处理
 * 函数，那么只有返回true时才会copy.
 * 函数iterator参数：当前处理的option对象、目标select的options数组
 */
Select.copy = function(/*string*/srcSlt, /*string*/targetSlt, /*function*/iterator) {
var s = $(srcSlt), t = $(targetSlt);
for (var i = 0; i < s.options.length; i ++) {
if (typeof(iterator) == 'function') {
if (iterator(s.options[i], $(targetSlt).options) == true) {
t.appendChild(s.options[i].cloneNode(true));
}
} else {
t.appendChild(s.options[i].cloneNode(true));
}
}
};这几个实用类有些用到了prototype.js，使用的时候需要导入~~~~希望对你有帮助：-）
也欢迎一起交流，请访问：http://j2ee.blog.sohu.com

Answer 2

再有三个，分别是密码强度校验、高两度显示元素、动态JS加载
/**-----------------------------------------------------------------------
 * ----------------------------密码强度检测类-----------------------------
 * -----------------------------------------------------------------------
 */
function Password() {};
Password.check = function(/*string*/pwd, /*string*/tipsDivId) {
var id = Password.getResult(pwd);
var msg = ["密码过短", "密码强度差", "密码强度良好", "密码强度高"];
var sty = [-45, -30, -15, 0];
var col = ["#999999", "#66CC00"];
var sWidth = 300, sHeight = 15;
   var Bobj = $(tipsDivId);
   if (!Bobj) return;
  
   with (Bobj) {
   style.fontSize = "12px";
   style.width = sWidth + "px";
   style.height = sHeight + "px";
   style.lineHeight = sHeight + "px";
}
var html = "";
for (var i = 0; i < msg.length; i ++) {
var bg_color = (i <= id) ? col[1] : col[0];
html += "<span style='width:30px;background-color=" + bg_color + ";'>&nbsp;&nbsp;&nbsp;</span>";
}
Bobj.innerHTML = html;
Bobj.title = msg[id];
};
Password.getResult = function(/*string*/pwd) {
if (pwd.length < 6) return 0;
var ls = 0;
   if (pwd.match(/[a-z]/ig)) ls++;
if (pwd.match(/[0-9]/ig)) ls++;
if (pwd.match(/(.[^a-z0-9])/ig)) ls++;
if (pwd.length < 6 && ls > 0) ls--;
   return ls;
};/**-----------------------------------------------------------------------
 * ----------------------------高亮度指定的元素---------------------------
 * -----------------------------------------------------------------------
 */
function HighLight() {};
HighLight.options = {
id : null,
className : null,
interval : 255,
times : 3000
};
HighLight.prototype = {
exe : function(/*object*/options) {
var _options = {};
if (typeof(options) == 'object') {
_options.id = options.id || HighLight.options.id;
_options.className = options.className || HighLight.options.className;
_options.interval = options.interval || HighLight.options.interval;
_options.times = options.times || HighLight.options.times;
}
if (_options.id == null || !$(_options.id)) {
base.alert('必须指定要高亮度显示的元素ID！');
return false;
} else if (!_options.className || typeof(_options.className) != 'string' || _options.className.strip() == '') {
base.alert('请指定高亮度显示的CSS名称！');
return false;
}
var elt = $(_options.id);
if (elt.highLightHandle != null) return;
elt.highLightHandle = setInterval(function() {
Element.toggleClassName(elt, _options.className);
}, _options.interval);
window.setTimeout(function() {
clearInterval(elt.highLightHandle);
Element.removeClassName(_options.className);
elt.removeAttribute('highLightHandle');
}, _options.times);
return true;
}
};/**-----------------------------------------------------------------------
 * ----------------------------Js动态加载类-------------------------------
 * ---注意使用时必须保证被加载的JS文件是使用UTF-8保存，否则会出现中文乱码！
 * -----------------------------------------------------------------------
 */
function JsLoader() {};
JsLoader.loaded = [];
JsLoader.prototype = {
_path : null, // 要加载的JS的路径
_head : null, // 文档对象的head头对象
/**
 * 主要调用方法.
 */
require : function(/*String*/jsPath, /*function*/callback) {
if (!this._check(jsPath)) return false;
if (this._isload(jsPath)) return true;
this._ajaxLoad(callback);
return true;
},
load : function(/*String*/jsPath, /*function*/callback) {
return this.require(jsPath, callback);
},
_check : function(jsPath) {
if (!jsPath) {
base.alert('请指定要加载的JS路径！');return false;
}
var head = document.getElementsByTagName('head');
        if (!head || head.length < 1) {
         base.alert('文档对象document必须有HEAD头！');return false;
        }
this._path = jsPath;
        this._head = head[0];
return true;
},
_isload : function(jsPath) {
for (var i = 0; i < JsLoader.loaded.length; i ++) {
if (JsLoader.loaded[i].toLowerCase() == jsPath.toLowerCase()) return true;
}
JsLoader.loaded[JsLoader.loaded.length] = jsPath;
return false;
},
_ajaxLoad : function(callback) {
var head = this._head;
base.request(this._path, function(xmlHttp, error) {
var script = document.createElement('script');
script.type = "text/javascript";
         script.text = xmlHttp.responseText;
         head.appendChild(script);
         if (!callback) return;
         try {
         if (typeof(callback) == 'function')  callback();
         else eval(callback);
         } catch (ex) {base.alert(ex.message);};
});
}
};
嘿嘿，用的好大家要发话哦~~~