단순 아날로그 JQuery 프레임워크
3421 단어 jquery
1. 먼저 jquery 대상을 시뮬레이션하고 여기서 xjs라고 이름을 짓고 다음과 같은 코드를 만든다.
var xjs = function(selector) {
return document.getElementById(selector);
}
alert(xjs("d1").innerHTML);
그러나 현재 xjs를 통해 되돌아오는 것은dom 대상이다. 이것은 jquery가 되돌아오는 jquery 대상과 다르다.xjs가 자신을 되돌리기 위해서는 xjs를 확장해야 합니다.
var xjs = function(selector) {
return xjs.fn.init(selector);
}
xjs.fn = xjs.prototype = {
init: function(selector) {
if (typeof selector == "string") {
this[0] = document.getElementById(selector);
return this;
}
}
}
상기 코드는 selector의 합법성 검사를 하지 않으면 사실상 합법적인 id라고 생각합니다.위 코드처럼 xjs 대상을 확장하고 xjs를 통해 확장합니다.fn.init는 그 자체를 되돌려줍니다. 그러면 제가 xjs (") 를 통해 얻은 대상은 xjs 자신입니다.
2. xjs에 $와 같은 간단한 별명을 붙인다
window.$ = window.xjs = xjs;
이렇게 하면 $(") 의 형식으로 직접 사용할 수 있다.
3. 이름 충돌 방지
(function() {
var xjs = function(selector) {
return xjs.fn.init(selector);
}
xjs.fn = xjs.prototype = {
init: function(selector) {
if (typeof selector == "string") {
this[0] = document.getElementById(selector);
return this;
}
}
}
window.$ = window.xjs = xjs;
})();
4.xjs를 실현한다.html()
$나 xjs를 통해 되돌아오는 대상은 이미 자기 자신이기 때문에, innerHTML 같은 js 속성이나 방법을 사용하려면 반드시 xjs 대상을dom 대상으로 변환해야 합니다.그래서 jquery처럼 자신을 실현할 수 있는 방법.
(function() {
xjs.fn = xjs.prototype = {
init: function(selector) {
if (typeof selector == "string") {
this[0] = document.getElementById(selector);
return this;
}
},
html: function() {
if (arguments.length == 0) {
return this[0].innerHTML;
}
else {
this[0].innerHTML = arguments[0];
}
},
version: "8.8.8"
}
매개 변수를 전달하지 않으면 대상의 html 내용을 얻고 매개 변수를 전송하면 대상의 html 내에서 전송된 값을 설정합니다.
xjs 실례 대상이 xjs 원형의 초기 방법과 속성을 계승하기 위해 xjs 원형을 xjs 대상에 부여합니다
xjs.fn.init.prototype = xjs.fn;
alert(t.version);
(function() {
var xjs = function(selector) {
return xjs.fn.init(selector);
}
xjs.fn = xjs.prototype = {
init: function(selector) {
if (typeof selector == "string") {
this[0] = document.getElementById(selector);
return this;
}
},
html: function() {
if (arguments.length == 0) {
return this[0].innerHTML;
}
else {
this[0].innerHTML = arguments[0];
}
},
version: "8.8.8"
}
xjs.fn.init.prototype = xjs.fn;
window.$ = window.xjs = xjs;
})();
var t = $("d1");
t.html("hello");
alert(t.html());
alert(t.version);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
