jQuery想必大家都不陌生。作为一个快速、简洁的 JavaScript框架,它封装许多 JavaScript常用的功能代码。jQuery具有许多优秀的特性:比如独特的链式语法和短小清晰的多功能接口,高效灵活的 css选择器等等。
本文通过仿造 jQuery功能来构建一个 js小框架,一来可以让我们能够更好地理解市面上框架的工作原理,二来可以学习下如何将各种对象功能封装成一个框架。
一、实现简单的框架封装
这里我们创建一个名叫 hangge的框架。它只是一个非常简单的雏形,用来演示如何实现框架的定义,以及属性、方法的扩展。
1,框架代码
//框架对象(叫做hangge)
var hangge = function (name) {
this.url = "hangge.com";
this.name = name;
this.info = function () {
console.log('名称:' + this.name + ' 网址:' + this.url);
}
}
//扩展属性
hangge.prototype.country = '中国';
//扩展方法
hangge.prototype.doSomething = function () {
console.log(this.name + ' 在做些什么事情!');
}
2,使用样例//实例化一个对象
var hg = new hangge('航歌');
console.log('--- 调用对象里面的方法 ---');
hg.info();
console.log('--- 调用对象扩展属性和方法 ---');
console.log(hg.country);
hg.doSomething();
运行结果如下:
二、实现一个真正的框架
前面只是一个简单的演示,下面我们正式来构建一个实现 jQuery许多基本功能的框架。
1,框架功能
实现简单的 id选择器
支持链式调用
实现 html方法(支持获取、或设置 html内容)
实现 attr方法(支持获取、或设置元素属性)
实现 ready方法(页面所有 dom对象加载完毕之后才执行)
实现 parent方法(获取父对象)
2,框架代码
//框架对象(叫做hangge)
var hangge = function (select) {
return hangge.prototype.init(select);
}
hangge.prototype = {
//初始化方法
init:function (select) {
this.id_obj = null;
//如果是对象类型,就保存当前对象,然后返回this
if(select !=null && typeof select == "object"){
this.id_obj = select;
return this;
}
//如果是字符串类型,就获取对象,然后返回this
if(select !=null && typeof select == "string" && document.getElementById(select) != null){
this.id_obj = document.getElementById(select);
return this;
}
return this;
},
//判断对象是否为空
isNull:function (n) {
if(n == null){
return true;
}
return false;
},
html:function (v) {
//表示有选择到dom对象
if(!this.isNull(this.id_obj)){
//表示是获取html内容
if(v == undefined){
return this.id_obj.innerHTML;
}else if(v != null){
this.id_obj.innerHTML = v;
}
}else{
return null;
}
},
attr:function (k,v) {
//表示有选择到dom对象
if(!this.isNull(this.id_obj)){
//表示是获取html内容
if(k != null && v == undefined){
return this.id_obj.getAttribute(k);
}else if(k != null && v != null){
this.id_obj.setAttribute(k,v);
}
}else{
return null;
}
},
ready:function (fn) {
document.onreadystatechange=function () {
if(document.readyState =='complete'){
fn();
}
}
},
parent:function () {
//如果对象为空,那么就需要返回空对象
if(this.isNull(this.id_obj)) return god();
//如果不为空就需要返回父对象
return hangge(this.id_obj.parentNode);
}
};
3,使用样例
hangge.com//dom元素加载完毕后执行
hangge().ready(function () {
//获取元素的html内容
console.log(hangge("li1").html());
//设置元素的html内容
hangge("li1").html("条目1的新内容!")
//获取元素的属性
console.log(hangge("li1").attr("date-name"));
//设置元素的属性
hangge("li1").attr("date-name",'my-list-1');
//访问父元素,并使用链式调用
console.log(hangge("li1").parent().parent().html());
//alert(god("abc").parent().parent().attr("date-name"));
//alert(111);
})
- 条目1
- 条目2
- 条目3
运行结果如下: