東航電商前端技術周刊第四期20180629
1.Cookie相關知識
服務器端像客戶端發送Cookie是通過HTTP響應報文實現的，在Set-Cookie中設置需要像客戶端發送的cookie，cookie格式如下：
Set-Cookie: "name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure"
其中name=value是必選項，其它都是可選項。Cookie的主要構成如下：
name:一個唯一確定的cookie名稱。通常來講cookie的名稱是不區分大小寫的。
value:存儲在cookie中的字符串值。最好為cookie的name和value進行url編碼
domain:domain對於哪個域是有效的。所有向該域發送的請求中都會包含這個cookie信息。這個值可以包含子域(如： yq.aliyun.com)，也可以不包含它(如：.aliyun.com，則對於aliyun.com的所有子域都有效).
path: 表示這個cookie影響到的路徑，瀏覽器跟會根據這項配置，像指定域中匹配的路徑發送cookie。
expires:失效時間，表示cookie何時應該被刪除的時間戳(也就是，何時應該停止向服務器發送這個cookie)。如果不設置這個時間戳，瀏覽器會在頁面關閉時即將刪除所有cookie；不過也可以自己設置刪除時間。這個值是GMT時間格式，如果客戶端和服務器端時間不一致，使用expires就會存在偏差。
max-age: 與expires作用相同，用來告訴瀏覽器此cookie多久過期（單位是秒），而不是一個固定的時間點。正常情況下，max-age的優先級高於expires。
HttpOnly: 告知瀏覽器不允許通過腳本document.cookie去更改這個值，同樣這個值在document.cookie中也不可見。但在http請求張仍然會攜帶這個cookie。註意這個值雖然在腳本中不可獲取，但仍然在瀏覽器安裝目錄中以文件形式存在。這項設置通常在服務器端設置。
secure: 安全標誌，指定後，只有在使用SSL鏈接時候才能發送到服務器，如果是http鏈接則不會傳遞該信息。就算設置了secure 屬性也並不代表他人不能看到你機器本地保存的 cookie 信息，所以不要把重要信息放cookie就對了服務器端設置
優點：極高的擴展性和可用性
1.可以解決HTTP無狀態的問題，與服務器進行交互，分擔了服務器存儲的負擔
2.通過良好的編程，控制保存在cookie中的session對象的大小。
3.通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。
4.只在cookie中存放不敏感數據，即使被盜也不會有重大損失。
5.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。
缺點：
1.Cookie
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那麽它起不到任何作用。
4.浪費帶寬，每次請求新頁面，cookie都會被發送過去
5.在cookie相關文檔信息中，提到cookie是不能跨域訪問的，但是在二級域名是可以共享cookie的。這樣就是我們的項目有了局限性，必須將多個系統的域名統一，作為二級域名，統一平臺提供使用主域名。這樣就可以實現cookie的單點登錄了。
一級域名相同，只是二級域名不同的情況下，瀏覽器允許通過設置document.domain共享Cookie。也就是說，Cookie只能跨二級域名來訪問，不能跨一級域名來訪問。
感謝李楠老師熱情分享
2.解析機上WiFi項目pc端src/js/common/index.js中的getTempGather方法
源碼：
function getTempGather() {
return {
zh: {
headerTemp
},
en: {
headerTemp: headerENTemp
}
}[window.storeCache.isENSite ? ‘en‘ : ‘zh‘];
}解析：正常寫的，可能會如下寫
function getTempGather() { if(window.storeCache.isENSite){ return { headerTemp: headerENTemp } } else{ return { headerTemp } } }
然後對比一下兩種寫法，哪種更好？顯然第二種if/else可讀性差，字符比第一種多了12個。而第一種對象鍵值與表達式得到了完美的運用，簡潔可讀，基本功紮實體現在這塊代碼裏。
感謝孫愛祥老師熱情分享
3.前端常用算法比較測試
冒泡排序、選擇排序、插入排序、快速排序執行速度對比
//冒泡排序,遍歷,一趟循環後將數組中最大項移至數組尾部,排除此最大項再對剩余項做循環操作
function bubbleSort(array){
var arr = array.slice(0);
console.time(‘bubbleSort‘);
var i = arr.length;
for(; i > 1; i--) {
for (var j = 0; j < i; j++) {
if(arr[j] > arr[ j + 1 ]){
var temp = arr[j];
arr[j] = arr[ j + 1 ];
arr[ j + 1 ] = temp;
}
}
}
console.timeEnd(‘bubbleSort‘);
return arr;
}
//#改進冒泡排序在一趟排序結束時發現未有任何交換位置,說明已經有序,無須再進行下趟循環
function advbubbleSort(array) {
var arr = array.slice(0);
console.time(‘advbubbleSort‘);
var i = arr.length, exchange;
for(; i > 1; i--){
exchange = false;
for(var j = 0; j < i; j++){
if(arr[j] > arr[ j + 1 ]){
exchange = true;
var temp = arr[j];
arr[j] = arr[ j + 1 ];
arr[ j + 1 ] = temp;
}
}
if (!exchange) {
console.timeEnd(‘advbubbleSort‘);
return arr;
}
}
console.timeEnd(‘advbubbleSort‘);
return arr;
}
//#選擇排序將數組第n個元素暫存,再與剩余的數據比較將最小的指放入暫存並重復,不必在內循環中讀寫數組,比冒泡算法提高了執行效率
function selectSort(array){
var arr = array.slice(0);
console.time(‘selectSort‘);
var i = 0, len = arr.length, min;
for(; i < len - 1; i++){
min = i;
for(var j = i + 1; j < len ; j++){
if(arr[j] < arr[min]){
min = j;
}
}
if(min != i) {
var temp = arr[i];
arr[i] = arr[min];
arr[min] = temp;
}
}
console.timeEnd(‘selectSort‘);
return arr;
}
//插入排序很好理解,就像打撲克,抓起一張牌插入隊列,右邊的牌順序向右移動
function insertSort(array) {
var arr = array.slice(0);
console.time(‘insertSort‘);
var temp, i = 1, len = arr.length;
for(; i < len; i++){
temp = arr[i];
var j = i;
while ( j > 0 && arr[j-1] > temp){
arr[j] = arr[j-1];
j--;
}
arr[j] = temp;
}
console.timeEnd(‘insertSort‘);
return arr;
}
//快速排序，選擇一個元素作為基準值(pivot)。將小於基準值的元素和大於基準值的元素分開保存
function qSort(array) {
var arr = array.slice(0);
return (function () {
console.time(‘qSort‘);
var quickSort = function(ar){
if(ar.length == 0){
return ar;
}
var left = [],
right = [],
start = ar[0],
len = ar.length;
for(var i = 1; i < len; i++){
if(ar[i] < start){
left.push(ar[i]);
}else{
right.push(ar[i]);
}
}
return quickSort(left).concat(start, quickSort(right));
}
var result = quickSort(arr);
console.timeEnd(‘qSort‘);
return result;
}());
}
//生成隨機數組
function getArray(len){
var i = 0, rArray = [len];
for(; i < len; i++ ){
rArray[i] = Math.floor(Math.random() * len );
}
return rArray;
}
//轉字符串
function arrayToString(arr){
var resString = arr.join(‘ ‘);
return resString.replace(/(\d+\s){10}/g, ‘$&\n‘);;
}
//開始測試
var testArray = getArray(50000);
var inA = insertSort(testArray);
var selA = selectSort(testArray);
var bubA = bubbleSort(testArray);
var qA = qSort(testArray);
console.time(‘JSNativeSort‘);
testArray.sort();
console.timeEnd(‘JSNativeSort‘);5萬條數據在Chrome瀏覽器中測試結果如下
insertSort: 715.124ms
selectSort: 1312.504ms
bubbleSort: 12704.735ms
qSort: 89.784ms
JSNativeSort: 27.051ms4.開始使用Yarn管理依賴
Yarn是一個快速高效的依賴管理工具。
裝Yarn 緩存了每個下載過的包，所以再次使用時無需重復下載。 同時利用並行下載以最大化資源利用率，因此安裝速度更快。
那麽，是時候拋棄npm緩慢的進度條了，看下效果:
ymk:mbr-scaffold Halley$ yarn add sass
yarn add v1.7.0
[1/4] ?? Resolving packages...
[2/4] ?? Fetching packages...
[3/4] ?? Linking dependencies...
warning " > [email protected]" has unmet peer dependency "prettier@>= 0.11.0".
[4/4] ?? Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
? Done in 5.17s.5.17s，sass安裝完成
安裝Yarn
使用Homebrew安裝Yanr安裝非常簡單
brew update
brew install yarn初始化項目
yarn init添加依賴包
yarn add [package]
yarn add [package]@[version]更新依賴包
yarn upgrade [package]
yarn upgrade [package]@[version]刪除依賴包
yarn remove [package]5.常用git命令
git log --pretty=oneline 顯示提交日誌，完整版本號
git reflog 查看命令歷史
git reset --hard HEAD^ 回到上一版本
git reset --hard cb926e7e 回到某一個版本
git add 加入暫存取
git commit 提交到當前分支
git checkout -- file 丟棄工作區修改
git reset HEAD file 撤銷暫存區
git rm file 刪除文件
git remote prune origin 遠程分支刪除後同步本地東航電商前端技術周刊第四期20180629