首页 > 代码库 > 浅析jQuery库的核心架构和常用API的简单实现
浅析jQuery库的核心架构和常用API的简单实现
以下代码只是呈现了jQuery库中的原型继承的实现原理，以及其常用功能模块的简单实现，并不涉及过多的兼容性处理
//This is my$;
(function (window , undefined) {
//核心架构
function my$(selector){
//使用构造函数，创建my$对象，构造函数是其原型中的一个方法
return new my$.prototype.init(selector);
}
my$.fn = my$.prototype = {
constructor : my$,
type : my$,
events : {},
length : 0 ,
//核心模块init
init : function (selector) {
if(!selector){
return this ;
}
//如果参数是字符串
if(typeof selector ==="string"){
//如果是html标签
if(selector.charAt(0) === "<"){
[].push.apply(this , this.constructor.parseHtml(selector));
}else{
//如果参数是选择器，
[].push.apply(this , this.constructor.Select(selector));
}
return this;
}
//如果参数是入口函数
if(typeof selector === "function"){
var oldfn = window.onload ;
window.onload = function(){
oldfn && oldfn();
selector();
}
}
//如果参数的DOM元素
if(selector.nodeType){
this[this.length ++] = selector;
return this;
}
//如果参数是my$对象
if(selector.type === "my$"){
//return selector;
[].push.apply(this , selector);
return this ;
}
//如果参数是伪数组对象
if(selector.length >= 0){
[].push.apply(this, selector);
return this ;
}else{
this[0] = selector;
this.length = 1;
}
return this;
},
//常用方法模块
toArray : function () {
return [].slice.apply(this);
},
get : function (index) {
if(index === undefined){
return this.toArray();
}else {
if(index >= 0){
return this[index];
}
return this[this.length + index];
}
},
eq : function(index){
return this.constructor(this.get(index));
},
each : function(callback){
this.constructor.each(this , callback);
return this;
},
map : function(callback){
return this.constructor.map(this , callback);
},
end : function () {
return this.prev || this ;
}
}
//实现原型链继承结构
my$.prototype.init.prototype = my$.fn;
//实现添加方法的功能
my$.fn.extend = my$.extend = function(obj){
for(var k in obj){
this[k] = obj[k];
}
}
//---------------工具方法模块------------------------------------
//创建标签功能
my$.parseHtml = (function () {
var node = document.createElement("div");
return function (str){
var arr = [];
node.innerHTML = str ;
arr.push.apply(arr , node.childNodes);
return arr ;
}
})();
//选择器模块
my$.Select = (function () {
//不考虑兼容问题的简单实现就是采用querySelectAll的方法
var support = {},//能力检测
rnative = /\[nativecode\]/,
push = [].push;
support.qsa = rnative.test( document.querySelectorAll + "");
var Select = function( selector) {
if (support.qsa) {
return document.querySelectorAll(selector);
}
}
return Select;
})();
//---------------------添加工具方法------------------------
my$.extend({
each : function(arr , callback){
if( arr.length >= 0){
for(var i = 0 ; i < arr.length ; i ++){
if( callback.call(arr[i] , i , arr[i] ) === false){
break;
}
}
} else{
for(var k in arr){
if( callback.call(arr[k] , k , arr[k]) === false){
break;
}
}
}
return arr;
},
map : function(arr , callback){
var newArr = [];
if( arr.length >= 0){
for(var i = 0 ; i < arr.length ; i ++){
var res = callback(arr[i] , i)
if( res !== undefined){
newArr.push(res);
}
}
}else {
for(var k in arr){
var res = callback(arr[k] , k)
if( res !== undefined){
newArr.push( res );
}
}
}
return newArr;
},
//DOM操作
append : function (parent , newchild ) {
parent.appendChild(newchild);
},
//样式操作
getStyle : function (dom ,name) {
if(dom.currentStyle){
return dom.constructor[name];
}else{
return window.getComputedStyle(dom , null)[name];
}
},
//属性操作
getText : function (dom) {
if(dom.innerText){
return dom.innerText;
}else{
return dom.textContent;
}
}
//可以继续添加...
});
//实例方法 --- DOM操作
my$.fn.extend({
appendTo : function (nodes){
var list = this.constructor(nodes);
var newObj = this.constructor() ;
var temp ;
for(var i = 0 ; i < list.length ; i ++){
for(var j = 0 ; j < this.length ; j ++){
temp = i === 0
? this[j]
: this[j].cloneNode(true);
list[i].appendChild( temp );
newObj[ newObj.length ++ ] = temp;
}
}
newObj.prev = this;
return newObj;
},
append : function(nodes){
this.constructor(nodes).appendTo(this);
return this;
}
//可以继续添加...
});
//事件函数
my$.fn.extend({
on : function ( type , fn ) {
return this.each(function(i , v ){
v.addEventListener(type , fn);
});
},
off : function( type , fn ){
return this.each(function( i , v ){
v.removeEventListener( type , fn );
});
}
})
my$.each(("onblur,onfocus,onclick,onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseout," +
"onmouseover,onmouseup,onmousewheel,onkeydown,onkeypress,onkeyup").split(",")
, function ( i , v) {
var event = v.slice(2);
my$.fn[event] = function(callback){
return this.on( event , callback);
};
});
//样式操作
my$.fn.extend({
css : function (name , value) {
if(typeof name === "string" && typeof value =http://www.mamicode.com/=="string"){
this.each(function () {
this.style[name] = value;
})
}else if(typeof name === "string" && value =http://www.mamicode.com/== undefined){
return this[0].style[name];
}else if(typeof name === "object" && value =http://www.mamicode.com/== undefined){
this.each(function () {
for(var k in name){
this.style[k] = name[k];
}
})
}
return this ;
}
});
//属性操作
my$.fn.extend({
attr : function (name , value) {
if(typeof name === "string" && typeof value =http://www.mamicode.com/=="function"){
this.each(function ( i , v) {
this.setAttribute(name , value.call(this , v , i));
});
}else if(typeof name === "string" && typeof value =http://www.mamicode.com/=="string"){
this.each(function () {
this.setAttribute(name , value);
});
}else if(typeof name === "string" && value =http://www.mamicode.com/== undefined){
return this[0].getAttribute(name);
}else if(typeof name === "object" && value =http://www.mamicode.com/== undefined){
this.each(function () {
for(var k in name){
this.setAttribute( k , name[k]);
}
});
}
return this ;
},
html : function (value) {;
if(typeof value =http://www.mamicode.com/== ‘string‘){
this.each(function () {
this.innerHTML = value;
});
}else if( value =http://www.mamicode.com/== undefined){
return this[0].innerHTML ;
}
return this ;
}
});
window.my$ = window.$ = my$ ;
})(window);
浅析jQuery库的核心架构和常用API的简单实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。