2016-03-11
今天看博客發(fā)現(xiàn)了一個不錯的團隊博客--AlloyTeam團隊Blog滨嘱，博客涉及了web端開發(fā)的很多東西如他們自己實驗的項目、web開發(fā)（css3\h5\js\nodejs\優(yōu)化\體驗設計\經(jīng)驗心得）矿筝、移動開發(fā)（Adroid、IOS、移動web開發(fā)）间坐、資源工具等面粮，是個值得常常關注的博客少孝。
今天的文章列表
關于web緩存
JavaScript 代碼規(guī)范與約束
npm script?
聊一聊前端自動化測試 （待看）
使用 SVG 輸出 Octicon
文章：關于web緩存
頁面的緩存是由header決定的，header參數(shù)有四種：
Cache-control:
max-age(s),級別比expire高
s-maxage(s),同max-age,只用于共享緩存（cdn緩存）
public 共有的共享
private 私有的緩存熬苍，用戶間不能共享
no-cache 不緩存響應Expires 緩存過期時間稍走，用來指定資源到期的時間袁翁，是服務器端的具體時間點，也就是expires = max-age + 請求時間婿脸，需要和Last-modified結合使用
Last-modified 服務器端文件的最后修改時間粱胜，304返回表示沒有修改
ETag 通過實體內(nèi)容生成的一段hash字符串標志資源的狀態(tài)，用來解決Last-modified存在的問題：
1狐树、服務器無法精確得到資源的最后修改時間
2焙压、資源修改頻繁，秒級以下抑钟，Last-modified只能精確到秒
3涯曲、文件修改時間變了，但是內(nèi)容不變的情況
使用緩存流程
cache-control指令使用
其他的緩存方式
- LocalStorage： 本地存儲的公共資源在塔，在pc端兼容性不好幻件，網(wǎng)速快的時候比不過304，移動端由于網(wǎng)速慢反而有優(yōu)勢蛔溃，但是已經(jīng)4G時代绰沥，不知道怎么樣
- sessionStorage ：會話制緩存
JavaScript 代碼規(guī)范與約束
JSLint：嚴格的規(guī)范和極少的配置
Jshint：可配置的規(guī)范
ESLint：
- 默認規(guī)則包含所有 JSLint、JSHint 中存在的規(guī)則贺待，易遷移
- 規(guī)則可配置性高：可設置「警告」徽曲、「錯誤」兩個 error 等級，或者直接禁用
- 包含代碼風格檢測的規(guī)則（可以丟掉 JSCS 了）
- 支持插件擴展狠持、自定義規(guī)則
- 支持 JSX
可在項目中嘗試使用eslint
npm script?
用過fis疟位、gulp，工具帶給我們很多方便的地方喘垂，而npm script則是準從插件的原始指令甜刻，一定程度上減少了插件的不兼容性，對于開發(fā)小型的應用會更方便
關于npmscript的官網(wǎng)
2016-03-14
文章閱讀
前端技術棧的展望
ESLint看來值得一用正勒，計劃在項目中使用得院，替換老的JSlint
React前陣子學了一段時間，不過一直沒有真正實踐過章贞，可以在native平臺實踐下
Mocha之前一直打算使用卻一直擱淺者祥绞，計劃在項目中使用
2016-03-15
文章
個人想到的是先排序再去重，在時間和內(nèi)存消耗上比較平衡鸭限，直接兩重循環(huán)去重是最浪費時間的蜕径，如果使用each等可以提高些許性能，捅排時間上是最佳败京，但是內(nèi)存消耗也會變大兜喻，不利于數(shù)據(jù)過多時候使用。
更高性能地實現(xiàn)平滑的box-shadow動畫效果
調(diào)用box-shadow做動畫在性能消耗上面會很大赡麦，作者通過使用：after偽元素控制透明度來模擬shadow朴皆，減少動畫的重繪次數(shù)帕识，重繪次數(shù)是shadown的幾十分之一。
關于引導圖一般都是用圖片來做遂铡，張鑫旭使用了border+after來模擬肮疗，非常棒非常有創(chuàng)意，同時避免了圖片傳輸帶來了流量和時間上的損耗扒接。
PS：快點把博客搭好Ｎ被酢！Ｖ樵觥超歌！
2016-03-18
前兩天在研究別的東西砍艾，就沒有更新看過的文章
文章
npm3
關于版本
npm已經(jīng)升級到版本3了蒂教，作為nodejs的包管理工具，npm也越來越多地被前端使用脆荷，npm3在下載速度和包依賴管理上有了很大的提升和優(yōu)化凝垛。
關于命令
npm dedupe 命令在安裝完包后可以對其進行檢測優(yōu)化包的結構，減少冗余蜓谋。
嘗試自己發(fā)布一個
npm 發(fā)布自己的包很容易梦皮，只需要有一個npm賬號就可以了。
偽元素還可以用來做計數(shù)器
一直偽元素用來做圖標桃焕、圖形剑肯，覺得偽元素挺實用的，能解決一些不常用的需求观堂，沒想到偽元素還能作為計數(shù)器让网，支持各種嵌套，多種字符如羅馬师痕、geek溃睹、矩形原型、數(shù)字胰坟、字母等
偽元素content的多種用法
詳細介紹了很多content的用法
當傳參錯誤時
Javascript沒有所謂的類型檢測因篇，因此需要我們自己去做類型檢測，當參數(shù)為空的時候笔横、當參數(shù)類型不一樣的時候竞滓，需要我們?nèi)プ鎏幚硪约皰伋鲥e誤。
<pre><code>
function makeSalad (ingredients) {
ingredients = ingredients || [];
if (!Array.isArray(ingredients)) {
throw new TypeError('ingredients parameter should be an array.');
}
return ingredients.join(', ');
}
</code></pre>
如上面的函數(shù)所示吹缔，良好的檢查能保證程序的正確執(zhí)行叫乌，減少debug次數(shù)块请。
