JS Coding
[JavaScript] 자바스크립트에서 사용되는 "This" 2편 본문
<!DOCTYPE html>
<meta charset="UTF-8">
<div class="kjh">김소원</div>
<div class="kjh">이은솔</div>
<div class="kjh">신수연</div>
<div class="kjh">김정하 예쁜이</div>
<script>
// $("#aaa")
// 즉각실행함수
// var $; // 전역변수
// var kgb ="민주 주의!";
// alert(window.kgb); // 위에 var kgb 전역변수와 같다.
window.$ = null;
!function(){
// new를 생략하고 싶다면 factory
$ = function(pSel){
return new myDom(pSel); // 여기서 생성해서 돌려준다.
}
const myDom = function(pSel){
let elems = document.querySelectorAll(pSel);
this.selQuery = pSel; // 선택지를 임시로 저장해 둠
this.length = elems.length;
// 선택해 온 걸 옮겨 담기
for(let i=0;i<elems.length;i++){
this[i] = elems[i];
};
return this; //생략 가능
};
// 메소드를 추가하려면 항상 여기서
// myDom.prototype.메소드명 = function(){};
$.fn=myDom.prototype; // myDom.prototype을 밖에서도 접근 가능하게 (jQuery)
window.$=$; // 전역변수 $에 지역변수 $를 참조 !
}();
// 흐름을 이해하고, 콜백을 잘 활용 할 수 있으면 GOOD!
// 나만의 메소드 추가 (요런걸 jQuery 플러그인 개발이라고 한다.)
// JavaScript 는 오버로딩 지원이 안된다 ! ( 기본이 오버라이딩 덮어쓰기)
// html 메소드는 매개변수 없는거, 매개변수 있는거 (문자열,함수)
// jQuery 메소드는 일반적으로 3가지 패턴을 가짐
// 값 읽기(매개변수 없는거), 전체쓰기(매개변수가 문자열), 부분조작(콜백함수)
$.fn.html = function(pArg){
// 매개변수 없이 값이 넘어오지 않았을 때
if(! pArg) {
return this[0].innerHTML;
}
if(typeof(pArg)=="string"){
for(let i=0; i<this.length; i++){
this[i].innerHTML= pArg;
}
return this; // 메소드체인닝, 다시 박스 리턴
}
// 매개변수가 넘어 온 함수 (곧 콜백함수)가 넘어 왔음
if(typeof(pArg)=="function"){
//실제 jQuery에서 가장 많이 사용되는 패턴!
for(let i=0; i<this.length; i++){
this[i].innerHTML=pArg(i, this[i].innerHTML);
}
return this; // 메소드 체인닝, 다시 박스 리턴 !
}
}
// 박스 안에서 있는 것 중 1개 선택 !
$.fn.eq = function(pIndex){
// return this[pIndex];
this[0] = this[pIndex]; // 1개만 남겨야 함
this.length = 1; // 당연히 length는 1;
for(let i=1; i<this.length; i++){ // 0번 이외의 나머지는 지우기
delete this[i];
}
return this;
}
// 맨 처음 선택한 것들로 되돌리기 ! (구현 방식은 선택적)
$.fn.end = function(){
return $(this.selQuery);
}
// let divs = new myDom(".kjh");
let divs = $(".kjh"); // new가 더 이상 필요없다.
// console.log(divs.eq(2));
divs.eq(0) // 1개만 선택
.html("<h1>되는것인지 확인 </h1>")
.end() // 다시 4개 선택
.eq(2) // 2번 1개만 선택
.html("<h1>이렇게도 사용 할수 있다.</h1>")
.end()
.html(function(index,html){
if(index ==3){
return `${html} 사용하는 것에 느낌을 갖자`;
}
return html;
})
divs.html(function(pIndex,pHtml){
console.log("체크 : ", pIndex,pHtml);
if(pIndex ==1){
return "<h1>체크</h1>";
}
return pHtml; // 조건에 해당하지 않을때는 원래값 그대로
}).html(function(pIndex,pHtml){
console.log("체크 : ", pIndex,pHtml);
if(pHtml == "신수연"){
return `${pHtml} 만만세`;
}
return pHtml; // 조건에 해당하지 않을때는 원래값 그대로
})
//console.log("확인 : ",$.fn);
alert(divs.html()); // 매개변수가 없을 때
// divs.html("<h1>매개변수 문자열</h1>");
divs.html(function(pIndex,pHtml){
console.log("체크 : ", pIndex,pHtml);
});
// console.log("이상하면 체크 : ",divs);
// divs[2].innerHTML = "<h1>안농 난 메롱이얌</h1>";
</script>
'JavaScript' 카테고리의 다른 글
| [Node.js] Node.js 입문자 초기 세팅 (0) | 2024.04.05 |
|---|---|
| [JavaScript] Chat.js 를 이용한 차트 만들기 (0) | 2023.11.10 |
| [JavaSciprt] 자바스크립트에서 사용되는 "This" (0) | 2023.11.10 |
| [JavaScript] 모달 직접 만들어 보기 (0) | 2023.11.07 |
| [JavaScript] JQuery 원리1 (기본구조) (0) | 2023.11.07 |
'JavaScript' Related Articles
more
