QML 调用外部js文件中的函数

qml除了可以在自己内部定义函数并调用之外，还可以调用js中的函数去处理数据；
例如在开发中，甲是qml端开发者，乙是js端开发者；乙就可以在.js文件内编写函数，供甲调用，这样甲就可以更加专注于ui页面的开发了。

或者说，如果都是自己在开发，那么就可以将qml端编写的函数，提取出来，放到.js文件中，这样就更加方便管理和美观了。

基于此，首先新建一个.js文件，并编写好js函数：

callJs.js

function func() {
    print("this is first js func.")
}

function funcReutn() {
    return "return is a str"
}

// 两数相加
function funcAdd(a, b) {
    return a + b;
}


// JavaScript 冒泡排序实现
function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // ES6解构交换
            }
        }
    }
    return arr;
}

在qml端导入.js文件
注意路径问题，这里新建的callJs.js与mian.qml是同级路径，导入时就可以直接写上文件名，不需要加上路径；

import "callJs.js" as MyJs

之后就可以通过MyJs直接调用函数了

/// qml调用js函数
Window {
    id: root
    visible: true
    width: 1280
    height: 800
    title: qsTr("Hello World")

    Component.onCompleted: {
        MyJs.func()
        console.log(MyJs.funcAdd(10, 101))
        
        let original = [5, 3, 8, 1, 2];
        const sorted = MyJs.bubbleSort(original.slice()); // 避免修改原数组
        console.log("排序结果:", sorted);
    }
}

运行输出截图：

完！