바닐라 js

Question

을 통해 자신의 객체 기능을 빌드하는 방법 자신의 함수를 빌드하여 정의 된 객체에서 순수한 자바 스크립트를 통해 호출하는 방법? Jquery가 이와 같이 수행하고 있으며이를 알고 싶습니다.

이

doc = { 
    qS: function(selector) { 
    return document.querySelector(selector); 
    } 
}; 

var me = doc.qS('#id'); 
me.qS('span').innerText = 'Changed!'; 

당신이 doc.qS('#id')를 호출 한 후, me는 DOM 요소를 포함하고있다 : 당신의 코드에서

doc = { 
 
    qS: function(selector) { 
 
    return document.querySelector(selector); 
 
    } 
 
}; 
 
    
 
var me = doc.qS('#id'); 
 
me.qS('span').innerText = 'Changed!';

<div id="id"><span>Test</span></div>

Answer 1

: 여기에 작은 샘플은 내가하고 싶은 것을 보여주는 것입니다 q5 메서드가 정의되지 않았습니다. 이제

function DOM(elt) { 
    return { 
    qS(selector)  { return DOM(elt.querySelector(selector)); }, 
    set innerText(text) { elt.innerText = text; }, 
    get innerText()  { return elt.innerText; } 
    }; 
} 

당신이 할 수 있습니다 :

DOM(document).qS('#id').qS('span').innerText = "foo"; 

하는 대신 구현할 수는 체인하려는 경우 라 jQuery를 호출, 당신은 DOM 요소의 래퍼로 좀 더 기계를 구축해야합니다 DOM을 생성자로 사용하고 (new DOM을 통해 호출) 프로토 타입에 qS과 같은 메서드를 지정하거나 DOM을 ES6 클래스로 구현할 수 있지만 실제로 구현 세부 사항입니다.

그러나 물건 목록을 반환하는 querySelectorAll과 같은 메소드 호출을 처리하려면이 요소를 확장하여 여러 요소 (jQuery의 기능)를 처리해야합니다. 오래 전에 jQuery의 기능이 거의없는 버전이나 zepto와 같은 가벼운 jQuery 버전을 사용하게 될 것입니다.

당신이 원하는 모든 querySelector의 별칭 인 경우

, 일반적으로 간주 나쁜 연습하지만, 당신은

Object.defineProperty(HTMLElement, 'qS', { 
    value(selector) { return this.querySelector(selector); } 
}); 

을 할 수 그러나 지금 당신은 유지하고 설명 할 다른 일을 가지고 있고, 아마 문제 가치가 없어.

많은 사람들이 체이닝 스타일을 좋아하고 jQuery에서 인기를 얻었습니다. 그러나 다른 사람들은 그것을 싫어합니다. 나는 그것이 당신이 유행의 조금이었고, 지금 유행에서 다소 나갔다라고 말할 수 있었다고 생각한다. 그건 당신이하고 싶었던 모든 있다면 당신은뿐만 아니라 단지 물론

var id = document.querySelector('#id'); 
var span = id.querySelector('span'); 
span.textContent = 'Changed!'; 

을 작성할 수 있습니다, 당신은 단지 시작하는 querySelector('#id span')을 작성할 수 있습니다.

왜 DOM 요소를 선택하고 스타일을 추가하는 등의 작업을 수행 할 필요가 있다고 생각할 수 있습니까? 많은 jQuery 프로그램은 여러 가지 이상한 방식으로 DOM을 탐색하고 요소를 추가 및 제거하고 수정하는 코드가 복잡합니다. jQuery를 사용하는 사람들이 CSS를 적절하게 사용하면 많은 것을 얻을 수 있습니다. DOM을 걷고 조작해야하는 JS 코드가 적기 때문에 jQuery를 유명하게 만드는 체인과 같은 구문 설탕에 대한 필요성이 줄어 듭니다.

일종의 템플릿 언어를 제공하는 최신 프레임 워크를 선택하면 JS에서 수행해야하는 직접 DOM 조작을 거의 0으로 줄일 수 있습니다.