WinJS mixin

WinJS mixin

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

Applies to Windows and Windows Phone

Mixin은 특정 기능 클래스를 구현하는 개체입니다. 예를 들어 JavaScript용 Windows 라이브러리에는 이벤트를 관리하는 mixin과 바인딩을 처리하는 mixin이 있습니다.

Mixin은 직접 사용하도록 디자인되어 있지 않지만 mixin을 사용하여 형식에 기능을 추가할 수 있습니다. Mixin에는 여러 형식에 추가할 수 있는 구현된 함수가 포함되어 있습니다.

mixin을 직접 만들 수도 있습니다. 다음 코드에서는 함수 goForward, goBackward, turnLeftturnRight를 포함하는 Movable mixin을 정의하고 WinJS.Class.mix를 사용하여 이 mixin을 Robot 클래스에 추가하는 방법을 보여줍니다.


var Robot = WinJS.Class.define(function (name) {
    this.name = name;
});

var Movable = {
    direction: "stopped",
    goForward: function () { this.direction = "going forwards" },
    goBackward: function () { this.direction = "going backwards" },
    turnRight: function () { this.direction = "turning right" },
    turnLeft: function () { this.direction = "turning left" },
};

WinJS.Class.mix(Robot, Movable);

WinJS.Namespace.define("Robotics", {
    Robot: Robot
});

var myRobot = new Robotics.Robot("Mickey");

myRobot.goBackward();

console.log(myRobot.direction);
// Output: "going backwards"


WinJS mixin 사용

WinJS.Utilities.eventMixinWinJS.UI.DOMEventMixin을 사용하여 이벤트 관리 기능을 추가하고 WinJS.Binding.dynamicObservableMixin을 사용하여 바인딩 관리 기능을 추가할 수 있습니다.

형식에 WinJS.Utilities.eventMixin 추가

정의하는 어떤 형식에도 WinJS.Utilities.eventMixin을 추가할 수 있습니다. 여기에는 형식에 대해 정의하는 사용자 지정 이벤트를 발생시키고 처리하는 데 도움이 되는 WinJS.Utilities.eventMixin.addEventListener, WinJS.Utilities.eventMixin.removeEventListenerWinJS.Utilities.eventMixin.dispatchEvent 함수가 포함되어 있습니다.

예를 들어 다음 코드에서는 Robot의 이름이 변경될 때마다 발생되는 rename 이벤트로 Robot 형식을 정의하는 방법을 보여줍니다. 이벤트 처리기는 Microsoft Visual Studio의 JavaScript 콘솔에 새 출력을 작성합니다.


var Robot = WinJS.Class.define(function (name) {
        this._name = name;
    }, {
        name: {
            get: function () {
                return this._name;
            },
            set: function (newName) {
                this._name = newName;
                this.dispatchEvent('rename');
            }
        }
});

WinJS.Class.mix(Robot, WinJS.Utilities.eventMixin);
WinJS.Class.mix(Robot, WinJS.Utilities.createEventProperties("rename"));

var rob = new Robot("Bob");

robot.addEventListener("rename", function () {
    console.log("Robot renamed to " + this.name);
}.bind(robot));

robot.name = "Jim";
// Output: "Robot renamed to Jim"


이 코드에서 Robot 형식을 WinJS.Utilities.eventMixin과 혼합하여 이벤트 수신기 기능을 얻고, WinJS.Utilities.createEventProperties 함수를 혼합하여 이벤트를 정의하게 됩니다. WinJS.Utilities.createEventProperties를 사용하려면 먼저 이벤트 mixin을 형식과 혼합해야 합니다. name 속성을 정의할 때 set 접근자의 WinJS.Utilities.eventMixin.dispatchEvent 함수를 사용하여 rename 이벤트를 발생시킵니다.

형식에 DOMEventMixin 추가

WinJS.Utilities.eventMixin은 JavaScript에서 완전히 처리되는 형식에 대한 이벤트를 정의하는 데 유용합니다. DOM 요소에 연결된 이벤트를 사용할 때는 이 mixin이 별로 도움이 되지 않습니다. WinJS 컨트롤은 HTML 요소를 래핑하고 조작합니다. 이러한 컨트롤은 주로 연결된 DOM 요소에서 발생된 DOM 이벤트를 기반으로 하는 이벤트를 포함합니다. 예를 들어 DatePicker를 사용할 경우 3개의 select 컨트롤에서 개별 변경 이벤트를 추적하는 것보다 DatePicker 컨트롤의 변경 이벤트에 응답하는 것이 더 쉽습니다.

이벤트를 DOM 요소가 아닌 컨트롤 형식에 연결하면 DatePicker의 구현이 포함된 컨트롤을 바꾸는 경우처럼 코드가 변경되지 않도록 방지할 수 있습니다.

DOM 이벤트 모델은 이벤트 전파를 가능하게 합니다. DOM 이벤트는 DOM 트리까지 전파되며 어떤 수준에서도 처리 가능합니다. 이러한 특성은 클릭 가능 요소가 많이 있을 때 유용합니다. 예를 들어 DIV 요소에 이러한 요소를 포함하는 단일 클릭 처리기 함수를 추가한 다음 버블링될 때 포함된 모든 요소의 모든 클릭 이벤트를 처리할 수 있습니다. DOM 이벤트 처리에 대한 자세한 내용은 이벤트 캡처 및 이벤트 버블링을 참조하세요.

WinJS.UI.DOMEventMixin에는 DOM 트리까지 전파되는 이벤트를 구현하는 메서드가 있습니다. 여기에는 세 개의 함수 addEventListener, removeEventListenerdispatchEvent가 있습니다.

만든 형식에 이 mixin을 추가하려면 해당 형식에 대해 이름이 _domElement인 속성을 설정해야 합니다. 이 필드는 이벤트를 발생시킬 때 WinJS.UI.DOMEventMixin 구현이 찾는 필드로, 이벤트에 대한 대상 노드가 됩니다.

다음 코드에서는 DIV 요소에 대해 최소 컨트롤 클래스를 만들고 WinJS.UI.DOMEventMixin을 혼합하는 방법을 보여줍니다. 그런 후 click 이벤트에 대한 이벤트 수신기를 추가한 다음 응답할 수 있습니다.

이 코드가 작동하려면 ID가 "div"인 DIV 하나와 ID가 "report"인 또 다른 DIV가 필요합니다.


var MyButton = WinJS.Class.define(function (elem) {
    				this._domElement = elem;
   				 elem.winControl = this;
   				 this._numberClicks = 0;
    },
    {
        initialize: function () {

            this._domElement.appendChild(document.createElement('button'));

            function clickHandler(ev) {
                var clicks = ++this._numberClicks;
                document.getElementById("report").innerText = clicks;
            }
            this._domElement.querySelector('button').addEventListener("click", 
												    clickHandler.bind(this));
        }
});

WinJS.Class.mix(MyButton, WinJS.UI.DOMEventMixin);

var button = new MyButton(document.getElementById("div"));
button.initialize();;

WinJS.Binding.mixin을 사용하여 바인딩 기능 추가

사용자 정의 개체를 HTML 요소에 바인딩하려면 이 개체를 식별 가능하게 지정하여 속성이 바뀔 때 수신기에게 알릴 수 있도록 해야 합니다. WinJS.Binding.mixin은 이 기능을 제공합니다. 예를 보려면 복합 개체 바인딩 방법을 참조하세요.

 

 

표시:
© 2016 Microsoft