AngularJS 와 VueJS 반응성

AngularJS 와 VueJS 반응성

VueJS는 우리가 가지고 있는 자바스크립트 프레임워크의 생태계에서 비교적 새로운 라이브러리다. Angular JS는 오랫동안 자리를 잡았고 많은 후원을 받고 있다. 그러나 한 개발자의 MV* 라이브러리는 흥미로운 대안일 수 있다.

오래된 브라우저들이 사라지기 시작하면서, JavaScript 개발자들은 ECMASCRIPT 5 기능을 기반으로 할 수 있다. 두 라이브러리가 업데이트에 반응하기 위해 의존하는 방법은 이것 때문에 다르다.

머릿말

아랫 코드를 실행하기 위해 JSFiddle을 사용하는 경우, documentbody를 사용하는것이 더 나을 수 있다. 필자는 전반적으로 일반적인 'log' 기능을 사용하고 있다.

function log(str) {
    console.log(str);
}

이글의 모두 코드는 그저 단순화 시킨 예문일뿐이다. 처리되지 않는 경우가 많을것이다.

AngularJS 반응성

밑 코드전에 구체적으로 말하겠다: * 다음 코드는 Angular JS으로 수행되지 않는다 *

var angularjs = {};
angularjs.var1 = 1;
angularjs.increment = function() {
    this.var1++
}

보통은 컨트롤러 내부에서 이뤄져 $scope에 묶였을 것이다.

function wrapFunction(obj, key) {
    var originalFn = obj[key];
    obj[key] = function() {
        originalFn.apply(obj, arguments);
        log(key);
    }
}

랩 기능을 사용하면 객체에 있는 기능을 랩으로 포장할 수 있으며, 콜백을 결정할 수 있다.

function initializeAngular(obj) {
    for (var key in obj) {
        if (typeof obj[key] === 'function') {
            wrapFunction(obj, key);
        }
    }
}
initializeAngular(angularjs);
angularjs.increment(); // logs 'increment'

log 대신 각도JS는 그 물체의 각 속성을 이전의 가치와 비교하여 확인할 것이다. 모든 값은 내부적으로 두 번 기록된다.

Vue JS 반응성

VueJS는 내부적으로 값을 두 번 기록하는 반면, 좀 더 추상적이고 기능적이다.

function reactifyProperty(obj, key) {
    var originalValue = obj[key];
    Object.defineProperty(obj, key, {
        get: function() {
            return originalValue;
        },
        set: function(newValue) {
            originalValue = newValue;
            log(key);
        }
    })
}

function initializeVue(obj) {
    for (var key in obj) {
        if (typeof obj[key] !== 'function') {
            reactifyProperty(obj, key);
        }
    }
}

var vue = {};
vue.var1 = 32;

initializeVue(vue);
vue.var1++;  // logs 'var1'

직접 값을 수정할 수 있다는 것은 직관적이다.

Summary

Vue가 유행해지고 있다. AngularJS보다 배우기가 더 쉽다. 유일한 문제는 큰 에플리케이션 일 수도 있지만, 언젠가 프로그램의 데이터를 정리하는 방법은 생기지 않을까 싶다.

You may also like

  • Angular vs. Vue.js Reactivity

    VueJS is a relatively new library in this ecosystem of JavaScript frameworks that we have. AngularJS has, on the other hand, been long established and has a lot of backing. However, one developer's MV* library may prove to be an interesting alternative.

    Read More >
  • SharePoint 2010, REST, AngularJS

    Sometimes you need a more dynamic means of changing things on a form in SharePoint. Sometimes you need to create an interface that is less "SharePoint-y". Using REST in conjunction with a library like AngularJS might be the route to go in these situations.

    Read More >