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

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

相关阅读

利用Robots.txt优化你的WordPress站点

很多建站新手对robots.txt文件的重要作用不是很清楚,利用这篇文章普及一下WordPress站点robo […]

WordPress 登录才能查看评论模块

WordPress正常可以设置登录发表评论,但不登录也可以正常看到留言评论内容,最近有用户说接到通知个人备案的 […]

WP建站:后台文章列表添加排序选项

下面的代码可以在 WordPress 后台文章列表添加排序选项下拉筛选框,支持多种方式排序。 原文链接: ht […]