12.2.3 외부 JavaScript 라이브러리 사용하기(Using external JavaScript libraries)

12.2.3 외부 JavaScript 라이브러리 사용하기(Using external JavaScript libraries)

extern 메커니즘은 네이티브 API에 타입 안전한 방식으로 접근할 수 있게 해줍니다. 이는 정의된 타입이 런타임에 존재한다고 가정하지만, 그 타입들이 어떻게 그리고 어디에 정의되는지는 전혀 가정하지 않습니다.

extern 클래스의 예로는 Haxe 표준 라이브러리의 jQuery 클래스가 있습니다. 예시를 위해 이 extern 클래스의 단순화된 버전을 제시합니다:

package js.jquery;
@:native("$") extern class JQuery {
    /**
        Creates DOM elements on the fly from the provided string of raw HTML.
        OR
        Accepts a string containing a CSS selector which is then used to match a set of elements.
        OR
        Binds a function to be executed when the DOM has finished loading.
    **/
    @:selfCall
    @:overload(function(element:js.html.Element):Void { })
    @:overload(function(selection:js.jquery.JQuery):Void { })
    @:overload(function(callback:haxe.Constraints.Function):Void { })
    @:overload(function(selector:String, ?context:haxe.extern.EitherTypeElement, js.jquery.JQuery>):Void { })
    public function new():Void;

    /**
        Adds the specified class(es) to each element in the set of matched elements.
    **/
    @:overload(function(_function:Int -> String -> String):js.jquery.JQuery { })
    public function addClass(className:String):js.jquery.JQuery;

    /**
        Get the HTML contents of the first element in the set of matched elements.
        OR
        Set the HTML contents of each element in the set of matched elements.
    **/
    @:overload(function(htmlString:String):js.jquery.JQuery { })
    @:overload(function(_function:Int -> String -> String):js.jquery.JQuery { })
    public function html():String;
}

@:overload 메타데이터를 사용하면 함수를 오버로딩하여 서로 다른 타입의 인자와 반환값을 받아들이게 할 수 있다는 점을 참고하세요. 함수 오버로딩은 extern에서만 동작합니다.

이 extern을 사용하면 jQuery를 다음과 같이 사용할 수 있습니다:

import js.jquery.*;
..
new JQuery("#my-div").addClass("brand-success").html("haxe is great!");
..

extern 클래스의 패키지와 클래스 이름은 외부 라이브러리에 정의된 것과 같아야 합니다. 그렇지 않은 경우 @:native를 사용해 클래스의 경로를 다시 작성하세요.

package my.application.media;

@:native('external.library.media.video')
extern class Video {
..

일부 JavaScript 라이브러리는 new 키워드 없이 클래스를 인스턴스화하는 것을 선호합니다. Haxe 컴파일러가 클래스를 사용할 때 new 키워드를 출력하지 않게 하려면, 그 생성자에 @:selfCall 메타데이터를 붙일 수 있습니다. 예를 들어, 위의 jQuery extern 클래스를 인스턴스화할 때 new JQuery()는 new $() 대신 $()로 출력됩니다. @:selfCall 메타데이터는 메서드에도 붙일 수 있습니다. 이 경우 메서드는 다음 예시처럼 객체에 대한 직접 호출로 해석됩니다:

extern class Functor {
    public function new():Void;
    @:selfCall function call():Void;
}

class Test {
    static function main() {
        var f = new Functor();
        f.call(); // will be outputted as `f();`
    }
}

extern 외에도, Typedef는 JavaScript 타입에 이름을 붙이거나(또는 별칭을 만들거나) 하는 또 다른 훌륭한 방법이 될 수 있습니다. typedef와 extern의 주요 차이점은 typedef는 덕 타이핑(duck-typed)이지만 extern은 그렇지 않다는 것입니다. typedef는 점(point, {x:Float, y:Float}) 같은 일반적인 데이터 구조에 적합합니다. 함수 인자에 점 구조 typedef를 사용하면 외부 JavaScript 함수가 Haxe나 다른 JavaScript 라이브러리에서 온 점 클래스 인스턴스를 받아들일 수 있습니다. JSON 객체를 타이핑하는 데에도 유용합니다.

더 이상 사용되지 않음(Deprecated): Haxe 4.0.0부터: jQuery와 SWFObject extern이 표준 라이브러리에서 제거되었습니다. 호환성을 위해 hx3compat 라이브러리에서 사용할 수 있습니다. Haxe 3 호환성(Haxe 3 Compatibility)을 참조하세요.

다른 인기 네이티브 라이브러리를 위한 많은 extern이 Haxelib 라이브러리에서 사용 가능합니다. 목록을 보려면 extern 태그를 확인하세요.

출처: Using external JavaScript libraries

더 알아보기

• ECMAScript 6 클래스 생성(ECMAScript 6 class generation)