轻量级模拟jQuery框架封装更新版本
本文学习jQuery源码，封装了each、map、toArray、get以及，一些基本DOM操作方法
(function (window) {
var arr = [];
var push = arr.push;
var slice = arr.slice;
function MHQ(selector) {
return new MHQ.fn.init(selector);
}
MHQ.fn = MHQ.prototype = {
constructor: MHQ,
length: 0,
init: function (selector) {
// 判断选择器类型
if (!selector) return this;
if (typeof selector === "string") {
if (selector.charAt(0) === "<") {
push.apply(this, parseHTML(selector));
return this;
} else {
push.apply(this, document.querySelectorAll(selector));
return this;
}
}
if (typeof selector === "function") {
}
if (selector.nodeType) {
this[0] = selector;
this.length = 1;
return this;
}
if (selector.constructor.name === MHQ) {
return selector;
}
if (selector.length >= 0) {
push.apply(this, selector);
} else {
this[0] = selector;
this.length = 1;
}
}
};
MHQ.fn.init.prototype = MHQ.fn;
MHQ.extend = MHQ.fn.extend = function (obj) {
var k;
for (k in obj) {
this[k] = obj[k];
}
};
MHQ.fn.extend({
each: function (callback) {
return MHQ.each(this, callback);
},
map: function (callback) {
return MHQ.map(this, callback);
}
});
MHQ.extend({
each: function (obj, callback) {
var i,
len = obj.length,
isArray = len >= 0;
if (isArray) {
for (i = 0;
i < len;
i++) {
if (callback.call(obj[i], i, obj[i]) === false) break;
}
} else {
for (i in obj) {
if (callback.call(obj[i], i, obj[i]) === false) break;
}
}
return obj;
},
map: function (obj, callback) {
var i,
len = obj.length,
isArray = len >= 0,
result,
ret = [];
if (isArray) {
for (i = 0;
i < len;
i++) {
result = callback(obj[i], i);
if (result != null) {
ret.push(result);
}
}
} else {
for (i in obj) {
result = callback(obj[i], i);
if (result != null) {
ret.push(result);
}
}
}
return ret;
},
next: function ( dom ) {
var node = dom;
while( node = node.nextSibling ) {
if ( node.nodeType === 1 ) {
return node;
}
}
return null;
}
});
function parseHTML(htmlStr) {
var div = document.createElement("div"),
i = 0,
nodeArr = [];
div.innerHTML = htmlStr;
for (;
i < div.childNodes.length;
i++) {
nodeArr.push(div.childNodes[i]);
}
return nodeArr;
}
MHQ.fn.extend({
toArray: function () {
return slice.call(this);
},
get: function (index) {
if (index === undefined) {
return this.toArray();
} else {
return this[index > 0 ? index : this.length + index];
}
}
});
// DOM元素操作
MHQ.fn.extend({
appendTo: function (selector) {
var i,
j,
tmpObj,
ret = [],
destinationObj = MHQ(selector);
for (i = 0;
i < this.length;
i++) {
for (j = 0;
j < destinationObj.length;
j++) {
tmpObj = j === destinationObj.length - 1 ? this[i] : this[i].cloneNode(true);
ret.push(tmpObj);
destinationObj[j].appendChild(tmpObj);
}
}
return this.pushStack(ret);
},
prependTo: function (selector) {
// 将 this[i] 加入到 selector[j] 中, 链会破坏
// MHQ( selector ).prepend( this );
var tmpObj, ret = [],
i, j,
destinationObj = MHQ(selector);
for (i = 0;
i < this.length;
i++) {
for (j = 0;
j < destinationObj.length;
j++) {
tmpObj = j === destinationObj.length - 1 ? this[i] : this[i].cloneNode(true);
ret.push(tmpObj);
destinationObj[j].insertBefore(tmpObj, destinationObj[j].firstChild);
}
}
return this.pushStack(ret);
},
prepend: function (selector) {
MHQ(selector).appendTo(this);
return this;
},
append: function (selector) {
// 将 selector[j] 加到 this[i] 中
// 不会造成链破坏
MHQ(selector).appendTo(this);
return this;
},
next: function () {
/*
var ret = [];
this.each(function () {
ret.push( this.nextElementSibling );
});
return this.pushStack( ret );
*/
return this.pushStack(
this.map(function (v) {
return v.nextElementSibling;
}));
},
remove: function () {
this.each(function () {
this.parentNode.removeChild(this);
});
}
});
// 恢复链
MHQ.fn.extend({
end: function () {
return this.prevObj || this;
},
pushStack: function (array) {
var newObj = MHQ(array);
newObj.prevObj = this;
return newObj;
}
});
window.MHQ = window.M = MHQ;
})(window);
【轻量级模拟jQuery框架封装更新版本】博客原文地址：
http://www.cnblogs.com/hongqin/
推荐阅读
- lyd的进化论00
- android模拟实现航拍遥控
- jQuery数据交互Ajax
- 嵌入式|SmartTimer——一种基于STM32的轻量级时钟调度器
- 操作系统|操作系统——用C++模拟一个分段存储管理
- Python|数据分析（实战模拟）
- C++实现并优化异常系统
- 数据库|太强了！这款轻量级的数据库中间件完美解决了Spring Boot 中分库分表问题
- 计算机视觉|IEEE（基于轻量级特征增强卷积神经网络的低空小目标检测）
- 一个轻量级的CameraView（支持摄像头高斯模糊）