使用 add_query_arg 函数的JS版addQueryArgs简化JS URL 构建

熟悉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微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。