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

首页 » 实用教程 » WordPress使用 add_query_arg 函数的JS版addQueryArgs简化JS URL 构建
所属分类:实用教程
发布时间:2021-11-17
浏览次数:2,387 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的朋友可以试用一下。

相关阅读

WordPress中国加速插件:WP Acceleration for China

众所周知的一些原因,最近很长一段时间在国内使用WordPress建站会发现打开非常慢,其中包括google的资 […]

WP建站优化加速技巧:禁用 WordPress 的 Emoji 功能

使用WordPress建站完成以后,浏览网站时速度很慢,查看源代码发现有一大段莫名的代码,如下图: 这是Wor […]

为WordPress启用SVG支持,允许上传SVG图像

SVG作为一种通用的矢量图格式,已经被主流浏览器支持,目前,WordPress还没有内置SVG支持,所以用户无 […]