Object.observe 소개

키 테이크 아웃

O.O라고도 알려진 object.observe는 브라우저에서 기본적으로 객체 변경 감지를 지원하기 위해 ECMAScript 7의 일부로 JavaScript에 추가되는 기능입니다. 주위의 랩퍼를 만들지 않고 객체에서 직접 작동하여 사용하기 쉽고 성능에 유리합니다. () 메소드는 물체의 변경을 찾는 데 사용할 수있는 물체에 정의 된 비동기 정적 메소드입니다. 세 가지 매개 변수를 허용합니다 : 관찰 할 객체, 변경이 감지 될 때 호출 할 콜백 함수,

를 감시 할 변경 유형을 포함하는 옵션 배열. 배열 관찰은 물체 관찰과 유사하며, Object.Observe 대신 Array.Observe를 사용하여 관찰자 함수를 등록해야한다는 유일한 차이점입니다. 객체 또는 배열의 등록 된 관찰자는 개체를 사용하여 각각 제거 할 수 있습니다. 이 메소드는 객체 또는 배열의 두 매개 변수와 제거 할 콜백을 허용합니다.

양방향 데이터 바인딩은 이제 클라이언트 측 응용 프로그램의 중요한 기능 중 하나입니다. 데이터 바인딩이 없으면 개발자는 모델이 변경 될 때마다 데이터를 수동으로 뷰에 바인딩하기 위해 많은 논리를 처리해야합니다. Knockout, AngularJS 및 Ember와 같은 JavaScript 라이브러리는 양방향 바인딩을 지원하지만 이러한 라이브러리는 변경 사항을 감지하기 위해 다른 기술을 사용합니다. 녹아웃과 Ember 사용 관찰 가능. 관찰 가능한 것은 모델 객체의 특성을 둘러싼 함수입니다. 이러한 기능은 해당 객체 또는 속성의 값이 변경 될 때마다 호출됩니다. 이 접근법은 잘 작동하고 모든 변경 사항을 감지하고 알리지 만, 기능을 다루어야하는 평범한 JavaScript 객체로 작업 할 수있는 자유를 빼앗아갑니다. Angular는 더러운 검사를 사용하여 변경 사항을 감지합니다. 이 접근법은 모델 객체를 오염시키지 않습니다. 모델에 추가 된 모든 객체에 대해 감시자를 등록합니다. 이 모든 시청자는 Angular의 다이제스트 사이클이 시작될 때마다 및 데이터가 변경 될 때마다 실행됩니다. 이러한 변경 사항은 해당 감시자가 처리합니다. 래퍼 주위에 포장지가 만들어지지 않기 때문에 모델은 여전히 ​​일반적인 물체로 남아 있습니다. 그러나이 기술은 감시자의 수가 증가함에 따라 성능 저하를 유발합니다.

<.> 객체는 무엇입니까? object.observe, a.k.a. O.O는 브라우저에서 기본적으로 객체 변경 감지를 지원하기 위해 ECMAScript 7의 일부로 JavaScript에 추가되는 기능입니다. ES7은 아직 완료되지 않았지만이 기능은 이미 Blink 기반 브라우저 (Chrome 및 Opera)에서 지원되었습니다. Object.Observe는 기본적으로 브라우저에 의해 지원되며 주변의 래퍼를 만들지 않고 객체에서 직접 작동하기 때문에 API는 사용하기 쉽고 성능의 승리입니다. Object.Observe가 브라우저에서 지원되는 경우 외부 라이브러리가 필요없이 양방향 바인딩을 구현할 수 있습니다. O.O가 ​​구현되면 기존의 양방향 바인딩 라이브러리가 모두 사용되지 않는다는 의미는 아닙니다. O.O를 사용하여 변경 사항을 감지 한 후에도 여전히 UIS를 효율적으로 업데이트해야합니다. 게다가, 라이브러리는 모든 타겟팅 브라우저가 O.O. 를 지원하지 않으면 내부적으로 변화 감지 논리를 다소 수요합니다. 객체의 특성을 관찰합니다 이제 O.O가 무엇인지에 대한 아이디어가 있었으므로 실제로 볼 수 있습니다. observe () 메소드는 객체에 정의 된 비동기 정적 메소드입니다. 객체의 변경 사항을 찾는 데 사용될 수 있으며 세 가지 매개 변수를 수락합니다.

관찰 될 물체 변경이 감지 될 때 호출되는 콜백 함수

를 볼 변경 유형을 포함하는 선택적 배열

메소드를 사용하는 예를 보자. 다음 스 니펫을 고려하십시오 :

이 코드에서 우리는 일부 데이터와 함께 객체 문자 그대로 만들었습니다. 또한 ObserveCallback ()이라는 기능을 객체의 변경 사항을 기록하는 데 사용할 함수를 정의했습니다. 그런 다음 O.O.를 사용하여 변경 사항을 관찰하기 시작합니다. 마지막으로, 우리는 객체에 대해 몇 가지 변경 사항을 수행했습니다 콘솔의 출력이 표시되면 세 가지 변경 사항이 모두 감지되고 기록된다는 것을 알 수 있습니다. 다음 스크린 샷은 스 니펫에서 생성 한 결과를 보여줍니다.

o.o는 비동기식으로 실행되며 모든 변경 사항이 발생하여 호출 될 때 콜백으로 전달합니다. 그래서 여기서 우리는 객체에 적용된 세 가지 변경 사항에 대해 세 가지 항목을 받았습니다. 보시다시피, 각 항목은 변경된 속성의 이름, 이전 값, 변경 유형 및 새 값을 가진 객체 자체로 구성됩니다. 이전 코드의 라이브 데모는 아래에보고되어 있습니다 (결과를 보려면 콘솔을 열어야합니다) : Codepen의 SitePoint (@SitePoint)의 펜 EMKVEB를 참조하십시오 코드에서는 찾을 변경 유형을 지정하지 않았으므로 추가, 업데이트 및 삭제를 관찰합니다. 다음과 같이 관찰 메소드의 세 번째 매개 변수를 사용하여 제어 할 수 있습니다.

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

알림 등록 () 메소드는 객체에 추가 된 직접 속성에 대한 변경 사항을 감지 할 수 있습니다. getters and setter를 사용하여 생성 된 속성의 변경 사항을 감지 할 수 없습니다. 이러한 속성의 동작은 저자에 의해 제어되므로 저자가 소유해야합니다. 이 문제를 해결하려면 자산에 대한 변경 사항을 알리기 위해 알림 (Object.getNotifier ()를 통해 사용 가능)을 사용해야합니다. 다음 스 니펫을 고려하십시오

Todotype는 두 가지 속성을 가진 생성자 함수입니다. 그 외에도 Object.DefineProperty를 사용하여 차단 된 것이 추가됩니다. 이 예 에서이 속성에 대해 정의 된 세터는 간단한 것입니다. 일반적인 비즈니스 애플리케이션에서는 일부 유효성 검사를 수행 할 수 있으며 유효성 검사가 실패 할 경우 값을 설정하지 않을 수 있습니다. 그러나 나는 일을 단순하게 유지하고 싶었다.

마지막으로,이 예에서는 업데이트가있을 때만 알림이 전송된다는 것을 알 수 있습니다. 차단 된 속성에 대한 변경은 크롬 개발자 도구에서 다음과 같은 결과를 생성합니다.

이 예제의 라이브 데모가 아래에보고되어 있습니다 (결과를 확인하려면 콘솔을 열어야합니다) : Codepen의 SitePoint (@SitePoint)의 펜 NPZGOO를 참조하십시오 여러 변경 사항을 관찰

때로는 두 개 이상의 속성이 어떤 식 으로든 수정 된 후에 계산할 수 있습니다. 알림기를 사용 하여이 두 변경 사항을 개별적으로 알릴 수 있지만 두 값이 모두 수정되었음을 나타내는 사용자 정의 유형 이름으로 단일 알림을 보내는 것이 좋습니다. 이것은 notifier.performchange () 메소드를 사용하여 수행 할 수 있습니다. 이 방법은 세 가지 인수를 받아들입니다

사용자 지정 유형의 이름 콜백 함수 변경을 수행합니다. 이 함수에서 반환 된 값은 변경 객체

에 사용됩니다. 변경 사항이 적용되는 객체

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

위의 Todotypedefed 클래스에 수행 된 새 속성을 추가하겠습니다. 이 속성의 값은 TODO 항목이 완료되었는지 여부를 지정합니다. 완료 값이 True로 설정되면 차단 된 속성의 값도 True로 설정해야합니다.
다음 스 니펫은이 속성을 정의합니다

