成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

godlong_X / 2287人閱讀

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

寫作背景

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

寫作目的

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

需求：

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

注意事項(xiàng)：

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://systransis.cn/yun/52838.html

    相關(guān)文章

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

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

      shevy 評論0 收藏0

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

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

      CHENGKANG 評論0 收藏0

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

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

      sshe 評論0 收藏0

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

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

    godlong_X

    男|高級講師

    TA的文章

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