js引用外部js js的外部引入 _js的外部引入

文章插圖

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

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

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

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

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

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

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