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

首页 » 实用教程 » WordPress使用 add_query_arg 函数的JS版addQueryArgs简化JS URL 构建
所属分类:实用教程
发布时间:2021-11-17
浏览次数:169 views

熟悉WordPress开发的朋友很可能用过add_query_arg函数,他可以很方便的帮我们给一个URL添加新的查询参数获取新的URL。

随着WordPress古滕堡编辑器的开发,WordPress把这个函数移植到了JavaScript语言中,改函数的JS版本名字叫addQueryArgs,是作为@wordpress/url 库的一个函数发布的。今天通过一段代码为大家演示一下改函数的使用方法。

首先我们需要把这个库安装到我们的项目依赖中。

npm install @wordpress/url --save

然后我们就可以在项目中导入并使用addQueryArgs这个函数了。

import {addQueryArgs} from '@wordpress/url';

下面是我们开发的 nuxt 项目中的一个方法,主要用来根据多个条件筛选数据。首先我们构建了一个默认参数数组,然后根据用户点击的筛选项,给这个数组添加不同的元素。最后,把这个参数数组传入到addQueryArgs中,构建一个URL来请求 Rest API 查询数据。

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字符连接的方法,这种方法的代码可读性要好上很多,逻辑上也很清晰,非常方便后期维护。

除了本文介绍的addQueryArgs函数,@wordpress/url库中还提供了一些用来处理URL的非常实用的函数,比如:getQueryArgsgetQueryString等等,有需要在前端项目中处理URL的朋友可以试用一下。

相关阅读

WP-China-Yes 解决国内访问WordPress官网慢的最有效方法

插件介绍: 因为WordPress官方的服务器都在国外,所以中国大陆的用户在访问由WordPress官方提供的 […]

WordPress纯代码实现相关文章的几种方法

WordPress有很多实现相关文章功能的插件,插件的优点是配置简单,但是可能会对网站的速度造成一些小的影响, […]

禁用 WordPress网站 的 JSON REST API

WordPress 4.4 默认集成了备受关注的 JSON REST API,这个对于开发者来说,无疑是非常有 […]