객체 형식 ▶ { , }
$.fn.extend({ })
메서드 확장 정의
jQuery 를 확장 즉 커스터마이징
jQuery 의 기본 함수에 추가하는 내가 쓰고자 하는 함수를 넣어서 확장
.fn -> 아직 정해지지 않은 자바스크립트에서 지원하는 오브젝트 전체를 뜻하는 가명
.fn 으로 생성된 메소드는 아무나 이용하고 접근할 수 있는 메소드가 된다.
jquery prototype(원본의) property 확장.
$.fn.extend() 의 경우 jquery prototype의 prototype을 확장한다는 의미로
$.fn.extend({
method1 : function(){}
})
와 같이 선언한다.
다른 jquery method들 처럼 $("div").method1(); 로 호출해서 사용한다.
jquery prototype에 추가한 property 는 "this" 를 통해서 DOM Element 에 접근이 가능하다.
$.fn.extend({
toogleActivateStatue : function(){
var $this = $(this);
$this.css("color","white");
},
toogleDisActivateStatue : function(){
var $this = $(this);
$this.css("color","black");
}
});
$("#itemStateToggle").click(function(){
var i = Math.floor((Math.random() * 3 ) );
console.log(i);
$(".toolbar-item").each(function(index){
if(index == i){
$(this).toogleActivateStatue();
}else{
$(this).toogleDisActivateStatue();
}
});
});
$.extend({ })
객체(오브젝트) 확장 정의
Object 들의 merge!
.extend -> 합치는 메서드
왜 앞에 아무것도 없냐고? .fn과 마찬가지로 jquery가 자체 지원하는 선택자 없는 메소드 또는 가짜 가상의 선택자(jquery)를 사용하기 때문
$.extend({ // 제이쿼리 객체정의
bizServiceCall: function ( ) {} // bizServiceCall 메서드명!!
)}
*{background-color: #ff0000;}.extend 구조%*%
$.extend({참/거짓}, 오브젝트1, 오브젝트2);
참거짓부분은 합치는 방법에 대해 설정하는 것
오직 true만 쓸 수 있고, 아무것도 쓰지 않으면 거짓(false)를 전달하게 된다.
이건 겹칠때 덮어씌울것인가,, 덮어씌우지 않을 것인가에 대한 결정이다.
true이면 덮어씌우지 않고, false이면 덮어씌운다.
$.extend({참/거짓}, 오브젝트1, 오브젝트2);
오브젝트1에 오브젝트2를 덮어씌운다.
merge 오브젝트2 into 오브젝트1 이라고 보면됨 (오브젝트2를 오브젝트1에 합친다.)
$.extend({}) : Object 들의 merge!
$.extend({
method1 : function(){}
});
로 선언한 경우 $.method1(); 로 호출해서 사용한다.
이와 같이 선언된 경우 this를 사용하여 DOM Element에 접근할 수 없다.
보통의 jquery method 처럼 $("#id")와 같은 selector가 필요 없으며
$.ajax() 처럼 사용하면 된다.
주로 method들을 선언하는 것보다는 object들을 합치기 위해 사용하는 경우가 많다.
var Person = function(name){
this.name = name;
};
var speaker = {
speak : function(){
return this.name + " is speaking";
}
};
var mover= {
walk : function(){
return this.name + " is walking";
},
run : function(){
return this.name + " is running";
}
};
$.extend(Person.prototype, speaker, mover);
//Person.prototype에 speaker과 mover를 merge 시킨다.
var john = new Person("john");
console.log(john.walk());
//"john is walking"
$.extend(obj1, obj2);
=> obj2의 값을 odj1에 합친다.
=> obj1 key와 obj2의 key 값이 겹치는 경우 obj2의 key 값에 해당하는 내용으로 덮어쓰기 실행
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
$.extend(true, obj1, obj2);
=> obj2의 값을 obj1에 합친다.
=> key 값이 겹치는 부분의 값만 덮어쓰기 실행
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1, recursively
$.extend(true, object1, object2 );
//object 1 : {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
$.extend({}, obj1, obj2);
=> obj1을 변경하지 않고 obj2와 obj1을 합치게 시킨다.
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
defaults -- {"validate":false,"limit":5,"name":"foo"}
options -- {"validate":true,"name":"bar"}
settings -- {"validate":true,"limit":5,"name":"bar"}
'📌 Front End > └ jQuery' 카테고리의 다른 글
[jQuery] 전역 함수와 매개변수 처리 방법 (0) | 2023.03.10 |
---|---|
[jQuery] 변수앞에 달러를 붙이는 이유 (0) | 2023.03.10 |
[jQuery] JQuery를 이용한 AJAX통신 (0) | 2023.03.10 |
[JQuery] 이벤트 처리 방법(event binding) (0) | 2023.03.10 |