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

首页 » 实用教程 » WordPress使用 add_query_arg 函数的JS版addQueryArgs简化JS URL 构建
所属分类:实用教程
发布时间:2021-11-17
浏览次数:2,571 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视频播放器插件 Easy Video Player

WordPress建站的过程中,我们经常需要在页面或文章中嵌入一段视频,这篇WordPress教程中,我们就向 […]

WordPress定时发布——让搜索引擎和访客爱上你

预知未来的魅力 新浪微博的皮皮时光机很受欢迎,你是个微博funs,想吸引人气,又不想一次把肚子里的墨水吐干净, […]

WordPress 使用 Classic Widgets 插件恢复经典小工具

自 WordPress 5.8 正式版发布 以后,后台的小工具就默认是块编辑器的界面样式,很多老用户还没有来得 […]