jQuery 마이그레이션 - this.selector

 

도비는 여전히 jQuery 마이그레이션 작업 중.

 

 

2022.05.17 - [개발/javascript] - jQuery 마이그레이션 - Deprecated, Removed

jQuery 마이그레이션 - Deprecated, Removed

.selector

.selector 가 removed 되었다고 있어서 이게 뭔 소린가 하고 찬찬히 살펴보았다.

미친 듯이 구글링을 했다는 소리다.

 

 

$.fn.newPlugin 같이 플러그인 내부에서 jQuery 오브젝트를 참조할 때 this.selector 로 현재 selector 를 참조할 수 있었던 기능이 없어졌다는 소리다.

 

https://github.com/jquery/jquery/issues/1908

Remove context and selector properties · Issue #1908 · jquery/jquery

관련 문서는 이거.

 

$.fn.test = function() {
    console.log(this.selector, this.context);
    return this;
};
(function() {
    $('body').test();
})();

// 출력 내용
// undefined undefined

요약하면 이거.

 

저런 기능이 있었던가 하고 잠깐 정신이 아득해졌지만 뭐 어쩌겠어,

작업 중인 프로젝트 플러그인에서 사용중인 기능인데.

 

나쁜 놈

그래도 다행이 플러그인 내부에서 저 코드 블록을 호출하는 경우는 없고 외부에서만 사용한다.

 

플러그인을 뜯어 고치면 나중에 골 아픈 경우가 왕왕 생기니까 플러그인은 건들지 않고 우회 기능을 만들기로 한다.

 

$.fn.passThroughFn = function(options) {
    if (!(options instanceof Object)) {
        options = {
            selector: options,
        };
    }
    this.selector = options.selector;
    this.context = options.context || document;
    return this;
};

공통 스트립트 파일에 해당 플러그인을 생성해서 넣었다.

.context 도 같이 removed 되었는데 딱히 사용하는 곳은 없지만 혹시나 하고 최소한의 방비책을 넣었다.

 

$.fn.test = function() {
    console.log(this.selector, this.context);
    return this;
};
(function() {
    $('body').passThroughFn('body').test();
})();

// 출력 내용
// body #document

이제 구버전 플러그인을 사용하는 곳을 passThroughFn 을 통해 가도록 처리해 주면 된다.