<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    2. 

    <del id="afajh"><form id="afajh"></form></del>
    

    5. 

        1. <th id="afajh"><progress id="afajh"></progress></th>

          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>
          如何用油猴提升前端開發(fā)效率
          共
                7107字，需瀏覽
                    15分鐘
                
           ·
          2022-04-14 16:18
          
            
          點擊上方?前端Q，關(guān)注公眾號
          回復(fù)加群，加入前端Q技術(shù)交流群

          1. 起因
          時隔一年，油猴腳本系列又來了，起因是那天洗澡的時候，突然靈光一閃，想到平時在前端開發(fā)中，有很多工作完全是一些機械的，沒有什么難度的活，但是又異常的花時間！其實就是對一些表格字段。
          目前為止我還在開發(fā)之前的那個百萬級ERP項目，項目中的列表非常的多，目前大概有幾百個吧，而且每個列表都有非常多的字段，通常情況下都在20個字段左右，而后端寫的時候會在對應(yīng)的接口中返回一大堆字段，你需要從返回的字段中挑選出列表中需要的字段。
          可能一個兩個還好，但是幾十個幾百個列表一個字段一個字段的對起來就很耗時耗力，所以這個時候我就有一個想法：有沒有那么一種方法，將原型圖上列表字段提取出來，然后與swagger中該接口下面的字段注釋做一個對比，如果對的上，則生成Antd可以使用的表頭代碼，如果沒有對上，那么就統(tǒng)一將這些沒有對上的字段展示出來，然后用肉眼去對，如果依然沒有找到這些字段，那么就發(fā)給后端，讓后端添加上這些字段。
          一想到這個可能性，馬上就想迫不及待的想要進行實現(xiàn)，這時我回憶起一年前用過油猴腳本做了一些事情，那么這次這個突發(fā)奇想是否也可以用油猴腳本進行實現(xiàn)。
          2. 油猴腳本
          我在去年已經(jīng)寫過幾篇關(guān)于油猴腳本的文章，其中提到過通過Webpack打包，可以開發(fā)特別復(fù)雜的腳本，甚至可以開發(fā)一些工程級的腳本，同時也可以使用npm上的包。
          但是由于webpack配置的復(fù)雜性，所以我首先是沒有考慮使用webpack打包工具的，而是先想到了另一個零配置打包工具：parcel。
          但是很遺憾，失敗了，不知道為什么通過parcel打包后的js文件直接通過油猴引入外部資源的方法會報錯，于是這個時候我還想到了一個打包js文件的工具：Rollup。
          遺憾的是，同樣失敗了，不知道為什么引入油猴后就是會報錯，于是這個時候我就放棄抵抗，選擇了webpack進行打包，結(jié)果不出意料，webpack打包后的js文件引入油猴中沒有任何問題。
          因為我之前已經(jīng)這么做過了，還總結(jié)了相關(guān)的文章：強大的油猴Tampermonkey腳本開發(fā)環(huán)境搭建，所以關(guān)于油猴的基礎(chǔ)部分就不再贅述。
          2.1 打包的好處
          為什么要通過webpack打包？
          因為在編寫一些復(fù)雜腳本時，我們往往會需要使用到非常多的庫，而且也會將腳本進行模塊化，分成非常多的文件，同時如果你還想編寫一些CSS樣式，那么你也可以直接寫CSS文件或者Less或者Sass文件，通過webpack可以將這些文件統(tǒng)一起來，打包成一個js，然后通過油猴提供的外部引入方式進行引入。
          隨著我對React越發(fā)的得心應(yīng)手，要實現(xiàn)上面說的自動比對字段的功能React也是不可少的一環(huán)，而我個人非常喜歡使用TypeScript，因為它會給予代碼更多的提示，讓你在寫代碼的時候不容易犯一些低級錯誤。
          而使用React的時候就不得不提到Antd，Antd這個UI組件庫提供了非常多的方便的組件，不光是解決了一些樣式問題，同時它還解決了很多交互層面的東西，比如它的Form表單，也是非常好用的。
          綜上所述，如果你要開發(fā)一個油猴腳本，那么通過webpack進行打包就是一個非常好的選擇。
          3. jQuery
          正如我年前的那篇文章所說，jQuery是一個非常值得學(xué)習(xí)的庫，因為對于編寫油猴腳本來說，沒有什么比用jQuery去提取界面上的信息更方便的了。
          由于jQuery的易用性，使用jQuery你可以輕易的從界面上提取到你要的信息，雖然使用正則可以達(dá)到差不多的效果，但jQuery代碼寫起來比正則更快，也更不容易出錯。
          4. 正則
          編寫腳本，非常多的情況會使用到正則，因為要精確的匹配到對應(yīng)的字符，正則是你的不二之選，在做一些自動生成代碼工具的時候，因為涉及到字符匹配的問題，學(xué)會正則就顯得非常的重要。
          這里就要推薦一個非常好的正則測試網(wǎng)站：RegExr: 學(xué)習(xí)、構(gòu)建和測試正則表達(dá)式Test RegEx，因為有時候你無法判斷你寫的正則對不對，所以這個時候你就可以先在這個網(wǎng)站上面測試一下，如果測試結(jié)果符合你的預(yù)期，再將正則表達(dá)式復(fù)制到你的項目中進行測試，這樣編寫起正則來就方便的多，使用方法也非常簡單，去該網(wǎng)站上面點兩下大致就能明白如何使用。
          5. 爬蟲基礎(chǔ)
          如果你要提取一些界面上的信息，那么你得會一些爬蟲基礎(chǔ)知識，知道怎么獲取到界面上的某些信息。
          理論上一個網(wǎng)頁上面所有的信息，都能通過正則表達(dá)式進行提取，但由于正則表達(dá)式在編寫的過程中可能會比較容易出錯，這個時候jQuery就能有效的幫你提取出這些頁面數(shù)據(jù)。
          這里就對爬蟲入門時90%的人都會選擇的豆瓣排行榜做一個頁面信息提取。
          6. 實例
          上面所想的那個腳本我其實已經(jīng)實現(xiàn)了，但礙于swagger上面有公司項目的接口信息，所以這里就不拿那個腳本作為演示。
          那么這里我就拿jQuery爬取到的豆瓣排行榜信息作為演示吧：
          主要實現(xiàn)的功能就是，在輸入框中輸入電影名稱，然后將電影相關(guān)的信息進行匹配并且展示出來：
          6.1 觸發(fā)事件構(gòu)建
          要執(zhí)行你已經(jīng)寫好的代碼，你通常可能需要一個按鈕、一個輸入框或者其它元素進行觸發(fā)，在本腳本的開發(fā)中，我就使用了Antd的按鈕+Antd的模態(tài)框+Antd的輸入框這3種組件來搭建腳本。
          6.2 最終效果
          最終的效果像下面這樣，代碼其實并不難。這里貼上最終的代碼：
          import { Button, ConfigProvider, Form, Modal } from "antd";
          import "antd/dist/antd.css";
          import TextArea from "antd/es/input/TextArea";
          import zhCN from "antd/lib/locale/zh_CN";
          import * as $ from "jquery";
          import { useState } from "react";
          import { render } from "react-dom";

          interface InfoDataList {
            /** 電影的名稱 */
            title: string;
            /** 分?jǐn)?shù) */
            score: string;
            /** 評價數(shù) */
            number: string;
            /** 簡介 */
            info: string;
          }

          function AppButton() {
            const [infoDataList, setInfoDataList] = useState([]);

            const [showData, setShowData] = useState();

            const [visible, setVisible] = useState(false);

            return (
              <>
                        onClick={() => {
                    /** 整理后的信息 */
                    const info: InfoDataList[] = [];

                    // 這里是提取界面信息
                    $(".info").each(function (this) {
                      const infoItem: InfoDataList = {} as InfoDataList;
                      // 這里是所有的信息，下面組件提取各種信息
                      $(this)
                        .find(".title")
                        .each(function (this, index) {
                          // 只取第一個電影名字
                          if (index === 0) infoItem.title = this.innerHTML;
                        });

                      // 取分?jǐn)?shù)
                      $(this)
                        .find(".rating_num")
                        .each(function (this) {
                          infoItem.score = this.innerHTML;
                        });

                      // 評價數(shù)
                      $(this)
                        .find(".star > span:nth-child(4)")
                        .each(function (this) {
                          infoItem.number = this.innerHTML;
                        });

                      // 取信息
                      $(this)
                        .find(".inq")
                        .each(function (this) {
                          infoItem.info = this.innerHTML;
                        });

                      info.push(infoItem);
                    });

                    setInfoDataList(info);
                    // 打開彈窗
                    setVisible(true);
                  }}
                  style={{ position: "fixed", right: "100px", bottom: "100px" }}
                >
                  點我
                
                        title="自動對字段"
                  visible={visible}
                  centered
                  destroyOnClose
                  width={1000}
                  onCancel={() => {
                    setVisible(false);
                  }}
                >
                            preserve={false}
                    onValuesChange={async (value) => {
                      // 如果沒有值，則不匹配
                      if (!value.text) {
                        setShowData(undefined);
                        return;
                      }
                      const rgx = RegExp(value.text);

                      const data = infoDataList.find((item) => rgx.test(item.title));
                      setShowData(data);
                    }}
                  >
                    
                      
          圖片
          表情
          推薦
        
          點贊
    
          評論
    
          收藏
    
          分享
        
          手機掃一掃分享
          分享
    
          
        舉報
    
          

          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            2. 

            <del id="afajh"><form id="afajh"></form></del>
            

            5. 

                1. <th id="afajh"><progress id="afajh"></progress></th>

                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  

伊人婷婷综合基地
|
欧美一性一交
|
国产高清乱伦片
|
日本女人在线视频
|
91麻豆精品天天摸夜夜摸
|