`
石不易
  • 浏览: 8155 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

【JavaScript 封装库】Prototype 原型版发布!

阅读更多
/*
	源码作者: 石不易(Louis Shi)
	联系方式: http://www.shibuyi.net
	===================================================================================
	程序名称: JavaScript 封装库 Prototype 版
	迭代版本: 无
	功能总数: 14 个
	功能介绍: 
		1. 实现代码连缀
		2. id / name / tagName / class 节点获取
		3. class 选择器添加与移除
		4. css 规则添加与移除
		5. 设置与获取元素内部文本
		6. 设置与获取css
		7. 实现 click 事件
*/

// 实例化入口
function $() {
	return new Base();
}

// 封装库构造方法
function Base() {
	this.elements = [];
}

// 获取id元素节点
Base.prototype.getId = function (id) {
	this.elements.push(document.getElementById(id));
	return this;
};

// 获取name元素节点
Base.prototype.getName = function (name, position) {
	if (typeof position != 'undefined') { // 局部
		var nodes = $().getTagName('*', position).elements;
		for (var i = 0; i < nodes.length; i ++) {
			if (nodes[i].getAttribute('name') == name) this.elements.push(nodes[i]);
		}
	} else { // 全局
		var nodes = document.getElementsByName(name);
		for (var i = 0; i < nodes.length; i ++) {
			this.elements.push(nodes[i]);
		}
	}
	return this;
};

// 获取tagName元素节点
Base.prototype.getTagName = function (tagName, position) {
	if (typeof position != 'undefined') { // 局部
		var nodes = $().getId(position).elements[0].getElementsByTagName(tagName);
	} else { // 全局
		var nodes = document.getElementsByTagName(tagName);
	}
	for (var i = 0; i < nodes.length; i ++) {
		this.elements.push(nodes[i]);
	}
	return this;
};

// 获取class元素节点
Base.prototype.getClass = function (className, position) {
	if (typeof position != 'undefined') { // 局部
		var nodes = $().getTagName('*', position).elements;
	} else { // 全局
		var nodes = $().getTagName('*').elements;
	}
	for (var i = 0; i < nodes.length; i ++) {
		if (nodes[i].className == className) this.elements.push(nodes[i]);
	}
	return this;
};

// 获取与设置innerHTML
Base.prototype.html = function (text) {
	if (typeof text != 'undefined') { // 设置
		for (var i = 0; i < this.elements.length; i ++) {
			this.elements[i].innerHTML = text;
		}
	} else { // 获取
		var html = [];
		for (var i = 0; i < this.elements.length; i ++) {
			html.push(this.elements[i].innerHTML);
		}
		return html;
	}
	return this;
};

// 获取与设置CSS
Base.prototype.css = function (cssKey, cssValue) {
	if (typeof cssValue != 'undefined' || cssKey instanceof Array) { // 设置
		for (var i = 0; i < this.elements.length; i ++) {
			if (cssKey instanceof Array) {
				var _cssKye, _cssValue, _css;
				for (var j = 0; j < cssKey.length; j ++) {
					if (cssKey[j].match(/([a-z]+)\s*=\s*([\w#]+)/i) != null) { // ['color=red', 'backgroundColor = green']
						_css = cssKey[j].split(/\s*=\s*/);
						_cssKey = _css[0];
						_cssValue = _css[1];
						this.elements[i].style[_cssKey] = _cssValue;
					}
				}
			} else {
				this.elements[i].style[cssKey] = cssValue;
			}
		}
	} else { // 获取
		var css = [];
		for (var i = 0; i < this.elements.length; i ++) {
			if (typeof window.getComputedStyle != 'undefined') { // W3C
				css.push(window.getComputedStyle(this.elements[i], null)[cssKey]);
			} else if (typeof this.elements[i].currentStyle != 'undefined') { // IE 6/7/8
				css.push(this.elements[i].currentStyle[cssKey]);
			}
		}
		return css;
	}
	return this;
};

// 检测class选择器
Base.prototype.hasClass = function (className) {
	var results = [];
	for (var i = 0; i < this.elements.length; i ++) {
		results.push(!!this.elements[i].className.match(new RegExp('(\\s|^)' + className + '(\\s|$)')));
	}
	return results;
};

// 添加class选择器
Base.prototype.addClass = function (className) {
	var space = '';
	var results = this.hasClass(className);
	for (var i = 0; i < results.length; i ++) {
		if (!results[i]) {
			if (this.elements[i].className != '') space = ' ';
			this.elements[i].className += space + className;
		}
	}
	return this;
};

// 移除class选择器
Base.prototype.removeClass = function (className) {
	var results = this.hasClass(className);
	for (var i = 0; i < results.length; i ++) {
		if (results[i]) this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), '');
	}
	return this;
};

// 添加样式规则Rule
Base.prototype.addRule = function (ruleName, ruleText, index, position) {
	if (typeof index == 'undefined') index = 0;
	if (typeof position == 'undefined') position = 0;
	var sheet = document.styleSheets[index];
	if (typeof sheet != 'undefined') {
		if (typeof sheet.insertRule != 'undefined') { // W3C
			sheet.insertRule(ruleName + ' {' + ruleText + '}', position);
		} else if (sheet.addRule != 'undefined') { // IE 6/7/8
			sheet.addRule(ruleName, ruleText, position);
		}
	}
	return this;
};

// 移除样式规则Rule
Base.prototype.removeRule = function (index, position) {
	if (typeof index == 'undefined') index = 0;
	if (typeof position == 'undefined') position = 0;
	var sheet = document.styleSheets[index];
	if (typeof sheet != 'undefined') {
		if (typeof sheet.deleteRule != 'undefined') { // W3C
			sheet.deleteRule(position);
		} else if (typeof sheet.removeRule != 'undefined') { // IE 6/7/8
			sheet.removeRule(position);
		}
	}
	return this;
};

// 鼠标 click 事件
Base.prototype.click = function (method) {
	if (method instanceof Function) {
		for (var i = 0; i < this.elements.length; i ++) {
			this.elements[i].onclick = method;
		}
	}
	return this;
};

 

关于 Prototype 原型版核心源码与实例演示的获取请移动至官网下载!

 

感谢大家积极评测给予意见!

 

官网地址:http://www.shibuyi.net

 

CNBlogs 博客:http://www.cnblogs.com/shibuyi/

 

CSDN 博客:http://blog.csdn.net/louis_shi/

 

ITeye 博客:http://shibuyi.iteye.com/

 

2
0
分享到:
评论

相关推荐

    Advanced JavaScript (closures,prototype,inheritance)

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

    prototype.js javaScript插件

    **JavaScript原型(Prototype)库详解** JavaScript是一种动态类型的编程语言,其灵活性和强大的对象操作能力使其在Web开发中占据重要地位。"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的...

    prototype最新版(很好用)

    Prototype是JavaScript语言的一个扩展库,它为JavaScript提供了一系列强大的面向对象编程工具,使得开发者能够更加高效、优雅地编写JavaScript代码。这个"prototype最新版(很好用)"的压缩包文件包含了一个名为`...

    prototype(JS类库).rar

    **JavaScript原型库Prototype** Prototype是一个强大的JavaScript类库,它的出现是为了弥补JavaScript在面向对象编程方面的不足,提供了一套丰富的函数和工具,使开发者能够更高效地编写可维护的JavaScript代码。...

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

    `prototype.js`文件可能包含了对JavaScript原型链和继承的进一步封装和扩展。通常,这样的库可能会提供更方便的方式来创建类和实现继承,比如使用类语法糖,以及提供一些额外的功能,如方法重载、私有属性等。 例如...

    PrototypeJavaScript框架

    Prototype JavaScript框架是一个强大的JavaScript库,主要设计用于简化和加速网页应用程序的开发。它引入了许多面向对象编程的概念到JavaScript,使得开发者能够更有效地处理DOM(文档对象模型)操作、事件处理和...

    prototype.js 1.4-1.6[全]

    该库的核心特性是其对JavaScript原型(prototype)机制的深入利用,使得JavaScript对象的继承和扩展更为简洁、高效。在"Prototype.js 1.4-1.6[全]"的压缩包中,包含了这个库从1.4到1.6版本的完整集合,这将为我们...

    prototype.js

    Prototype.js与jQuery、Dojo等其他JavaScript库相比,虽然在某些方面功能可能稍显逊色,但它更注重于提高代码的可读性和可维护性,特别是对于熟悉JavaScript原型机制的开发者来说,Prototype.js的API设计更为直观。...

    编写javascript插件,来扩展已有的JavaScript功能.zip

    在压缩包的文件名中,"1.JavaScript String.prototype 原型 - 何鸿涛 - 博客园.url"可能指向一篇关于String.prototype的详细教程,这部分内容会涵盖JavaScript中如何使用和扩展原型链。了解和熟练掌握原型链对于编写...

    《prototype1.4完全攻略》

    Prototype是JavaScript库的一个轻量级框架,它为JavaScript语言增加了许多实用功能,提升了开发者的生产力,并简化了DOM操作。 Prototype 1.4版本在当时是非常流行的一个版本,它提供了许多关键特性,如对象扩展、...

    prototype.js源码及PDF文档

    《prototype.js源码及PDF文档》是一份宝贵的资源,它包含了一个重要的JavaScript库——Prototype的源代码和相关的PDF文档。Prototype是Web开发中一个广泛使用的开源JavaScript框架,它旨在简化DOM操作,提供强大的...

    javascript 封装 继承

    在JavaScript中,我们通常通过构造函数和原型来实现封装: ```javascript function Person(name, age) { this.name = name; // 公有属性 this.age = age; // 公有属性 } Person.prototype.sayHello = function()...

    Prototype1.6中文版文档chm

    描述同样为"Prototype1.6中文版文档chm",说明这份文档是针对Prototype 1.6的,主要面向中文用户,旨在帮助开发者理解和使用这个JavaScript库。 **Prototype JavaScript库介绍** Prototype是一个强大的JavaScript...

    prototype中文帮助文档

    Prototype.js 是一个广泛使用的JavaScript库,它为JavaScript编程提供了许多实用的功能,极大地简化了DOM操作、事件处理、Ajax交互以及对象扩展等任务。这个压缩包包含的“prototype.js”文件就是Prototype.js的核心...

    prototype1.6.0中文chm文档

    标题"prototype1.6.0中文chm文档"表明这是一个关于Prototype JavaScript库的中文版1.6.0版本的文档,格式为CHM(Microsoft的 Compiled HTML Help),通常用于存放帮助文档或者API参考。 描述中提到"哥爱的就是免费...

    prototype1.7.2

    Prototype 引入了类的概念,通过模拟类继承来扩展 JavaScript 的原型链。`Class.create()` 方法允许开发者创建新的类,而 `Object.extend()` 方法则用于对象属性的继承。 3. **DOM 操作** Prototype 提供了一套...

    prototype从入门到精通

    Prototype是JavaScript库,它扩展了JavaScript的基本对象,提供了强大的面向对象编程功能,使得在JavaScript中进行复杂的编程操作变得更加简单。这个“prototype从入门到精通”的教程涵盖了从基础概念到高级特性的...

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

    Prototype是一个强大的JavaScript库,由Sam Stephenson创建,旨在提升JavaScript的开发效率,提供丰富的类和函数扩展,为JavaScript编程带来面向对象的特性。在本手册中,我们将深入探讨Prototype的核心概念、主要...

    Prototype_upload_edit0815_nojar.rar

    尽管Prototype在JavaScript社区中曾广受欢迎,但随着ES6的发布和jQuery等其他库的崛起,Prototype的使用逐渐减少。然而,理解其设计理念和用法对于深入理解JavaScript的原型机制和面向对象编程仍然具有一定的价值。...

    prototype.js 1.4版开发手册

    《prototype.js 1.4版开发手册》是针对JavaScript开发者的重要参考资料,主要聚焦于Prototype JavaScript框架的1.4版本。Prototype是一个广泛使用的开源JavaScript库,它扩展了JavaScript语言,为Web开发提供了强大...

Global site tag (gtag.js) - Google Analytics