使用 add_query_arg 函数的JS版addQueryArgs简化JS URL 构建
文 / @WordPress主题
熟悉WordPress开发的朋友都应该知道——addQueryArgs函数
我是一名熟悉WordPress开发的工程师,经常使用add_query_arg函数。它可以轻松地为URL添加新查询参数以获取新的URL。现在,随着WordPress古滕堡编辑器的开发,WordPress还将此函数移植到了JavaScript语言中。改函数的JS版本名字叫addQueryArgs,是作为@wordpress/url库的一个函数发布的。今天,我将为您演示如何使用这个函数。
如何使用addQueryArgs函数
首先,我们需要在项目中安装@wordpress/url库。
npm install @wordpress/url --save
然后,我们可以在项目中导入并使用addQueryArgs函数。
import { addQueryArgs } from '@wordpress/url';
下面是我们在nuxt项目中的一个方法,用于根据多个条件筛选数据。我们首先构建了一个默认参数数组,然后根据用户点击的筛选项,给这个数组添加不同的元素。最后,将这个参数数组传入到addQueryArgs中,构建一个URL来请求RestAPI查询数据。
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));
},
可以看出,相对以前的使用JavaScript字符连接的方法,这种方法的代码可读性要好上很多,逻辑上也很清晰,非常方便后期维护。
其他非常实用的@wordpress/url库函数
除了本文介绍的addQueryArgs函数,@wordpress/url库中还提供了一些用来处理URL的非常实用的函数,如getQueryArgs、getQueryString等。如果您需要在前端项目中处理URL,就可以试试这些函数。
相关文章
-
如何创建WordPress古腾堡编辑器的区块(PHP+原生JS) 2024-01-10 01:01:06
-
搭建一个WordPress网站需要多少成本 2023-11-06 00:09:51
-
Symlink介绍(附:如何使用Symlink进行WordPress开发) 2023-11-05 23:38:32
-
让WordPress实现数据库同步的插件:HyperDB 2023-10-24 23:40:49
-
allegro电商平台值得做吗(附:2023年Allegro注册流程指南) 2023-10-08 21:53:39
-
印度跨境电商平台有哪些(附:印度跨境电商做什么产品好) 2023-10-08 21:34:23
-
跨境电商必看的几大海外二手电商平台 2023-10-08 18:04:42
-
WordPress同城互联网产品解决方案:UBASE 2023-10-03 16:40:39
-
WordPress网站的安全插件:wordfence 2023-09-14 09:25:18
-
WordPress 6.3 支持在手动更新插件和主题失败后回滚旧版本 2023-08-28 16:58:45