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 >
  • End Website Loading with AJAX

    We tend to use older technology in the government due to slow acclimation to change and security concerns. However, our desktop machines are being constantly updated with modern browsers. If website developers take time to take this into account, they can improve the overall feel of applications. Users can have a smoother experience on the site.

    Read More >