Object.defineProperty를 사용하여 간단한 js 양방향 바인딩_javascript 기술 구현

원산지

며칠 전 저는 일부 인기 있는 미니 mvvm 프레임워크(예: Angularjs 및 Emberjs와 같은 무거운 프레임워크가 아닌 avalon.js 및 vue.js와 같은 가벼운 프레임워크)의 구현을 살펴보고 있었습니다. 현대의 인기 있는 mvvm 프레임워크는 일반적으로 프레임워크 자체의 판매 포인트인 양방향 데이터 바인딩을 제거하며(Ember.js는 양방향 데이터 바인딩을 지원하지 않는 것 같습니다.) 각 프레임워크에는 양방향 데이터 바인딩 구현 방법이 있습니다. 예를 들어 Anguarjs는 내부적으로 더티 검사를 사용하는 반면 avalon.js의 내부 구현 방법의 핵심은 속성 접근자를 설정하는 것입니다.

여기에서는 각 프레임워크별 양방향 데이터 바인딩의 구체적인 구현에 대해 논의하지 않을 것입니다. 프런트 엔드에서 양방향 데이터 바인딩을 구현하는 몇 가지 일반적인 방법에 대해서만 설명하고 기술 선택에 중점을 둘 것입니다. avalon.js는 양방향 데이터 바인딩 유형을 구현합니다.

양방향 데이터 바인딩 일반 구현

먼저 프런트엔드 양방향 데이터 바인딩이 무엇인지 이야기해 보겠습니다. 쉽게 말하면 프레임워크의 컨트롤러 레이어(여기서 컨트롤러 레이어는 일반적인 용어로 뷰 동작을 제어하고 모델 레이어와 접촉하는 미들웨어로 이해될 수 있음)와 UI 프리젠테이션 레이어(뷰 레이어)입니다. 양방향 데이터 채널을 구축합니다. 두 레이어 중 하나에서 변경이 발생하면 다른 레이어도 자동으로 해당 변경을 즉시(또는 즉시) 수행합니다.

일반적으로 이러한 양방향 데이터 바인딩 관계(컨트롤러 계층과 디스플레이 계층 간의 연결 프로세스)를 달성하기 위해 현재 프런트 엔드에는 세 가지 방법,

이 있습니다.

1.더티체크

2. 관찰 메커니즘

3. 캡슐화된 속성 접근자

더티 체크

Angularjs(여기서는 AngularJS 2.x.x 버전이 아니라 AngularJS 1.x.x 버전을 구체적으로 나타냄)에서 양방향 데이터 바인딩의 기술적 구현이 더티 검사라고 말합니다. 일반적인 원칙은 Angularjs가 필요한 모든 것을 내부적으로 결합하기 위해 모니터링되는 속성이 이 순서에 배치됩니다. 특정 이벤트가 발생하면(이는 예약되지 않았지만 특정 특수 이벤트에 의해 트리거됨) Angularjs는 이 메소드의 내부 논리를 호출합니다. traverse 모든 감시자는 모니터링되는 속성을 비교하여 메서드 호출 전후에 속성 값이 변경되었는지 확인합니다. 변경된 경우 해당 핸들러가 호출됩니다. 이 글, 이 글 등 Angularjs 양방향 데이터 바인딩의 구현 원리를 분석한 글이 인터넷에 많이 있습니다.

이 방법의 단점은 관찰자를 순회하고 훈련하는 데 성능이 많이 소모된다는 점입니다. 특히 단일 페이지의 모니터 수가 엄청나게 많은 경우에는 더욱 그렇습니다.

관찰 메커니즘

이전에 블로거가 재인쇄 및 번역한 기사가 있었습니다. Object.observe()로 인한 데이터 바인딩 변경 사항은 ECMAScript7의 Object.observe 메서드를 사용하여 개체(또는 해당 속성)를 모니터링하고 관찰하는 것에 관한 것입니다. 변경이 발생하면 해당 핸들러가 실행됩니다.

이것은 현재 속성 데이터 변경을 모니터링하는 가장 완벽한 방법입니다. 언어(브라우저)가 이를 기본적으로 지원합니다. 다만 아쉬운 점은 현재의 지원 폭이 충분하지 않아 전면적으로 추진해야 한다는 점이다.

캡슐화된 속성 접근자

PHP의 __get() 및 __set() 메서드와 같이 PHP에도 매직 메서드라는 개념이 있습니다. 자바스크립트에도 비슷한 개념이 있는데, 매직메서드가 아니라 접근자(accessor)라고 합니다. 샘플 코드를 살펴보겠습니다.

