LLAS國服終于要來啦，這不官方為了慶祝好不容易拿到的版號開服還組織了一場盛大的預約活動。只要每天簽到，做一道LL數(shù)獨，然后看看視頻，都可以得到分數(shù)。積攢完足夠多的分數(shù)就可以獲得游戲內的道具，滿200分就可以獲得UR一張。（羨慕.jpg）

正式開始本文前先自我介紹一下好了。筆者現(xiàn)在在做前端程序員。大概來說，每個網(wǎng)站大致可以分成前端和后端兩部分：前端是你能看到的東西，后端是你看不到但是擁有最復雜的邏輯和保存你所有數(shù)據(jù)的部分。所以我就是那個負責網(wǎng)站上你看到的樣子的人。

為了讓這篇文章對任何人都通俗易懂，我會盡量去解釋每個專業(yè)術語，比如用比喻的方式。在比喻的時候難免有些小的細節(jié)會丟失，還請各位大佬多多包涵。

起因

筆者是國際服玩家，本來實在是肝不動了不打算開國服坑了，每天都圍觀群友分享當天的數(shù)獨題然后大家一起討論解題的過程，不過直到有一天我看到了這么一張截圖：

嘶...這個提示框看著怎么這么復古...要知道大部分時間你看到的提示框都不長這樣。而是像下面這樣經(jīng)過設計的：

這里要提到三個概念，HTML，CSS和JavaScript。

HTML說白了就是一個網(wǎng)頁最基本的框架，就好比一個帶家具的毛坯房。每個房間都有了，但是那個整體設計嘛...只能說勉強能住人。

CSS是對網(wǎng)頁的裝飾，相當于給毛胚房刷了漆上了色，還掛了畫，于是就好看很多。

大概來說沒有JavaScript的網(wǎng)站就是沒走水電的房子。天花板上裝的有燈，墻上也有開關，可是你按一下，燈也不亮。而有了JS以后你的網(wǎng)站才能做到，點擊按鈕，顯示一個東西在頁面上，就像房間的燈亮了一樣。

也就是說你看到的那些華麗的提示框，其實都是這三樣東西加成的結果，往往有著很多行的代碼。而至于AS網(wǎng)站的這個提示框，它就是Javascript里面簡單的一句：alert("這里是文字")

所以一般來說幫你看到一個網(wǎng)站用上這樣的提示框，那么大概就表明這個網(wǎng)站比較趕工...這也是為什么它成功引起了我的注意。

順便一提，每個網(wǎng)站你都是可以看到它的HTML，CSS和JavaScript的。方法很簡單，在頁面上右鍵 -> 審查元素（或者直接F12），一個小窗口會彈出來。大概長這個樣子（抱歉筆者用的是英文系統(tǒng)）

最上面的Elements會顯示上圖的東西。它右邊的Console可以允許你在這個頁面上自由執(zhí)行JavaScript。再右邊的Sources可以讓你看到這個頁面的源代碼。

代碼剖析

那么下面我們就看一下這個數(shù)獨部分的代碼吧。

看到這個縮進和空格筆者血壓已經(jīng)升高了......

首先映入眼簾的是一個叫dic的東西，里面是數(shù)字對應一個answer（答案），有意思。這里面的代碼不重要，感興趣的可以自己去看看。

不過有意思的是頁面上加載的另一段代碼：

筆者的血壓再次升高了...... 這空格，這函數(shù)名，這變量名，這謎一樣的縮寫。anseNum是啥？叫answerNum不好么（你縮寫也沒縮對啊喂！）為什么你下面就不縮寫改叫answerSwitch了（就不吐槽這命名了...）還有這四處充斥的注釋掉的代碼...

重點在第238-254行。這里面的邏輯我給大家解讀一下。每道數(shù)獨有個題目編號，剛剛你看到的那個dic里面就裝了答案（草）。這里就是在檢查二者是否一致。如果一致，那么給那位偶像的圖片上加個小勾勾，否則加個小叉叉。然后把答題結果發(fā)送給后端保存，答對就是addStore(1)，答錯就是addStore(0)

問題來了，你答案怎么放在前端了？這我不直接就知道你答案是啥了？

（ps. 如果我校的在線測驗系統(tǒng)是這樣的，我早就樂開花了）

首先，做網(wǎng)站最重要的一點就是，永遠不要相信前端發(fā)給你的數(shù)據(jù)，因為它可以通過任何方式被篡改?？偟膩碚f：假設你在前端檢查今天是否三遍已經(jīng)答滿，那任何人就有能力繞過這個檢查。假設你在前端檢查是否回答正確，那任何人都可以篡改這個驗證結果。至于后端，有現(xiàn)如今相對安全的服務器，所以沒點工夫是沒法去修改數(shù)據(jù)的（要是能的話問題就大了）。

那么這里網(wǎng)站的流程是什么樣的呢，請看這個圖：

研究發(fā)現(xiàn)回答三遍的限制似乎在后端也有驗證（太好了），這里的流程圖為了簡略忽略了。

注意這里所有的前端邏輯（左側灰框）都是可以跳過的，也就是說我可以直接跳過這些復雜的判斷邏輯，而直接自主選擇是讓后端知道自己答對還是答錯?？梢钥闯觯@是非常危險的。

筆者斗膽試想了一下一個正確的邏輯是什么樣的。我覺得是這樣的：

回答正確與否的驗證，以及已經(jīng)嘗試過幾次，都應該是由堅不可摧的后端負責的。前端應該只負責記錄用戶的回答，以及把回答發(fā)送到后端，然后展示后端的回復。

現(xiàn)在再看看，左邊的前端部分你能控制的只有你的回答了。這樣來看你不知道答案是什么了，也沒法破解了，乖乖做題吧。

不過，要說有什么可圈可點的地方，就是一天能做幾道題是后端控制的，不然......

結語

總結來說，可以看出這次凜時工再次發(fā)威了。說實話我看到這樣制作的網(wǎng)站，作為一名前端（以前也做過全棧）實在是收不住自己的血壓... 網(wǎng)站整體美工做的很不錯，很好看，小游戲很好玩也很有創(chuàng)意，但是在一些細節(jié)上還是有些不盡如人意。總之可以看出趕工了。

順便一提，筆者其實視頻部分也好好研究了下。本來打算一篇文章都寫完的，沒想到寫完數(shù)獨就已經(jīng)這么多字了。本來就一堆復雜的東西，再長不拉唧的估計就更沒人看了。要是能有人感興趣的話我會抽空更一下視頻部分，相似的邏輯。

聲明

數(shù)獨游戲超好玩的，筆者寫這篇文章只是從技術層面探討一下這個網(wǎng)站的設計，以及指出一些在開發(fā)上存在的漏洞以及代碼習慣問題，其目的不是為了鼓勵大家去做不好的事情。本文純粹就事實存在的事物進行剖析，因此筆者對一切因本文產生的后果不負任何責任。

嘛就這樣，陽光小透明走了，拜拜～