使用 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,就可以试试这些函数。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。