PerformChange의 콜백 내부의 논리가 실행되면 사용자 정의 변경 유형이 전달 된 상태에서 변경 사항에 알립니다. 이 유형은 기본적으로 Object.observe에 의해 관찰되지 않습니다. 사용자 정의 유형의 변경 사항을 관찰하려면 O.O에게 명시 적으로 요청해야합니다. 다음 스 니펫은 추가 및 업데이트 유형과 함께 사용자 정의 유형의 변경을 관찰하기 위해 Todo 객체의 수정 된 O.O를 보여줍니다.

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

위의 스 니펫은 true로 설정하기 전에 차단 된 값을 true로 설정합니다. 따라서 사용자 정의 변경 유형으로 알림을 보냅니다. 다음 스크린 샷은 사용자 정의 유형에 의해 반환 된 변경 객체의 세부 사항을 보여줍니다.

이 예제의 라이브 데모가 아래에보고되어 있습니다 (결과를 확인하려면 콘솔을 열어야합니다) : Codepen의 sitepoint (@sitepoint)의 펜 yyexgd를 참조하십시오 배열 관찰 배열 관찰은 객체를 관찰하는 것과 유사합니다. 유일한 차이점은 옵저버 기능이 Object.Observe 대신 Array.Observe를 사용하여 등록해야한다는 것입니다. 다음 스 니펫은 이것을 보여줍니다 :

이 예제의 라이브 데모가 아래에보고되어 있습니다 (결과를 확인하려면 콘솔을 열어야합니다) : Codepen에서 sitepoint (@sitepoint)의 펜 gggezq를 참조하십시오 등록 된 관찰자 제거 객체 또는 배열의 등록 된 관찰자는 개체를 사용하여 각각 제거 할 수 있습니다. 이 메소드는 객체 또는 어레이와 콜백을 제거 할 두 개의 매개 변수를 허용합니다. 따라서이 메소드를 사용하려면 콜백을 참조해야합니다.
결론 일단 O.O가 모든 브라우저에서 완전히 지원되면 모든 클라이언트 측 라이브러리에서 변경 감지가 표준화됩니다. Aurelia는 이미 그것을 사용하기 시작했습니다. Angular 2의 Change Detection Library, Watchtower.js는 내부적으로 O.O를 사용하며 Ember도 향후 변경 감지에 사용할 것입니다. Angular 2와 Aurelia는 O.O가 기본적으로 이용할 수 없을 때 폴리 플릴이 폴백에 구현되었습니다.

클라이언트 측 양방향 바인딩 주변의 미래는 브라우저에 큰 추가로 더 밝아 질 것입니다. 다른 브라우저가 더 빨리 따라 잡기를 기대합시다!

객체에 대한 자주 묻는 질문 (FAQS) <.> 객체를 사용하지 않은 이유는 무엇입니까?
Objeb.Observe는 몇 가지 제한 사항과 문제가있는 것으로 밝혀 졌기 때문에 더 이상 사용되지 않았습니다. 함수 내에서 변경된 변경 사항을 관찰 할 수 없었으며 객체의 프로토 타입에 대한 변경 사항을 추적 할 수 없었습니다. 또한, 큰 객체의 변화를 추적하기 위해 많은 리소스가 필요했기 때문에 성능면에서 비효율적 인 것으로 밝혀졌습니다. 감가 상각은 또한 프록시 및 반사와 같은 ES6에 새로운 기능의 도입에 의해 영향을 받았으며, 이는 물체의 변화를 관찰하고 반응하는보다 효율적인 방법을 제공합니다. Object.Observe에 대한 대안은 무엇입니까? 가장 인기있는 대안 중 하나는 ES6 프록시 사용입니다. 프록시를 사용하면 속성 조회, 할당, 열거, 기능 호출 등과 같은 객체의 기본 작업에 대한 사용자 정의 동작을 정의 할 수 있습니다. 또 다른 대안은 객체의 변화를 관찰하기위한 자체 메커니즘을 제공하는 mobx 또는 vue.js와 같은 라이브러리를 사용하는 것입니다.
ES6 프록시는 어떻게 대상의 대안으로 작동합니까? > ES6 프록시는 객체에서 기본 작업의 동작을 사용자 정의하는 방법을 제공합니다. 프록시는 대상 객체와 핸들러 객체의 두 매개 변수로 생성됩니다. 핸들러 객체는 대상 객체의 다양한 작업에 대해 '트랩'을 정의합니다. 이러한 작업이 수행되면 핸들러의 해당 트랩이 트리거되어 사용자 정의 동작이 실행됩니다. 이로 인해 프록시는 물체의 변화를 관찰하고 반응하기위한 강력한 도구가됩니다.
객체를 통해 ES6 프록시를 사용하면 이점이 무엇입니까? 그들은 물체의 변화를 관찰하고 반응하는보다 유연하고 강력한 방법을 제공합니다. 프록시를 사용하면 속성 변경뿐만 아니라 광범위한 작업에 대한 사용자 정의 동작을 정의 할 수 있습니다. 프록시는 특히 큰 물체를 다룰 때 개체보다 더 잘 수행합니다. 또한 프록시는 ES6 표준의 일부입니다. 즉, 모든 현대식 브라우저에서 지원됩니다.