var data = {
name: "erik",
getName: function() {
return this.name;
},
setName: function(name) {
this.name = name;
}
};

从上面的代码中我们可以管中窥豹，比如 data 中的 getName() 和 setName() 方法，我们可以简单的将其看成 data.name 的访问器（或者叫做 存取器 ）。

其实，针对上述的代码，更加严格一点的话，不允许直接访问 data.name 属性，所有对 data.name 的读写都必须通过 data.getName() 和 data.setName() 方法。所以，想象一下，一旦某个属性不允许对其进行直接读写，而必须是通过访问器进行读写时，那么我当然通过重写属性的访问器方法来做一些额外的情，比如属性值变更监控。使用属性访问器来做数据双向绑定的原理就是在此。

这种方法当然也有弊端，最突出的就是每添加一个属性监控，都必须为这个属性添加对应访问器方法，否则这个属性的变更就无法捕获。

Object.defineProperty 方法

国产mvvm框架avalon.js实现数据双向绑定的原理就是属性访问器。不过它当然不会像上述示例代码一样原始。它使用了ECMAScript5.1（ECMA-262）中定义的标准属性 Object.defineProperty 方法。针对国内行情，部分还不支持 Object.defineProperty 低级浏览器采用VBScript作了完美兼容，不像其他的mvvm框架已经逐渐放弃对低端浏览器的支持。

我们先来MDN上对 Object.defineProperty 方法的定义，

The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

意义很明确， Object.defineProperty 方法提供了一种直接的方式来定义对象属性或者修改已有对象属性。其方法原型如下，

Object.defineProperty(obj, prop, descriptor)

其中，

obj ，待修改的对象
prop ，带修改的属性名称
descriptor ，待修改属性的相关描述
descriptor 要求传入一个对象，其默认值如下，

/**
* @{param} descriptor
*/
{
configurable: false,
enumerable: false,
writable: false,
value: null,
set: undefined,
get: undefined
}

configurable ，属性是否可配置。可配置的含义包括：是否可以删除属性（ delete ），是否可以修改属性的 writable 、 enumerable 、 configurable 属性。

enumerable ，属性是否可枚举。可枚举的含义包括：是否可以通过 for...in 遍历到，是否可以通过 Object.keys() 方法获取属性名称。

writable ，属性是否可重写。可重写的含义包括：是否可以对属性进行重新赋值。

value ，属性的默认值。

set ，属性的重写器（暂且这么叫）。一旦属性被重新赋值，此方法被自动调用。

get ，属性的读取器（暂且这么叫）。一旦属性被访问读取，此方法被自动调用。

下面来一段示例代码，

var o = {};
Object.defineProperty(o, 'name', {
value: 'erik'
});
console.log(Object.getOwnPropertyDescriptor(o, 'name')); // Object {value: "erik", writable: false, enumerable: false, configurable: false}
Object.defineProperty(o, 'age', {
value: 26,
configurable: true,
writable: true
});
console.log(o.age); // 26
o.age = 18;
console.log(o.age); // 18. 因为age属性是可重写的
console.log(Object.keys(o)); // []. name和age属性都不是可枚举的
Object.defineProperty(o, 'sex', {
value: 'male',
writable: false
});
o.sex = 'female'; // 这里的赋值其实是不起作用的
console.log(o.sex); // 'male';
delete o.sex; // false, 属性删除的动作也是无效的

经过上述的示例，正常情况下 Object.definePropert() 的使用都是比较简单的。

不过还是有一点需要额外注意一下， Object.defineProperty() 方法设置属性时，属性不能同时声明访问器属性（ set 和 get ）和 writable 或者 value 属性。 意思就是，某个属性设置了 writable 或者 value 属性，那么这个属性就不能声明 get 和 set 了，反之亦然。

因为 Object.defineProperty() 在声明一个属性时，不允许同一个属性出现两种以上存取访问控制。

示例代码，

var o = {},
myName = 'erik';
Object.defineProperty(o, 'name', {
value: myName,
set: function(name) {
myName = name;
},
get: function() {
return myName;
}
});

上面的代码看起来貌似是没有什么问题，但是真正执行时会报错，报错如下，

TypeError: Invalid property. A property cannot both have accessors and be writable or have a value, #<Object>

因为这里的 name 属性同时声明了 value 特性和 set 及 get 特性，这两者提供了两种对 name 属性的读写控制。这里如果不声明 value 特性，而是声明 writable 特性，结果也是一样的，同样会报错。