又是久違的總結(jié)。
最近在做的項目是一個動畫柒瓣，用 Canvas 實現(xiàn)儒搭，用的庫是 Pixi，做一個射擊抽獎小游戲芙贫。做動畫還是有些門道的搂鲫，比如做云的動畫，要考慮云什么時候走到界面邊緣要銷毀磺平，再生成一片新的云魂仍，還有云出現(xiàn)的位置要稍微隨機，不能每一次都出現(xiàn)在一個地方拣挪。
在做射擊人物部分的時候擦酌，以為要做人的碰撞檢測，結(jié)果Pixi可以在每個動畫上綁定事件菠劝，只要監(jiān)聽事件即可赊舶。碰到一個坑就是兩個綁定事件的動畫不能疊加在一起，否則只有層級最高的那個動畫元素事件會觸發(fā)。
知識總結(jié)
實現(xiàn)復(fù)制功能
IE 下可以直接調(diào) api setData("text", text)锯岖，有個坑是如果復(fù)制的內(nèi)容是 undefined 的話會報錯介袜。Chrome 下沒有這個API。Chrome 下實現(xiàn)復(fù)制的方法是：在頁面創(chuàng)建一個 <textarea>標(biāo)簽出吹，將要復(fù)制的內(nèi)容復(fù)制給 <textarea> 的 value屬性遇伞，獲取到 <textarea> 后調(diào)用它的 selection 方法，將文本選中捶牢，然后使用 execCommand('copy', false, false)實現(xiàn)復(fù)制鸠珠。
封裝操作 Cookie 的方法
研究了下組里 SDK 中操作 Cookie 的方法。dealCookie(name, value, opt...)
實現(xiàn)大致如下：首先判斷參數(shù)有幾個秋麸，如果只有一個渐排，說明只是想獲取 Cookie，先將保存的 Cookie 取出灸蟆，使用 split將Cookie以 ';' 分隔轉(zhuǎn)為一個數(shù)組驯耻。
遍歷每個數(shù)組，首先利用正則/^\+s|+s$/g去掉首尾的空格炒考，將數(shù)組切割到name.length的長度并與${name}=做比較可缚，如果相等，將這個數(shù)組取出斋枢，在返回的時候帘靡，返回之前，需要做一個decodeURIComponent瓤帚，因為有的瀏覽器 Cookie 值不支持中文描姚，需要編碼后才能存儲，所以取出來的時候需要做一個 decodeURIComponent戈次，重復(fù)寫一次是為了記住這個操作API轩勘。
如果傳參大于一個，說明需要做的是存儲 Cookie 的操作怯邪，
對于 Cookie 的 path的處理赃阀，如果沒傳，默認(rèn)使用 /作為保存路徑擎颖；
對于 domain榛斯，如果沒傳，默認(rèn)使用 location.host搂捧；
secure默認(rèn)為空字符串 ''驮俗，secure的作用是，如果為true允跑，則該 Cookie 只有在使用 https 時才會發(fā)送到服務(wù)端王凑。
比較復(fù)雜的是對 expires的處理搪柑，因為舊瀏覽器不支持直接傳天數(shù)，只支持 UTC 格式的時間索烹，所以對傳入數(shù)字要做處理：實例化一個 Date——date工碾，使用 date = date().setTime(date.getTime() * 24*60*60*1000)得到一定天數(shù)之后的時間戳。 讓 expires等于 date.toUTCString()百姓。
傳兩個參數(shù)還有一個情況渊额，就是 value傳 null時，意味著要刪除 Cookie 垒拢，則直接將 expires 賦為 -1 旬迹。
如何監(jiān)聽 CSS transition 的停止
有一個 transitionend 事件，會在 transition 結(jié)束后調(diào)用求类。如果改變的屬性有多個奔垦，transition 就會觸發(fā)多次。
input 所有事件的調(diào)用順序
mousedown -> focus -> mouseup -> click
keydown -> keyup -> input（h5 新事件尸疆，<input type="text"> 不會觸發(fā) change事件） -> change -> blue）
webpack 熱更新原理簡單描述
使用 websocket椿猎，在頁面插入 websocket，同時監(jiān)聽自定義事件寿弱，在本地開啟服務(wù)器犯眠，css,js 就是服務(wù)器上的靜態(tài)文件，每次文件有變化脖捻，都跟文件的上一個 mtime屬性比較，如果不一樣兆衅，說明文件發(fā)生變化地沮，觸發(fā)事件，把變化的內(nèi)容告知瀏覽器羡亩，瀏覽器通過直接插入一個新 css摩疑，或者覆蓋原來 css 樣式的方法修改 CSS，實現(xiàn)熱更新畏铆。
柯里化簡述
利用閉包雷袋，先執(zhí)行一次 currying，將參數(shù)存儲起來辞居，最后調(diào)用的時候再使用全部的參數(shù)調(diào)用楷怒。
function currying(fn) {
let allArgs = [ ];
return function next() {
if (arguments.length > 0) {
let arg = Array.prototype.slice.call(arguments);
allArgs.push(arg);
return next;
} else {
fn.apply(null, allArgs);
}
}
}
這種適合 add(2,3)(6,5)()調(diào)用，如果要add(2,3)(6,5)瓦灶，可以改寫 next 的 valueOf鸠删，利用函數(shù)打印會調(diào)用 valueOf的特性，在 valueOf里執(zhí)行函數(shù) next贼陶。
零碎知識
- <img> 的默認(rèn)
display是inline刃泡，行內(nèi)可替換元素巧娱； - arguments 轉(zhuǎn)為數(shù)組：
Arrary.prototype.slice.call(arguments) - 多益面試題，在《你不知道的JS》中有提到
3.toString()會報錯烘贴，因為第一個點會被認(rèn)為是 3 的小數(shù)點禁添，所以應(yīng)該3..toString()
對后端的理解
上周周末用 egg 實現(xiàn)了 RESTful 接口，RESTful 說白了就是一個接口只負(fù)責(zé)獲取/修改一項數(shù)據(jù)桨踪，不像有的接口一個接口就返回了一個頁面所有需要的數(shù)據(jù)老翘。而前后端分離，就是向后端獲取的不是 html 文件馒闷，而是一個個 json 數(shù)據(jù)酪捡，前端拿到數(shù)據(jù)后自己決定如何渲染。在開發(fā)的過程中纳账，為了還原真實的數(shù)據(jù)返回逛薇，用爬蟲去豆瓣抓了 200 個最新的電影數(shù)據(jù)，保存在一個 json 文件中疏虫，然后利用 json 文件的數(shù)據(jù)永罚，自動創(chuàng)建 sql 腳本，放到 mysql 執(zhí)行卧秘，一個有 200 條數(shù)據(jù)的表就創(chuàng)建完成呢袱。
另外，為了解決跨域問題使用了兩種方案翅敌，一種是后端使用 cors羞福，將本地 url 添加進(jìn)白名單，assess-control-arrow-origin就會是我們本地的 url 蚯涮，就能直接從不同域的服務(wù)端獲取數(shù)據(jù)治专，這樣還無法傳輸 Cookie，要使用 cors 傳輸 Cookie遭顶，還需要將access-controll-arrow-Credentials: true张峰，ajax設(shè)置withCredentials為true。
新的算法知識
重新擼了一遍動態(tài)規(guī)劃的跳臺階棒旗，利用迭代而不是用遞歸喘批。讓 n1 = n2，n2 = total铣揉，總的次數(shù)就是 n1 + n2饶深，一個斐波那切數(shù)列。
還有過了一遍“找出第 k 小個數(shù)”逛拱，就是利用頂堆粥喜，簡化版的堆排序，在找到了 k 個數(shù)后停止即可橘券。
做項目的總結(jié)
接觸一個新項目额湘，接口文檔卿吐，交互邏輯不確定是不是完整的時候，要在腦海里完整過一遍這個項目每個交互過程锋华，模擬整個交互嗡官，看看哪些交互文檔沒有提及，哪些接口可能要用到毯焕，但是文檔上沒有衍腥，盡量不要邊開發(fā)邊要接口，否則可能出現(xiàn)在開發(fā)一個邏輯纳猫，結(jié)果接口后端還沒做婆咸，或者文檔沒有補齊，就要等其他組的同事做完才能繼續(xù)開發(fā)這樣十分沒有效率芜辕。
