Javascript 代碼簡(jiǎn)化常用寫法

、利用“或”（||）短路邏輯，給變量賦值。

  // a應(yīng)該是一個(gè)有意義的字符串，不能說null,undefined,null
const getData=(a)=> {
       // let b="";
        // if (a !==null || a !==undefined || a !==false) {
         //  b=a;
       //  }
  
        // 簡(jiǎn)化
        let b=a || "";
      };

2、利用箭頭函數(shù)簡(jiǎn)化函數(shù)

// 求兩個(gè)數(shù)的和
// const sum=function (a, b) {
//   return a + b;
// };

// 簡(jiǎn)化
 const sum=(a, b)=> a + b;

3、利用三元運(yùn)算符號(hào)簡(jiǎn)化if else

const difNum=(a, b)=> {
        // let res;
        // if (a > b) {
        //   res=a - b;
        // } else {
        //   res=b - a;
        // }
        // return res;

        // 簡(jiǎn)化
        return a > b ? a - b : b - a;
};

4、利用ES6對(duì)象解構(gòu)簡(jiǎn)化

const data={
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: 5,
        f: 6,
};
const sum=(data)=> {
        // const a=data.a,
        //   b=data.b,
        //   c=data.c;

        // 簡(jiǎn)化
        const { a, b, c }=data;
};

5、利用數(shù)組中元素檢測(cè)進(jìn)行條件判斷

	const isShow=(a)=> {
        // let res=false;
        // if (a==="你好") {
        //   res=true;
        // }
        // if (a==="你好啊") {
        //   res=true;
        // }
        // if (a==="哈嘍") {
        //   res=true;
        // }
        // if (a==="hello") {
        //   res=true;
        // }
        // if (a==="嗨") {
        //   res=true;
        // }
        // return res

        // 簡(jiǎn)化
        const hello=["你好", "你好啊", "哈嘍", "hello", "嗨"];
        return hello.indexOf(a) > -1;
      };

6、利用ES6中的模板字符串生產(chǎn)字符串

const setHtml=(a, b, c)=> {
        // let str="<div>" + a + "<div>";
        // str +="<div>" + b + "<div>";
        // str +="<div>" + c + "<div>";

        // 簡(jiǎn)化
        let str=`<div>${a}</div><div>${b}</div><div>${c}</div>`;
        return str;
};

其他還有很多代碼簡(jiǎn)化的方法，希望大家發(fā)出來交流，敲代碼的時(shí)候少打點(diǎn)字

在前端開發(fā)過程中，使用:not(:last-of-type)簡(jiǎn)單方便，再也不要麻煩的單獨(dú)使用：last-of-type了，非常不錯(cuò)哦！

這個(gè)小小的技巧能省去很多時(shí)間和代碼。下面讓我解釋一下，比如說，我們要美化一個(gè)文章列表。

以前的實(shí)現(xiàn)方法是這樣的，其實(shí)是很笨的方法！

這css的目的是要讓列表的文章之間有間隔，但最后一個(gè)不需要。這個(gè)時(shí)候，:not(:last-of-type)就大限神威了！

使用:not(:last-of-type)，我們省掉了5行代碼。試想在我們編寫的其它代碼中都使用這種技巧，不知道要省掉多少工夫。大家可以嘗試下哦！

切版 qieban(.cn)

網(wǎng)頁下載下來使用，在日常工作中使用頻率還是很高的，有時(shí)候確實(shí)能解一時(shí)之急，我自己就有很窘迫的經(jīng)歷。

我開會(huì)的時(shí)候，都會(huì)把準(zhǔn)備好的文檔存在局域網(wǎng)，到會(huì)議室直接打開就能直接用了。有一次到分公司，由于分公司剛剛成立，內(nèi)網(wǎng)還沒有和母公司連通。結(jié)果這下子懵逼了，上不去內(nèi)網(wǎng)，看不到文檔。又是叫同事發(fā)過來，又是提發(fā)送文件的安全申請(qǐng)，讓人著急。

如果把網(wǎng)站保存下來，放在自己的電腦中，既不用擔(dān)心信息泄露問題，又不用為了看不了文檔而著急。

遇到問題，記錄下來，然后解決問題，程序員的解決思路永遠(yuǎn)是自己創(chuàng)造輪子的，接下來就是不斷的探索解決方案。

其實(shí)下載網(wǎng)頁的方式有很多種，其中有幾種辦法使用的比較多，例如：如果你用Chrome，直接按 Ctrl+s 就可實(shí)現(xiàn)。使用這種方法，Chrome會(huì)把整個(gè)網(wǎng)站，按照編譯完成的源碼目錄結(jié)構(gòu)保存下來。像下面這樣：

下載完成的文件直接點(diǎn)擊 xxx.html 可以直接離線訪問，但是這種方式對(duì)目錄的依賴結(jié)構(gòu)比較高，怎么理解呢？就是 html 文件和對(duì)應(yīng)文件名的文件夾必須在同一個(gè)目錄中，才能正常使用。拷貝到其他機(jī)器的時(shí)候必須要兩個(gè)同時(shí)拷貝才可以，否則就會(huì)排版錯(cuò)亂。

如果有十個(gè)或者更多的網(wǎng)頁需要拷貝或者刪除，就會(huì)很麻煩，例如我想在其中找到其中幾個(gè)，復(fù)制到其他地方，很容易弄錯(cuò)順序。

