Kotlin for Vue.js
栏目: JavaScript · 发布时间: 7年前
内容简介:Kotlin for Vue.js
基于 JVM 的编程语言 Kotlin
Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发。
其主要设计目标:
创建一种兼容 Java 的语言
让它比 Java 更安全,能够静态检测常见的陷阱。如:引用空指针
让它比 Java 更简洁,通过支持 variable type inference,higher-order functions (closures),extension functions,mixins and first-class delegation 等实现。
让它比最成熟的竞争对手 Scala
语言更加简单。
Kotlin for JavaScript
Kotlin1.1版本正式加入了对JavaScript的支持,也就是说我们可以Kotlin进行网页开发,并且Kotlin也支持了与JavaScript的相互操作。众所周知,JavaScript是动态类型的语言,而相对来说,Kotlin和Java都是静态类型的。同时,两者在编译运行也很不一样,Java更偏向与编译型语言,而JavaScript更偏向于解释型语言。所以,在Kotlin完美兼容Java的同时,增加了JavaScript的支持,让人好奇不已。接下来,我们就来谈谈Kotlin是如何支持JavaScript,以及它的一个简单实现。
<!-- 优先加载kotlin.js--> <script type="text/javascript" src="out/production/KotlinJsSample/lib/kotlin.js"></script>
在Kotlin代码中,如果想要调用JavaScript代码,基本上有两种方式: js() 内联模式和头文件模式。
js()内联JavaScript
我们可以使用 js(“…”) 函数将一些JavaScript代码直接嵌入到Kotlin代码中。但是,有一点要求,js函数的参数必须是字符串常量。
举个例子:
//Main.kt fun main(args: Array<String>) { val message = "Hello JavaScript" js("console.log(message)") }
对于js()函数里的参数,Kotlin编译器选择了不处理,直接输出。所以,这也就说明了为什么js()函数为什么必须是要常量的原因了。
external修饰符定义头文件
如果你用过内联JavaScript的方式,你就会知道,真的很鸡肋!做点log的工作,还能干嘛???
所以,Kotlin又搞了一个强大一些的方式,通过 external 修饰符定义JavaScript文件头的方式进行引入调用。
举个例子:
//Mian.kt external fun alert(message: Any?) fun main(args: Array<String>) { val message = "Hello JavaScript" alert(message) }
这种方式下,当你在Kotlin中要使用JavaScript代码之前,必须加上相关的JavaScript头文件声明。这么做的目的,就是为了让Kotlin知道相关JavaScript函数的存在,以保证可以正常的调用到,然后在Kotlin编译器环节,直接使用到JavaScript代码。看上去挺麻烦的,但是总的来说,比内联来的强大。
JavaScript中调用Kotlin
Kotlin编译器会将原生的Kotlin代码转换成相应的JavaScript代码,并且对于原先Kotlin中定义的函数名和变量都不会改变,这意味着在JavaScript中我们可以自由的使用相关的函数和属性。
Kotlin for Vue.js
长话短说,前面介绍这么多,现在直接进入正题了。
针对Kotlin语言,需要先建立Vue的头文件声明,让Kotlin知道Vue的函数存在,大部分实现如下:
// Vue.kt /** * Created by Zyao89 on 2017/6/2. */ import org.w3c.dom.HTMLElement @JsName("Vue") external class Vue(options: Any?){ var paramAttributes: Array<Any> var template: String var replace: Boolean var created: VueCallback var beforeCompile: VueCallback var compiled: VueCallback var ready: VueCallback var attached: VueCallback var detached: VueCallback var beforeDestroy: VueCallback var destroyed: VueCallback var inherit: Boolean var mixins: Array<Any> var name: String var `$el`: HTMLElement var `$parent`: Vue var `$root`: Vue fun`$watch`(expression:String, callback:VueCallback, deep:Boolean?, immediate:Boolean?):Unit fun`$get`(expressopn:String): dynamic fun`$set`(keypath:String, value:Any): Unit fun`$add`(keypath:String, value:Any): Unit fun`$delete`(keypath:String):Unit fun`$eval`(expression:String): dynamic fun`$interpolate`(templateString:String): String fun`$log`(keypath:String?): Unit fun`$dispatch`(evant:String, args:Any?): Vue fun`$broadcast`(evant:String, args:Any?): Vue fun`$emit`(event:String, args:Any?): Vue fun`$on`(event:String, callback:Any): Vue fun`$once`(event:String, callback:Any): Vue fun`$off`(event:String?, callback:Any?): Vue fun`$appendTo`(element:Any, callback:Any?): Vue fun`$prependTo`(element:Any, callback:Any?): Vue fun`$before`(element:Any, callback:Any?): Vue fun`$after`(element:Any, callback:Any?): Vue fun`$remove`(callback:Any?): Vue fun`$mount`(element:Any?): Vue fun`$destroy`(remove:Boolean?): Unit fun`$compile`(element:HTMLElement): VueCallback fun`$addChild`(options:Any,constructor:Any?): Vue fun _init(options:Any): Unit fun _cleanup(): Unit companion object { var config: VueConfig fun extend(options:Any): Vue fun directive(id:String, definition:Any?): Unit fun filter(id:String, definition:FilterCallback?): Unit fun component(id:String, definition:Vue): Unit fun transition(id:String, definition:Any?): Unit fun partial(id:String, definition:String?): Unit fun nextTick(callback:Any): Unit fun require(module:String): Unit fun use(plugin:Any, args:Any?): Vue } var `$data`: dynamic } @JsName("config") external class VueConfig{ var prefix: String var debug: Boolean var silent: Boolean var proto: Boolean var interpolate: Boolean var async: Boolean var delimiters: Array<String> } interface ValueCallback{ fun apply(newValue:Any, oldValue:Any): Unit } interface VueCallback{ fun apply(): Unit } interface FilterCallback{ fun apply(value:Any, begin:Any?, end:Any?): Any }
Kotlin调用时,是从 main
函数开始的,先创建一个简单的Vue对象,demo如下:
// Hello.kt var vue:Vue? = null fun main(args:Array<String>) { vue = Vue(json( Pair("el", "#app"), Pair("data", json( Pair("message", "ABCDEF123456789") ) ), Pair("methods", json( Pair("reverseMessage", { change() }) )) )) } fun change() { vue?.let { console.log(it.`$data`?.message) it.`$data`?.message = it.`$data`.message.split("").reverse().join("") } }
最后就是 index.html
的页面展示了,如下:
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Test</title> </head> <body> <h1id="test"></h1> <divid="app"> {{ message }} <buttonv-on:click="reverseMessage">逆转消息</button> </div> <aclass="cur STRING_BASE"href="javascript:KotlinJS.haha()"><strong>我直接调用Kotlin方法</strong></a> </body> <scriptsrc="js/app/lib/webjars/vue/2.1.3/vue.min.js"></script> <scriptsrc="js/app/lib/kotlin.js"></script> <scriptsrc="js/app/KotlinJS.js"></script> </html>
总结
最后,声明一下这只是一个实验性的Demo,具体项目开发还需要深入研究,多多交流。
GitHub源码: zyao89/KotlinJS-Vue
作者:Zyao89;转载请保留此行,谢谢;
个人博客:http://zyao89.me
以上所述就是小编给大家介绍的《Kotlin for Vue.js》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Game Programming Patterns
Robert Nystrom / Genever Benning / 2014-11-2 / USD 39.95
The biggest challenge facing many game programmers is completing their game. Most game projects fizzle out, overwhelmed by the complexity of their own code. Game Programming Patterns tackles that exac......一起来看看 《Game Programming Patterns》 这本书的介绍吧!