kotlin开发_Kotlin面向前端开发人员

kotlin开发

我认为读者已经熟悉Kotlin语言。 从该网站刊登广告：

JVM，Android和浏览器的静态类型的编程语言与Java™100％可互操作

— Kotlin网站上的标题

Kotlin首次渗透到Android生态系统，并在那里得到了广泛的采用。 通过Spring Boot，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']);
};

1. 将src文件夹中找到的所有Kotlin文件转换为单个JavaScript文件
2. 将CSS和HTML文件复制到dist文件夹

在Kotlin中桥接Google Maps API

以下代码段使用Google Maps API创建一个Map对象，该对象将显示在特定的div元素上：

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?)

external关键字用于告诉编译器功能主体是在另一个文件或库中实现的。

第一个问题来自名称冲突： Map是现有的Kotlin类，默认情况下已导入。 幸运的是， @JsName批注允许在转换时转换名称。

gmaps.kt

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

发生第二个问题是因为原始API在名称空间中：该对象不是Map ，而是google.maps.Map 。 先前的注释不允许点，但其他注释的组合可以解决问题：

/google/maps/gmaps.kt

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

这仍然行不通-甚至无法编译，因为@JsQualifier无法应用于类。 最终的工作代码是：

/google/maps/gmaps.kt

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

packagegoogle.maps

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

呼叫Google地图

调用上面的代码非常简单，但是请注意，构造函数的第二个参数是Json类型。 当然，这与使用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序列化移动到Map构造函数：

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
            }
        }
    }
}

结论

尽管文档非常简洁，但可以仅使用JavaScript生态系统将Kotlin代码转换为JavaScript。 诚然，桥接现有图书馆是一件繁琐的事，但这只是一次努力，因为社区开始分享他们的努力。 另一方面，使Kotlin成为在服务器端使用的一种很棒的语言的相同功能（ 例如编写DSL）也可以在前端受益。

这篇文章的完整源代码可以在Github上找到。

翻译自: https://blog.frankel.ch/kotlin-front-end-developers/

kotlin开发