熟悉WordPress開發(fā)的朋友很可能用過add_query_arg函數(shù)，他可以很方便的幫我們給一個(gè)URL添加新的查詢參數(shù)獲取新的URL。
隨著WordPress古滕堡編輯器的開發(fā)，WordPress把這個(gè)函數(shù)移植到了JavaScript語言中，改函數(shù)的JS版本名字叫addQueryArgs，是作為@wordpress/url 庫的一個(gè)函數(shù)發(fā)布的。今天通過一段代碼為大家演示一下改函數(shù)的使用方法。
首先我們需要把這個(gè)庫安裝到我們的項(xiàng)目依賴中。
npm install @wordpress/url --save然后我們就可以在項(xiàng)目中導(dǎo)入并使用addQueryArgs這個(gè)函數(shù)了。
import {addQueryArgs} from '@wordpress/url';下面是我們開發(fā)的 nuxt 項(xiàng)目中的一個(gè)方法，主要用來根據(jù)多個(gè)條件篩選數(shù)據(jù)。首先我們構(gòu)建了一個(gè)默認(rèn)參數(shù)數(shù)組，然后根據(jù)用戶點(diǎn)擊的篩選項(xiàng)，給這個(gè)數(shù)組添加不同的元素。最后，把這個(gè)參數(shù)數(shù)組傳入到addQueryArgs中，構(gòu)建一個(gè)URL來請(qǐng)求 Rest API 查詢數(shù)據(jù)。
fetchData() {
let args = {
'per_page' : this.limit,
'page' : this.page,
'categories' : '9,10,11,12,13',
'tax_relation': 'AND',
};
if (this.orderBy) {
args.orderby = this.orderBy;
}
if (this.type) {
args.huxing = this.type;
}
let exclude_cats = _.difference(_.rest(_.pluck(this.storeOptions, 'value')), [this.store]);
if (this.store) {
args.categories_exclude = exclude_cats;
}
if (this.level) {
args.tags = this.level;
}
return this.$api.get(addQueryArgs('/api/posts', args));
},可以看出，相對(duì)以前的使用JavaScript字符連接的方法，這種方法的代碼可讀性要好上很多，邏輯上也很清晰，非常方便后期維護(hù)。
除了本文介紹的addQueryArgs函數(shù)，@wordpress/url庫中還提供了一些用來處理URL的非常實(shí)用的函數(shù)，比如：getQueryArgs、getQueryString等等，有需要在前端項(xiàng)目中處理URL的朋友可以試用一下。