내 프로젝트에서 Object.Observe를 여전히 사용할 수 있습니까?

기술적으로는 기술적으로 가능하지만 기술적으로 가능합니다. 여전히 Object.observe를 프로젝트에서 사용하면 강력하게 낙담합니다. Object.observe는 JavaScript 표준에서 더 이상 사용되지 않고 제거되었으며, 이는 더 이상 유지 관리되지 않으며 모든 브라우저에서 지원되지 않을 수 있음을 의미합니다. 더 이상 사용되지 않은 기능을 사용하면 프로젝트에서 호환성 문제 및 기타 문제로 이어질 수 있습니다. ES6 프록시와 같은 대안 또는 mobx 또는 vue.js.js. 프록시에는 개체를 대체하는 것이 포함됩니다. 객체의 속성 변경을 관찰하는 대신 프록시의 핸들러 객체에서 관찰하려는 작업의 트랩을 정의합니다. 여기에는 코드의 리팩토링이 포함될 수 있지만 객체의 변화를 관찰하는보다 유연하고 효율적인 방법을 제공합니다. ES6 프록시를 사용하는 성능 영향은 무엇입니까?

ES6 프록시는 일반적으로 대상보다 특히 큰 물체를 처리 할 때 객체보다 더 효율적입니다. 그러나 다른 기능과 마찬가지로 신중하게 사용해야합니다. 응용 프로그램의 모든 객체에 대한 프록시를 만들면 성능 문제가 발생할 수 있습니다. 필요한 경우에만 프록시를 사용하고 핸들러 객체를 가능한 한 가벼운 상태로 유지하는 것이 가장 좋습니다.

ES6 프록시를 사용하는 데 제한 사항이 있거나 문제가 있습니까?
ES6 프록시는 강력한 도구입니다. 그들은 몇 가지 한계가 있습니다. 예를 들어, 배열의 길이 속성에 대한 변화를 관찰하는 데 사용할 수 없습니다. 또한 프록시는 객체의 프로토 타입 변경을 관찰하는 방법을 제공하지 않습니다. 그러나 이러한 한계는 종종 반사와 같은 ES6의 다른 기능을 사용하여 해결할 수 있습니다. .js는 물체의 변화를 관찰하기위한 자체 메커니즘을 제공합니다. 예를 들어, Mobx는 관찰 가능한 속성과 계산 된 값을 사용하여 변경 사항을 추적하는 반면 vue.js는 반응성 데이터 모델을 사용합니다. 이 라이브러리는 객체 관찰을위한 고급 API를 제공하여 RAW ES6 프록시보다 사용하기가 더 쉽습니다.

JavaScript에서 객체 관찰의 미래는 무엇입니까?

객체 관찰의 미래는 무엇입니까? JavaScript는 언어의 지속적인 진화와 라이브러리 및 프레임 워크의 개발에 의해 형성 될 수 있습니다. ES6 프록시 및 반사와 같은 기능은 객체의 변화를 관찰하고 반응하는 강력한 도구를 제공하며 Mobx 및 Vue.js와 같은 라이브러리는 이러한 도구를 구축하여 객체 관찰을위한 고급 API를 제공합니다. 언어와 생태계가 계속 발전함에 따라, 우리는 물체의 변화를 관찰하는보다 효율적이고 유연한 방법을 볼 수 있습니다.

위 내용은 Object.observe 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!