HTML 是一種純文本格式，它用于排版文字。純文本文檔的意思就是，文檔中只包含文字內(nèi)容，不包含二進(jìn)制內(nèi)容，舉個(gè)例子：打印出的A4紙，只有文字沒有圖片。而 HTML 想要顯示照片等二進(jìn)制信息，通常都會(huì)鏈接到其他文件，也就是上面文件夾里面的內(nèi)容。

不過 Chrome 下載文件這種方式也有優(yōu)點(diǎn)，下載下來的文件可以保持獨(dú)立性，比如說，我需要這個(gè)網(wǎng)頁中的一張圖片，那么就可以直接到文件夾里面尋找了。

另外還有一種辦法，也有很多人再使用。Chrome 在打印網(wǎng)頁的時(shí)候，會(huì)把網(wǎng)頁轉(zhuǎn)成 PDF ，然后在進(jìn)行打印。那么就給我們提供了很明確的思路，把網(wǎng)頁直接保存為 PDF ，這樣保存下來的網(wǎng)頁就只有一個(gè)文件。

使用Chrome，直接按下Ctrl+p就可以。然后目標(biāo)打印機(jī)選擇另存為 PDF 。

這個(gè)功能很多瀏覽器都支持

但是這種辦法也有很明顯的缺點(diǎn)，由于 PDF 是靜態(tài)文檔，網(wǎng)頁上的一些動(dòng)畫可能不會(huì)正常顯示，而且排版也有可能會(huì)錯(cuò)亂，這完全靠運(yùn)氣。個(gè)人覺得這不是一種很靠譜的方法。

這時(shí)候主角來了！有一個(gè)工具既可以把網(wǎng)頁保存為 html 又可以保持是單文件。他就是 monolith ，你可以在 github 上面找到它，但是源碼并沒有編譯為可執(zhí)行文件，我把它編譯了一下，下面會(huì)放上來鏈接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就簡(jiǎn)單說說使用方法：如果你下載我的鏈接，那么里面有三個(gè)文件：

第一個(gè)是Mac平臺(tái)編譯出來的，使用方式為：

./monolith 網(wǎng)站地址 > xxx.html

默認(rèn)情況下 monolith 會(huì)把生成的 html 輸出到標(biāo)準(zhǔn)輸出流，也就是當(dāng)前終端。使用 > 我們把輸出的內(nèi)容重定向并覆蓋到文件。

執(zhí)行完成之后，在這個(gè)目錄下面就會(huì)有一個(gè)對(duì)應(yīng)的文件：xxx.html 。

另外兩個(gè)是 Windows 平臺(tái)使用的。為了簡(jiǎn)化使用，我寫了一個(gè) CMD 腳本。直接點(diǎn)擊 monolith.cmd ，然后粘貼地址就可以完成下載。

下載完成之后，在本地你會(huì)發(fā)現(xiàn)只有一個(gè) html 文件。我們打開之后，發(fā)現(xiàn)圖片和JS等信息都在，而且排版正常。那么就要思考了，我們之前說過，HTML 是放置純文本信息的，那么圖片在哪里呢？

答案顯而易見，就在 HTML 文件里面。為了方便小圖片傳輸，有一種叫 Base64 的東西，它可以把二進(jìn)制信息變成成純文本。這在使用 Json 傳遞數(shù)據(jù)的今天十分常見，它可以減少一次請(qǐng)求（題外話），這里就是用的這個(gè)原理。monolith 把圖片等二進(jìn)制內(nèi)容轉(zhuǎn)為了純文本，保存在 HTML 文件中。我們?cè)谙螺d的文件源碼可以看到：

對(duì)比源代碼，src 信息已經(jīng)變成了 base64 格式的圖片，就是那串亂碼。復(fù)制那串亂碼，從網(wǎng)上搜一個(gè) base64 轉(zhuǎn)圖片工具，粘貼進(jìn)去，這時(shí)會(huì)發(fā)現(xiàn)就是我們看到的那張圖片。這樣一來，無論這個(gè)網(wǎng)站上有多少個(gè)文件，都會(huì)保存到一個(gè) HTML 文件里面，而且還能離線使用。

當(dāng)然，base64 編碼的圖片比原生圖片略大，這可能也是你現(xiàn)在在擔(dān)心的問題。不過 monolith 會(huì)特殊處理文件體積。我們可以看看 Chrome 直接下載和使用 monolith 下載體積相差多少。我們把兩種方式下載的網(wǎng)頁都進(jìn)行了 7-Zip 壓縮。

我們可以看到，使用 monolith 下載會(huì)比 Chrome 直接下載小一倍還多！

最后要說的是局限性，無論那種方法，都幾乎不能把視頻網(wǎng)站中的視頻下載下來。因?yàn)楝F(xiàn)在的視頻地址都是 Token 加密的，同理，使用 Token 加密的其他請(qǐng)求信息也無法下載。

比如你可以試試下載其他網(wǎng)站的首頁，Logo 和視頻都是下載不了的。但是也有解決辦法，那就是另外一個(gè)領(lǐng)域的事情了，以后有機(jī)會(huì)說給大家聽。

如果這篇文章對(duì)您或者您的朋友有幫助，感謝您關(guān)注，轉(zhuǎn)發(fā)。

在線咨詢

上一篇：Element UI 的el-table組件實(shí)現(xiàn)跨頁
下一篇：網(wǎng)頁的文章不讓下載怎么辦？又一個(gè)好辦法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

Javascript 代碼簡(jiǎn)化常用寫法

您的項(xiàng)目需求