js如何引用以及使用

• 方式一 引入文件中指定的export方法，以 ,分割
  使用方式腳本塊：方法名()
  使用方式模板塊：方法名() [須在method進(jìn)行注冊]

// 引用
import { isEmpty, isNotEmpty } from "@/common/TextUtils.js"
// 使用
isEmpty('文字')

模板快使用須在method進(jìn)行注冊

// 腳本引用
import { isEmpty, isNotEmpty } from "@/common/TextUtils.js"
// 注冊
methods: {
    isNotEmpty
}
// 模板快使用
isNotEmpty('文字')

• 方式二 引入全部方法 , 其中Toast.js中有多個export方法,把Toast里所有export的方法導(dǎo)入
  使用方式：xxx.方法名()

// 引用
import * as Toast from "@/common/Toast.js"
// 使用
Toast.showLong('toast')

• 方式三 全局引用，和方式一一樣以 ,分割，然后給全局變量賦值 [ main.js文件]
  使用方式腳本塊：this.全局變量名()
  使用方式模板塊：全局變量名()

// 引入[ 寫入到main.js文件中 ]
import { isEmpty } from "@/common/TextUtils.js"
// 賦值[ 寫入到main.js文件中 ]
Vue.prototype.isEmpty = isEmpty
// script 腳本塊使用
this.isEmpty('文字')
// template 模板塊也可使用
isEmpty()  或  this.isEmpty()  都可

示例

• TextUtils.js

function isEmpty(str) {
    return str === undefined || str === null || str === ''
}

function isNotEmpty(str) {
    return !isEmpty(str)
}

export {
    isEmpty,
    isNotEmpty
}

• Toast.js

// js文件引用js文件
import {isEmpty} from '@/common/TextUtils.js'

function show(text, duration) {

    if (isEmpty(text))
        text = ''

    if (isEmpty(duration))
        duration = 2000

    uni.showToast({
        title: text,
        icon: 'none',
        duration: duration
    })
}

function showShort(text) {
    show(text, 2000)
}

function showLong(text) {
    show(text, 3500)
}

export {
    show,
    showShort,
    showLong
}

• 腳本塊script引用并使用

<script>
    import { isEmpty } from "@/common/TextUtils.js"
    import * as Toast from "@/common/Toast.js"
    export default {
        ... ,
        methods: {
            TextUtilJsText() {
                console.log(isEmpty())
                console.log(isEmpty('文字'))
                console.log(isNotEmpty('文字'))
                console.log("全局引用" + this.isEmpty("是否為空"))
            },
            ToastText() {
                Toast.showLong('toast')
            },
            // 注冊一下供模板快使用
            isNotEmpty
        }
    }
</script>

• 全局引用main.js

import { isEmpty } from "@/common/TextUtils.js"
Vue.prototype.isEmpty = isEmpty

• 模板塊template使用

<text class="title" @click="TextUtilJsText">{{isNotEmpty('引用的js在method進(jìn)行注冊')}}</text>
<text class="title" @click="TextUtilJsText">{{isEmpty('全局方法')}}</text>