成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

分享一個(gè)好用的函數(shù)吧，將js中的對(duì)象轉(zhuǎn)成url參數(shù)

avwu / 1699人閱讀

摘要：這個(gè)函數(shù)呢是自己在寫(xiě)基于管理后臺(tái)時(shí)用到的，下面列出來(lái)兩種使用方式最普通的，封裝一個(gè)函數(shù)對(duì)象轉(zhuǎn)參數(shù)去掉為空的參數(shù)在組件化開(kāi)發(fā)時(shí)，我是這樣寫(xiě)的寫(xiě)了一個(gè)工具文件，將其作為工具包引入的，并將其附給原型，這樣在每個(gè)組件中就可以使用來(lái)使用里面的一些工具

這個(gè)函數(shù)呢是自己在寫(xiě)基于Vue+ElementUI管理后臺(tái)時(shí)用到的,，下面列出來(lái)兩種使用方式：

最普通的，封裝一個(gè)js函數(shù) 
 /**
   * 對(duì)象轉(zhuǎn)url參數(shù)
   * @param {*} data
   * @param {*} isPrefix
   */
 queryParams (data, isPrefix) {
    isPrefix = isPrefix ? isPrefix : false
    let prefix = isPrefix ? "?" : ""
    let _result = []
    for (let key in data) {
      let value = data[key]
      // 去掉為空的參數(shù)
      if (["", undefined, null].includes(value)) {
        continue
      }
      if (value.constructor === Array) {
        value.forEach(_value => {
          _result.push(encodeURIComponent(key) + "[]=" + encodeURIComponent(_value))
        })
      } else {
        _result.push(encodeURIComponent(key) + "=" + encodeURIComponent(value))
      }
    }

    return _result.length ? prefix + _result.join("&") : ""
  }
在Vue組件化開(kāi)發(fā)時(shí)，我是這樣寫(xiě)的 
寫(xiě)了一個(gè)工具文件utils.js，將其作為工具包引入Vue的main.js，并將其附給Vue原型，這樣在每個(gè)組件中就可以使用this.$utils來(lái)使用里面的一些工具函數(shù)了
utils.js文件 
const utils = {
  /**
   * 對(duì)象轉(zhuǎn)url參數(shù)
   * @param {*} data
   * @param {*} isPrefix
   */
  queryParams (data, isPrefix = false) {
    let prefix = isPrefix ? "?" : ""
    let _result = []
    for (let key in data) {
      let value = data[key]
      // 去掉為空的參數(shù)
      if (["", undefined, null].includes(value)) {
        continue
      }
      if (value.constructor === Array) {
        value.forEach(_value => {
          _result.push(encodeURIComponent(key) + "[]=" + encodeURIComponent(_value))
        })
      } else {
        _result.push(encodeURIComponent(key) + "=" + encodeURIComponent(value))
      }
    }

    return _result.length ? prefix + _result.join("&") : ""
  },

  // ....其他函數(shù)....

}

export default utils
main.js文件 
import Vue from "vue"
import App from "./App.vue"
import utils from "@/utils/utils"

// ...其他代碼...

Vue.prototype.$utils = utils

// ...其他代碼...
在使用的時(shí)候可以這樣寫(xiě) 
// ....其他代碼

this.$utils.queryParams(this.params)

// ...其他代碼...
如果有寫(xiě)的不對(duì)或者不合適的地方請(qǐng)多多賜教，畢竟我還是個(gè)前端小菜雞，happy coding！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97814.html

相關(guān)文章

  • Jquery就是這么簡(jiǎn)單

    摘要：在內(nèi)部還是調(diào)用這些方法。對(duì)象下標(biāo)，從開(kāi)始對(duì)象下標(biāo)，從開(kāi)始再次重申對(duì)象只能調(diào)用對(duì)象的，對(duì)象只能調(diào)用對(duì)象的對(duì)象轉(zhuǎn)成值得注意的是在腳本內(nèi)，是代表對(duì)象的。對(duì)象轉(zhuǎn)成對(duì)象語(yǔ)法也非常簡(jiǎn)單在內(nèi)寫(xiě)上對(duì)象，就變成了對(duì)象了。在文檔中對(duì)它的解釋是這樣子的。 什么是Jquery？ Jquey就是一款跨主流瀏覽器的JavaScript庫(kù)，簡(jiǎn)化JavaScript對(duì)HTML操作 就是封裝了JavaScript，能夠...

    wpw 評(píng)論0 收藏0

  • Jquery就是這么簡(jiǎn)單

    摘要：在內(nèi)部還是調(diào)用這些方法。對(duì)象下標(biāo)，從開(kāi)始對(duì)象下標(biāo)，從開(kāi)始再次重申對(duì)象只能調(diào)用對(duì)象的，對(duì)象只能調(diào)用對(duì)象的對(duì)象轉(zhuǎn)成值得注意的是在腳本內(nèi)，是代表對(duì)象的。對(duì)象轉(zhuǎn)成對(duì)象語(yǔ)法也非常簡(jiǎn)單在內(nèi)寫(xiě)上對(duì)象，就變成了對(duì)象了。在文檔中對(duì)它的解釋是這樣子的。 什么是Jquery？ Jquey就是一款跨主流瀏覽器的JavaScript庫(kù)，簡(jiǎn)化JavaScript對(duì)HTML操作 就是封裝了JavaScript，能夠...

    oogh 評(píng)論0 收藏0

  • 無(wú)需Flash實(shí)現(xiàn)圖片裁剪——HTML5中級(jí)進(jìn)階

    摘要：需求就是那么簡(jiǎn)單，在瀏覽器里裁剪圖片并上傳到服務(wù)器。原圖片對(duì)象上傳裁剪后的對(duì)象初始化圖片預(yù)覽根據(jù)裁剪參數(shù)繪制轉(zhuǎn)對(duì)象以下將對(duì)每個(gè)環(huán)節(jié)詳解?；蛘吒鶕?jù)獲取裁剪信息包括旋轉(zhuǎn)和縮放用進(jìn)行手動(dòng)繪制。 前言 圖片裁剪上傳，不僅是一個(gè)很貼合用戶體驗(yàn)的功能，還能夠統(tǒng)一特定圖片尺寸，優(yōu)化網(wǎng)站排版，一箭雙雕。 需求就是那么簡(jiǎn)單，在瀏覽器里裁剪圖片并上傳到服務(wù)器。 我第一個(gè)想到的方法就是，將圖片和裁剪參數(shù)（x...

    JerryC 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<