`
Kenny.Lee
  • 浏览: 515755 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

分享封装的基于prototype的JavaScript工具类

阅读更多
/*--------------------------------------------------|
| @author KennyLee									|
| @version 2009-8-20								|
| @depend prototype.js Ver 1.6.0.3					|
|--------------------------------------------------*/

//Global defalut variable
var globalTips = {
	textareaMaxLength : 1024
}

// setup validators like: name of validator, default message, /regular
// expression/ !don't forget the / in front and the / in back!!!!
var custom_validators = {
	email : {
		defaultMessage : "This field must contain a valid email address.",
		regExp : /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-\u4e00-\u9fa5])+\.)+([a-zA-Z0-9]{2,4})+$/
	},
	creditcard : {
		defaultMessage : "This field must contain a valid credit card number.",
		regExp : /^((4\d{3})|(5[1-5]\d{2})|(6011))([- ])?\d{4}([- ])?\d{4}([- ])?\d{4}|3[4,7]\d{13}$/
	},
	number : {
		defaultMessage : "This field must have a numerical value.",
		regExp : /^[-]?\d+(\.\d+)?$/
	},
	chinese : {
		defaultMessage : "This field contain Chinese.",
		regExp : /^[\u4e00-\u9fa5]+$/i
	}
}

// Util
var theUtil = {
	changeEmailArray : function(baseArray, type) {
		var result = new Array();
		if ((Object.isArray(baseArray)) && (baseArray.size() > 0)) {
			baseArray.each( function(item) {
				var email = '';
				if (type) {
					if (isEffectiveEmail(item))// push effective E-mail
						email = item;
				} else {
					if (!isEffectiveEmail(item)) // push invalid E-mail
						email = item;
				}
				if (email != '')
					result.push(email);
			})
		}
		return (result.size() > 0) ? result : '';
	},
	// Get checkbox or radio checked elements.
	getCheckedEls : function(elArray) {
		var result = new Array();
		if ((Object.isArray(elArray)) && (elArray.size() > 0)) {
			elArray.each( function(el) {
				if (el.checked) {
					result.push(el);
				}
			})
		}
		return result.size() > 0 ? result : '';
	},
	toggleAllCheckbox : function(checkboxArray, _selected) {
		if ((Object.isArray(checkboxArray)) && (checkboxArray.size() > 0)) {
			checkboxArray.each( function(checkboxEl) {
				checkboxEl.checked = _selected;
			})
		}
	}
}

/**
 * Generate Effective E-mail Array.
 * 
 * @param itemArray
 *            Base Array
 * @return '' if Effective E-mail Array is Empty.
 */
function getEffeEmailArray(itemArray) {
	return theUtil.changeEmailArray(itemArray, true);
}

/**
 * Generate Invalid E-mail Array.
 * 
 * @param itemArray
 *            Base Array
 * @return '' if Invalid E-mail Array is Empty.
 */
function getNotEffeEmailArray(itemArray) {
	return theUtil.changeEmailArray(itemArray, false);
}

// Verify the E-mail Address.
function isEffectiveEmail(emailAddr) {
	return custom_validators['email']['regExp'].test(emailAddr);
}

// Check str if contain chinese
function isContainChinese(str) {
	return custom_validators['chinese']['regExp'].test(str);
}

// Common functions for TEXTAREA
var textareaHelper = Class.create( {
	toString : function() {
		return 'TextareaHelper';
	},
	/**
	 * analyze TEXTAREA's Value to change Array.
	 * <p>
	 * Separators are Enter, Spaces(' ') and Comma(',');
	 * 
	 * @param textareaName
	 * @return Array if success, else return '';
	 */
	analyzeToArray : function(textareaName) {
		var inputText = $(textareaName).value;
		var resultArray = '';
		if (!inputText.blank()) {
			resultArray = $w(inputText.gsub(/\s|\,/, ' '));
		}
		return resultArray;
	},
	// To Restrict the TEXTAREA's Value MaxLength.
	restrictTxtarea : function(textareaName) {
		var testareaEl = $(textareaName);
		var maxLength = globalTips['textareaMaxLength'];
		var currentTotalText = testareaEl.value;
		if (currentTotalText.length > maxLength) {
			var overrideText = currentTotalText.truncate(maxLength, '');
			testareaEl.value = overrideText;
		}
	}
})

// For Checkbox
var checkboxHelper = Class.create( {
	toString : function() {
		return 'CheckboxHelper';
	},
	// Get All Checkbox Elements By Name.
	getAllCheckBox : function(checkboxName) {
		var query = 'input[type="checkbox"][name="' + checkboxName + '"]';
		return $$(query);
	},
	getCheckedCheckbox : function(checkboxName) {
		var checkBoxEls = this.getAllCheckBox(checkboxName);
		return theUtil.getCheckedEls(checkBoxEls);
	},
	// Verify the Checkbox Elements.
	// return true if one of CheckBox Elements by choose
	isNotEmptyCheckBox : function(checkboxName) {
		return this.getCheckedCheckbox(checkboxName) != '';
	},
	// Set TRUE For All Checkbox's selected state.
	selectAllCheckbox : function(checkboxName) {
		var checkboxArr = this.getAllCheckBox(checkboxName);
		theUtil.toggleAllCheckbox(checkboxArr, true);
	},
	// Set FALSE For All Checkbox's selected state.
	clearAllCheckbox : function(checkboxName) {
		var checkboxArr = this.getAllCheckBox(checkboxName);
		theUtil.toggleAllCheckbox(checkboxArr, false);
	},
	// Check was already select all Checkboxes;
	isSelectedAllCheckBox : function(checkboxName) {
		var checkboxArr = this.getAllCheckBox(checkboxName);
		var checkedEls = theUtil.getCheckedEls(checkboxArr);
		return (checkedEls != '') && (checkedEls.size() == checkboxArr.size());
	}
})

// For Radio
var radioHelper = Class.create( {
	toString : function() {
		return 'RadioHelper';
	},
	// Get All Radio Elements by Name.
	getAllRadio : function(radioName) {
		var query = 'input[type="radio"][name="' + radioName + '"]';
		return $$(query);
	},
	getCheckedRadio : function(radioName) {
		var radioEls = this.getAllRadio(radioName);
		return theUtil.getCheckedEls(radioEls)
	},
	// Verify the Radio Elements.
	// return true if one of Radio Elements by choose
	isNotEmptyRadio : function(radioName) {
		return this.getCheckedRadio(radioName) != '';
	}
})

// For Select
var selectHelper = Class.create( {
	toString : function() {
		return 'SelectHelper';
	},
	getSelectedValue : function(selectName) {
		return $F(selectName);
	},
	getSelectedText : function(selectName) {
		var result = '';
		var options = $(selectName);
		$A(options).each( function(option) {
			if (option.selected) {
				result = option.text;
				throw $break;
			}
		})
		return result;
	}
})


有些方法其实有点多此一举,例如return $F()的,但为了有些不懂得prototype的同事也能直观的使用。

主要是select、textarea、checkbox、radio元素的常用方法,还有一些验证e-mail、中文等。
1
0
分享到:
评论

相关推荐

    Javascript Cookie操作类的封装

    接下来,我们来创建一个名为`CookieManager`的JavaScript类,用于封装Cookie的操作。这个类需要包含以下方法: 1. **setCookie**:用于设置Cookie。需要传入键(key)、值(value)以及可选的过期时间(days)和...

    PrototypeJavaScript框架

    总的来说,Prototype JavaScript框架为JavaScript开发者提供了一个强大且易用的工具集,使得在Web开发中实现复杂的交互和动态更新变得更加便捷。它的设计思想和API对后来的许多JavaScript库和框架产生了深远影响,如...

    Advanced JavaScript (closures,prototype,inheritance)

    JavaScript,作为一种广泛应用于Web开发的脚本语言,其高级特性如闭包(closures)、原型(prototype)和继承(inheritance)是理解其精髓的关键。本文将深入探讨这些概念,帮助开发者更好地掌握JavaScript的核心。 ...

    prototype.js javaScript插件

    - **DOM操作**:Prototype.js封装了对DOM元素的操作,比如`Element`类包含了大量的实用方法,如`addClassName`, `removeClassName`, `toggleClassName`等,这些方法使DOM操作变得更加简单。 ### 2. Prototype.js的...

    javascript中类和继承(代码示例+prototype.js)

    通过函数构造器、原型链以及`prototype.js`文件中可能提供的类和继承工具,我们可以创建复杂的对象结构和组织代码。理解并掌握这些概念有助于提升JavaScript编程能力,更好地适应现代Web开发的需求。

    【prototype学习】基于prototype的tree(纯数据驱动OO)

    在JavaScript中,`prototype`用于扩展函数或对象的属性和方法,使得实例可以共享这些属性和方法,从而实现面向对象编程的基本特性,如封装、继承和多态。 首先,理解`prototype`的原理至关重要。每个函数在创建时...

    ES3封装工具

    然而,从"ES3封装工具"的描述来看,这可能与JavaScript的版本转换有关,所以EasySysprep_3.1Final在这里可能不是指传统的系统准备工具,而是JavaScript环境的某种封装,可能包含对ES3语法的支持和优化。 封装在软件...

    js工具类 弹窗

    在JavaScript编程中,工具类(Utility Class)是一种常见的设计模式,它封装了各种常用功能,以便在项目中方便地重复使用。"js工具类 弹窗"是指将弹窗功能作为一个独立的模块来实现,这样的设计可以使弹窗的样式、...

    JavaScript使用prototype原型实现的封装继承多态示例

    在JavaScript中,可以通过函数和prototype实现封装。 1. 原型(prototype):在JavaScript中,每个函数都有一个prototype属性,这个属性是一个对象,其上的所有属性和方法都会被共享到通过该构造函数创建的实例上。...

    js框架prototype 1.6 中文参考手册 天涯浪子

    1. **类与对象**:Prototype框架通过扩展JavaScript的原生对象,引入了类的概念。`Class.create()`方法允许开发者创建新的类,而`extend()`方法则用于继承现有类,实现面向对象编程。 2. **Ajax**:Prototype的核心...

    Prototype_1.4.doc,Prototype_1.5.1.chm 中文版

    1. **Prototype库基础**:Prototype库提供了一系列的JavaScript扩展,包括类、对象、数组、字符串和函数的增强,以及DOM操作、事件处理、Ajax请求等工具。 2. **类与对象**:Prototype通过模拟面向对象编程的概念,...

    JavaScript工具库

    在本例中,提到的"JavaScript工具库"可能是一个自定义的集合,开发者根据自己的需求和经验,从Prototype和jQuery这两个知名库中汲取灵感并进行了一些整合和优化。 Prototype是一个早期流行的JavaScript框架,它的...

    009课-封装Each方法、Css方法及工具类方法.rar

    在本课程"009课-封装Each方法、Css方法及工具类方法"中,我们将深入探讨编程实践中常用的几个重要概念和技术。课程的核心是提高代码的可读性、可维护性和复用性,通过封装一些常见的操作,如迭代(Each方法)、选择...

    prototype1.7.2

    Prototype JavaScript 框架,简称 Prototype,是 JavaScript 语言中一个广泛使用的开源库,它为 Web 开发提供了一系列强大的工具,旨在简化 DOM 操作、事件处理、Ajax 交互以及对象扩展等任务。本文将详细探讨 ...

    prototype中文帮助文档

    总的来说,Prototype.js 是一个强大的JavaScript工具库,它通过丰富的API和优雅的设计,降低了Web开发的复杂性,提高了开发效率。配合其详尽的中文帮助文档,无论是初学者还是经验丰富的开发者,都能从中受益匪浅。

    javascript 封装 继承

    结合“源码”和“工具”的标签,我们可以理解,封装和继承是构建复杂JavaScript应用程序的基础。例如,你可以创建一个工具库,封装各种实用功能,并通过继承机制提供可扩展性,使开发者可以方便地复用和定制代码。...

    prototype 开发应用手册,笔记,prototype.js文件下载

    总结,Prototype.js是JavaScript开发中的一个重要工具,它通过一系列强大的API和设计模式,使得JavaScript的开发更加高效、优雅。通过学习和掌握Prototype,开发者可以更好地驾驭JavaScript,创造出更具交互性的Web...

Global site tag (gtag.js) - Google Analytics