jQuery 대상의 간소화 짝퉁 버전
4344 단어 jquery
jQuery라는 대상도 간단하지 않기 때문에 $를 먼저 실현합니다.each와 $.extend 이 두 가지 가장 기본적인 기능.코드는 다음과 같습니다.
(function(){
var jsquick = {
each: function(collection, callback) {
var i, arr = [];
if (Object.prototype.toString.call(collection) !== "[object Array]") {
if (Object.getOwnPropertyNames) {
arr = Object.getOwnPropertyNames(collection);
} else {
for (var key in collection) {
if (collection.hasOwnProperty(key)) arr.push(key);
}
}
for (i = 0; i < arr.length; i++) {
callback(arr[i], collection[arr[i]]);
}
} else {
for (i = 0; i < collection.length; i++) {
callback(i, collection[i]);
}
}
},
extend: function(obj) {
var that = this;
this.each(obj, function(key, value) {
that[key] = value;
});
}
};
$ = window.jsquick = jsquick;
})();
다음은 $입니다.each와 $.extend를 토대로 $(selector), $를 계속 추가합니다.fn.each와 $.fn.extend 방법.이때 $() 는 함수이지만, 대상으로서 여러 가지 방법을 가지고 있으며, $(selector) 함수로 생성된 대상의 원형은 $입니다.따라서 $객체를 수정해야 합니다.마지막 코드는 다음과 같습니다.
(function(){
function jsquick(selector) {
return new init(selector);
}
function init(selector) {
var elems;
switch (selector.charAt(0)) {
case "#":
elems = [document.getElementById(selector.slice(1))];
break;
case ".":
elems = document.getElementsByClassName(selector.slice(1));
break;
default:
elems = document.getElementsByTagName(selector);
}
for (var i = 0; i < elems.length; i++) {
this[i] = elems[i];
}
this.length = elems.length;
};
init.prototype = jsquick.prototype;
jsquick.prototype.each = function(callback) {
for (var i = 0; i < this.length; i++) {
callback.call(this[i], i);
}
};
jsquick.each = function(collection, callback) {
var i, arr = [];
if (Object.prototype.toString.call(collection) !== "[object Array]") {
if (Object.getOwnPropertyNames) {
arr = Object.getOwnPropertyNames(collection);
} else {
for (var key in collection) {
if (collection.hasOwnProperty(key)) arr.push(key);
}
}
for (i = 0; i < arr.length; i++) {
callback(arr[i], collection[arr[i]]);
}
} else {
for (i = 0; i < collection.length; i++) {
callback(i, collection[i]);
}
}
};
jsquick.prototype.extend = jsquick.extend = function(obj) {
var that = this;
jsquick.each(obj, function(key, value) {
that[key] = value;
});
};
jsquick.fn = jsquick.prototype;
$ = window.jsquick = jsquick;
})();
여기서 $("#id"), $(".class"), $("tag") 세 가지 선택기만 간단하게 실현했습니다. $(selector) 창설된 실제는 하나의 대상입니다. 우리는 그것을 수조로 사용하기 때문에 그 중의length 속성을 스스로 관리해야 합니다.
현재 jQuery의 간략한 짝퉁 버전이 나왔고 그 중에서 이미 확장된 기능을 실현했다.
참고 자료:[1]jQuery: The Write Less, Do More, JavaScript Library[2] jQuery API Documentation [3] jQuery() | jQuery API Documentation [4] Types | jQuery API Documentation [5] jQuery.each() | jQuery API Documentation [6] jQuery.extend() | jQuery API Documentation [7] jQuery.inArray() | jQuery API Documentation [8] .each() | jQuery API Documentation [9] 어떻게 jQuery-free를 할 수 있습니까? -완일봉의 네트워크 일지
[YAML] Updated: 2013-07-04 20:20:00
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
