js外部引用的方法解說「js外部引用找不到方法」

在Vue項目中我們經常會將一些功能相似的且又常用的方法封裝在同一個js文件中,這樣可以方便項目的修改、維護、升級和代碼復用。就比如我們常見的註冊功能,就需要大量的校驗工作。為了防止用戶誤操作、填寫錯誤數據或者惡意提交數據等現象的發生,我們通常會在前端對用戶輸入的數據進行必要的校驗以確保數據的有效性。效驗是一個應用很頻繁的的功能,為了方便我們通常將其整合到一個js中方便使用時直接調用。

Vue實戰083:幾種常用的外部JS文件定義和引用方法詳解

export導出函數

這裡我們定義一個validation.js文件用來定義常用的校驗方法,為了讓該文件能被其他的Vue組件所調用我們需要使用export命令將這個函數拋出,這時候才能在組件中通過import命令引入外部js定義的函數。導出函數可以有多種定義方式,下面是常見的3種寫法。如果不想在最後進行導出聲明,可以在定義函數的時候就用export關鍵詞進行修飾。

Vue實戰083:幾種常用的外部JS文件定義和引用方法詳解

module.exports導出函數

如果你不喜歡這種我們還可以使用module.exports來導出函數,module.exports不同在於它返回的是模塊對象本身(在javascript裡面是一個類),而exports返回的是模塊函數。module.exports 直接提供了暴露接口的方法,不需要再通過export命令將這個函數拋出,從代碼上可以看到module.exports更加簡潔、方便。

Vue實戰083:幾種常用的外部JS文件定義和引用方法詳解

函數的引用

在Vue中函數引入有兩種方式分別是 import和require,具體的區別和使用可以參考文章【Vue實戰060:require與import的區別和使用 】。這裡我們直接來引入外部的js文件,然後在mounted中進行調用測試功能是否被實現。

Vue實戰083:幾種常用的外部JS文件定義和引用方法詳解

總結:

個人比較喜歡使用module.exports來導出函數,import來導入函數。用module.exports最主要就是寫法簡潔、可以避免定義那麼多的exports。import加載模板時可以根據模塊的內容、單個接口、接口、默認值等多種方式載入,實現按需加載模塊模塊。同時可以在編譯需要時引入模塊屬性,提高代碼的性能。

Vue實戰083:幾種常用的外部JS文件定義和引用方法詳解

以上內容是小編給大家分享的【Vue實戰083:幾種常用的外部JS文件定義和引用方法詳解】,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。更多Vue實戰技巧可以參考以下專欄:

為了方便學習,這裡還是附上源碼:

module.exports = {
  Phone (value) {
    let reg = /^[1][3, 4, 5, 6, 7, 8][0-9]{9}$/
    return reg.test(value)
  },
  Email (value) {
    let reg = /^[A-Za-z0-9u4e00-u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
    return reg.test(value)
  },
  IdCard (value) {
    let reg = /^[1-9]d{5}(18|19|20|(3d))d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/
    return reg.test(value)
  }
}
//js引入方法
import { Phone, Email, IdCard } from '../../script/validation'
import { Phone, Email, IdCard } from '@/script/validation' 
var funs = require('../../script/validation')
var funs = require('@/script/validation')
import funs from '@/script/validation'    //module.exports導出
 
//js使用方法
mounted (){
    console.log(Phone('18564153817'))       // import 引入
    console.log(funs.Phone('18564153817'))  //require 引入
}

原創文章,作者:投稿專員,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/209367.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
投稿專員的頭像投稿專員
上一篇 2024-12-08 15:35
下一篇 2024-12-08 15:35

相關推薦

發表回復

登錄後才能評論