国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

前端常用的小函數(shù)(1)---解析url

godlong_X / 2280人閱讀

摘要：寫(xiě)作目的知識(shí)總結(jié)，結(jié)交一些前端的小伙伴。需求請(qǐng)求某些后端的接口，需要前端提供一些特定的請(qǐng)求參數(shù)。注意事項(xiàng)解析的是否為普通的有時(shí)候也會(huì)解析帶的。

寫(xiě)作背景

算上實(shí)習(xí)時(shí)間，已經(jīng)學(xué)習(xí)前端兩年了。知識(shí)結(jié)構(gòu)很亂，需要有一個(gè)網(wǎng)絡(luò)化的總結(jié)。

寫(xiě)作目的

知識(shí)總結(jié)，結(jié)交一些前端的小伙伴。

需求：

請(qǐng)求某些后端的接口，需要前端提供一些特定的請(qǐng)求參數(shù)。

注意事項(xiàng)：

1.解析的是否為普通的url （有時(shí)候也會(huì)解析帶hash的url）。
2.url 中是否有空格等字符串

知識(shí)羅列：

1.數(shù)組的扁平化處理
2.正則匹配
3.模板字符串拼接
$(function() {
  const $input = $(".input");
  const $queriesContainer = $(".queries-container");
  const testUrl = "url"; 
  const trimUrl = str => str.replace(/s+/g, "");
  const getUrlQueries = u => {
    // 去除url 中的空格
    const url = trimUrl(u);
    if (!(url && url.includes("?"))) return "";
    const startPoint = url.indexOf("?") + 1;
    // 注意React使用hash router
    const endPoint = url.indexOf("#") > -1 ? url.indexOf("#") : url.length + 1;
    const urlSegment = url.slice(startPoint, endPoint);
    return urlSegment.split("&").reduce((result, item) => {
      const tmp = item.split("=");
      result[tmp[0]] = tmp[1];
      return result;
    }, {});
  };

  const renderUrlQueries = queries =>
    Object.entries(queries).reduce((result, item, currentIndex) => {
      result += `
  • ${currentIndex +
        1}.  ${
        item[0]
      } : ${item[1]}
    • `;
      return result;
    }, "");

  const getRender = () => {
    const url = $input.val();
    const queries = getUrlQueries(url);
    $queriesContainer.html(renderUrlQueries(queries));
  };

  const init = () => {
    $input.val(testUrl);
    getRender();
  };

  init();

  $input.on("input", () => getRender());
});

    在線(xiàn)demo
    不足：

    1.場(chǎng)景考慮的不夠充分。
    2.沒(méi)有完全使用ES6(indexOf->includes).

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

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

    相關(guān)文章

    • 前端常用的小函數(shù)(1)---解析url

      摘要：寫(xiě)作目的知識(shí)總結(jié)，結(jié)交一些前端的小伙伴。需求請(qǐng)求某些后端的接口，需要前端提供一些特定的請(qǐng)求參數(shù)。注意事項(xiàng)解析的是否為普通的有時(shí)候也會(huì)解析帶的。 寫(xiě)作背景 算上實(shí)習(xí)時(shí)間，已經(jīng)學(xué)習(xí)前端兩年了。知識(shí)結(jié)構(gòu)很亂，需要有一個(gè)網(wǎng)絡(luò)化的總結(jié)。 寫(xiě)作目的 知識(shí)總結(jié)，結(jié)交一些前端的小伙伴。 需求： 請(qǐng)求某些后端的接口，需要前端提供一些特定的請(qǐng)求參數(shù)。 注意事項(xiàng)： 1.解析的是否為普通的url （有時(shí)候也會(huì)...

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

    • 微信小程序快速開(kāi)發(fā)：從注冊(cè)賬號(hào)到小程序上架

      摘要：寫(xiě)在前面自從微信小程序功能發(fā)布后，我就一直關(guān)注著小程序的動(dòng)向，然而限于學(xué)業(yè)繁忙，總是沒(méi)有太多的時(shí)間去學(xué)習(xí)。準(zhǔn)備工作注冊(cè)微信小程序賬號(hào)點(diǎn)擊傳送門(mén)立馬注冊(cè)微信小程序賬號(hào)。微信官方一般會(huì)在日之內(nèi)完成審核，我新注冊(cè)的小程序?qū)徍擞昧藘商鞎r(shí)間。 寫(xiě)在前面 自從微信小程序功能發(fā)布后，我就一直關(guān)注著小程序的動(dòng)向，然而限于學(xué)業(yè)繁忙，總是沒(méi)有太多的時(shí)間去學(xué)習(xí)。大二逐漸學(xué)習(xí)了Vuejs，被其簡(jiǎn)潔的設(shè)計(jì)所吸引...

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

    • 前端最實(shí)用書(shū)簽(持續(xù)更新)

      摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂所以將前端主流技術(shù)做了一個(gè)書(shū)簽整理不求最多最全但求最實(shí)用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂; 所以將前端主流技術(shù)做了一個(gè)書(shū)簽整理,不求最多最全,但求最實(shí)用。 書(shū)簽源碼 書(shū)簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

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

    • 如果你在2018面試前端，那這篇文章最好看一看！

      摘要：優(yōu)點(diǎn)是繼承了父類(lèi)的模板，又繼承了父類(lèi)的原型對(duì)象，缺點(diǎn)就是父類(lèi)實(shí)例傳參，不是子類(lèi)實(shí)例化傳參，不符合常規(guī)語(yǔ)言的寫(xiě)法使用的方式繼承了父類(lèi)的模板，不繼承了父類(lèi)的原型對(duì)象。優(yōu)點(diǎn)是方便了子類(lèi)實(shí)例傳參，缺點(diǎn)就是不繼承了父類(lèi)的原型對(duì) github版本戳,求star,follow 前端目錄 HTML相關(guān) CSS相關(guān) JAVASCRIPT相關(guān) DOM相關(guān) HTTP相關(guān) VUE相關(guān) 算法相關(guān) 網(wǎng)絡(luò)安全相關(guān)...

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

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

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <