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

資訊專欄INFORMATION COLUMN

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

shevy / 772人閱讀

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

寫作背景

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

寫作目的

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

需求：

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

注意事項：

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

知識羅列：

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());
});

    在線demo
    不足：

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

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

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

    相關(guān)文章

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

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

      godlong_X 評論0 收藏0

    • 微信小程序快速開發(fā)：從注冊賬號到小程序上架

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

      CHENGKANG 評論0 收藏0

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

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

      sshe 評論0 收藏0

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

      摘要：優(yōu)點是繼承了父類的模板，又繼承了父類的原型對象，缺點就是父類實例傳參，不是子類實例化傳參，不符合常規(guī)語言的寫法使用的方式繼承了父類的模板，不繼承了父類的原型對象。優(yōu)點是方便了子類實例傳參，缺點就是不繼承了父類的原型對 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 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <