kotlin 개발Kotlin 전단 개발 자 대상

kotlin 개발
나 는 독자 들 이 이미 Kotlin 언어 에 익숙 하 다 고 생각한다.이 사이트 에 광 고 를 게재 하 다.
JVM,Android,브 라 우 저의 정적 형식의 프로 그래 밍 언어 와 자바™100%상호작용 가능
-Kotlin 사이트 의 제목
Kotlin 은 처음으로 안 드 로 이 드 생태계 에 침투 하여 그곳 에서 광범 위 하 게 사용 되 었 다.스프링 부 트 를 통 해 JVM 에서 도 증가 하 는 추세 다.최신 1.1 버 전부터 Kotlin 은 생산 급 Kotlin 에서 JavaScript 번역 기 를 제공 했다.이 글 은 후 자 를 전문 적 으로 겨냥 하고 있다.
솔직히 말 해서,Kotlin 을 JavaScript 로 변환 하 는 과정 과 관련 된 가장 큰 문 제 는 문서 가 서버 쪽 만 을 위 한 구축 도구,Maven 과 Gradle 처럼,또는 더 나 쁜 것 은 IntelliJ IDEA IDE 라 는 것 입 니 다.이러한 것들 은 백 엔 드 구동 프로젝트 나 원형 에 매우 효과 가 있 지만 npm,Grunt/Gulp,yarn 등 을 바탕 으로 하 는 전단 개발 자 들 에 게 는 도움 이 되 지 않 습 니 다.
이 문 제 를 해결 하기 위해 Kotlin 을 사용 하여 간단 한 Google Maps 를 만 듭 니 다.
빌 드 파일 관리
이 절 은 npm install-g grunt-cli 를 통 해 Grunt 명령 행 을 설치 했다 고 가정 합 니 다.kotlin 패키지 가 설치 되 어 있 고 kotlin 컴 파 일 러 가 경로 에 있 습 니 다.
저 는 개인 적 으로 Homebrew-brew install kotlin 을 사용 합 니 다.
빌 드 파일 은 다음 과 같 습 니 다.
Gruntfile.js

module.exports=function(grunt){

    grunt.initConfig({
        clean:'dist/**',
        exec:{
            cmd:'kotlinc-js src -output dist/script.js' (1)
        },
        copy:{ (2)
            files:{
                expand:true,
                flatten:true,
                src:['src/**/*.html','src/**/*.css'],
                dest:'dist'
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-exec');

    grunt.registerTask('default',['exec','copy']);
};

폴 더 에서 찾 은 모든 Kotlin 파일 을 하나의 JavaScript 파일 로 변환

CSS 와 HTML 파일 을src폴 더 로 복사

Kotlin 에서 Google Maps API 를 연결 합 니 다.
다음 코드 세그먼트 에 서 는 Google Maps API 를 사용 하여 Map 대상 을 만 듭 니 다.이 대상 은 특정한dist요소 에 표 시 됩 니 다.

varelement=document.getElementById('map');
newgoogle.maps.Map(element,{
	center:{lat:46.2050836,lng:6.1090691},
    zoom:8
});

TypeScript 에서 처럼 마른 Kotlin 어댑터 가 있어 야 원본 JavaScript API 를 연결 할 수 있 습 니 다.TypeScript 와 달리 이러한 어댑터 의 기 존 저장 소 는 존재 하지 않 습 니 다.다음은 유치 한 초고.

externalclassMap(element:Element?,options:Json?)

외부 키 워드 는 컴 파일 러 기능 주체 가 다른 파일 이나 라 이브 러 리 에서 이 루어 졌 음 을 알려 주 는 데 사 용 됩 니 다.
첫 번 째 문 제 는 이름 충돌 입 니 다.div기 존의 Kotlin 클래스 입 니 다.기본적으로 가 져 왔 습 니 다.다행히도Map주석 은 변환 할 때 이름 을 바 꿀 수 있 습 니 다.
gmaps.kt

@JsName("Map")
externalclassGoogleMap(element:Element?,options:Json?)

두 번 째 문 제 는 원본 API 가 이름 공간 에 있 기 때 문 입 니 다.이 대상 은@JsName이 아니 라Map입 니 다.이전 주석 은 허용 되 지 않 지만 다른 주석 조합 은 문 제 를 해결 할 수 있 습 니 다.
/google/maps/gmaps.kt

@JsModule("google")
@JsQualifier("maps")
@JsName("Map")
externalclassGoogleMap(element:Element?,options:Json?)

이것 은 여전히 통 하지 않 습 니 다.-심지어 컴 파일 할 수 없습니다.google.maps.Map클래스 에 적용 할 수 없 기 때 문 입 니 다.최종 작업 코드 는:
/google/maps/gmaps.kt

@file:JsModule("google")
@file:JsQualifier("maps")
@file:JsNonModule

packagegoogle.maps

@JsName("Map")
externalclassGoogleMap(element:Element?,options:Json?)

Google 지도 호출
위의 코드 를 호출 하 는 것 은 매우 간단 하지만 구조 함수 의 두 번 째 매개 변 수 는@JsQualifier유형 입 니 다.물론 Kotlin 을 사용 하 는 강 한 타 입 코드 와 는 크게 다르다.이 문 제 를 해결 하기 위해 서 실제 유형 을 만 듭 니 다.

internalclassMapOptions(valcenter:LatitudeLongitude,valzoom:Byte)
internalclassLatitudeLongitude(vallatitude:Double,vallongitude:Double)

Kotlin 의 확장 기능-상 자 를 열 때 사용 하 는Json함수 로 JSON 으로 정렬 할 수 있 습 니 다.

internalfunLatitudeLongitude.toJson()=json("lat"tolatitude,"lng"tolongitude)
internalfunMapOptions.toJson()=json("center"tocenter.toJson(),"zoom"tozoom)

이렇게 하면 다음 과 같은 내용 을 작성 할 수 있 습 니 다.

funinitMap(){
    valdiv=document.getElementById("map")
    vallatLng=LatitudeLongitude(latitude=-34.397,longitude=150.644)
    valoptions=MapOptions(center=latLng,zoom=8)
    GoogleMap(element=div,options=options.toJson())
}

세분 화
우 리 는 이 점 에서 멈 출 수 있 고,이미 성과 가 있 음 을 느 낄 수 있다.하지만 Kotlin 은 더 많은 것 을 허용 합 니 다.
헛 된 결 과 는 JSON 을 맵 구조 함수 로 직렬 화 하 는 것 입 니 다.

internalclassKotlinGoogleMap(element:Element?,options:MapOptions):GoogleMap(element,options.toJson())

KotlinGoogleMap(element=div,options=options)

한층 더 완벽 하 게 하 다.
'도 메 인'은 DSL 로 작성 하기에 매우 적합 합 니 다."API"를 업데이트 합 니 다:

externalopenclassGoogleMap(element:Element?){
    funsetOptions(options:Json)
}

internalclassMapOptions{
    lateinitvarcenter:LatitudeLongitude
    varzoom:Byte=1
    funcenter(init:LatitudeLongitude.()->Unit){
        center=LatitudeLongitude().apply(init)
    }
    funtoJson()=json("center"tocenter.toJson(),"zoom"tozoom)
}

internalclassLatitudeLongitude(){
    varlatitude:Double=0.0
    varlongitude:Double=0.0
    funtoJson()=json("lat"tolatitude,"lng"tolongitude)
}

internalclassKotlinGoogleMap(element:Element?):GoogleMap(element){
    funoptions(init:MapOptions.()->Unit){
        valoptions=MapOptions().apply(init)
        setOptions(options=options.toJson())
    }
}

internalfunkotlinGoogleMap(element:Element?,init:KotlinGoogleMap.()->Unit)=KotlinGoogleMap(element).apply(init)

클 라 이언 트 코드 는 다음 과 같이 쓸 수 있 습 니 다:

funinitMap(){
    valdiv=document.getElementById("map")
    kotlinGoogleMap(div){
        options{
            zoom=6
            center{
                latitude=46.2050836
                longitude=6.1090691
            }
        }
    }
}

결론.
문서 가 매우 간결 하지만 자 바스 크 립 트 생태 시스템 만 사용 하여 Kotlin 코드 를 자 바스 크 립 트 로 변환 할 수 있 습 니 다.물론 다리 가 기 존의 도서관 을 연결 하 는 것 은 번 거 로 운 일이 지만 이것 은 단지 노력 일 뿐이다.왜냐하면 지역 사회 가 그들의 노력 을 공유 하기 시 작 했 기 때문이다.다른 한편,Kotlin 을 서버 에서 사용 하 는 좋 은 언어 로 만 드 는 똑 같은 기능(예 를 들 어 DSL 작성)도 전단 에서 이득 을 볼 수 있 습 니 다.
이 글 의 전체 소스 코드 는 Github 에서 찾 을 수 있다.
번역https://blog.frankel.ch/kotlin-front-end-developers/
kotlin 개발