成果：
自己畫的最可愛，不過跟本體還是有點落差，有點企鵝感？
結構：
大概就是分成頭、身體、腳，利用 position 把手腳眼睛鼻子耳朵等拼接上去，利用一些圖層
疊加的概念，還有 CSS 旋轉語法。
附上 CSS：
transform: rotate(-30deg);
2020年10月27日 星期二
let const 寫 JavaScript 的習慣養成
其實現在還有些情況為了相容性，會把寫好的 ES6 語法編譯回去 ES5 ，因此要了解新寫法
與舊寫法的區別實益在哪？在舊的 var 宣告法造成的雷有：
1. 提升：
var math = function () {
console.log( x );
var x = 10
}
console.log( x ) // undefined
由於 function 內有宣告，因此還是可以執行，但是實際上從上到下執行 console.log 的時候，x 還沒宣告，因此是 undefined 。
2. 全域變數：
var x = 1
var math = function (y) {
x = 10;
return x + y
};
console.log( math(3) ); // 13
console.log( x ) // 10
當 JavaScript 在 function 內找不到宣告時，就會一層一層往外找，所以最後就改了最外層的 x 。
知道這些問題之後，其實只要養成良好的開發習慣不用 let 與 const 也無所謂，但就是加一層
保險， let 用於宣告一個「只作用在當前區塊的變數」，因此不會超出當前區塊； Const 有點像
使用 let 所宣告的變數，具有區塊可視範圍。常數不能重複指定值，也不能重複宣告。
結論：為了避免變數遭到預期外的修改，變數都應該先宣告再做使用，並且盡量元件化各自
可以運作，而不是 a 去改 b 、 b 又改 c 造成難以維護與判斷更改數值的源頭。
參考資料：
2020年10月24日 星期六
Vue.js 資料傳遞， store方法
架構大概是
A.vue 是 layout 檔案，起始頁面是 A.vue + B.vue(產品列表)的組合，現在要在 B.vue 製作一個
按鈕，可以將被點擊的產品 id 傳遞到 C.vue 的產品詳情頁面，並且跳轉路由使畫面成為
A.vue + C.vue。
失敗經驗：一開始嘗試用 event bus 製作，但始終失敗，推測原因是其中一篇文章說到：
在 C.vue $on 的時候，B.vue已經$emit過了，時間不同，因此跟兩子組件存在同一頁面中的
互傳情況不同。
store 方法：在 src 下建立 store.js ，內容就為將來要傳遞的資料作定義。
numbers 是教學文章中的數字陣列，str是我想傳的物件資料，下方帶上更改資料用的函式。
之後分別套用在 B.vue 以及 C.vue中。
B.vue
import store.js，然後 data 內有欲傳遞的值，template 有一顆啟動 go() 的按鈕就省略不貼了，利
用 store.addStr(x, y) 將 B.vue 中 products[0] 的 id 以及 title 存在 store.js 的 state.str.id 與
state.str.title 裡面，下面補上一個 $router.push ，接著就可以去 C.vue 了。
C.vue
在 import store.js 之後，create 階段就可以檢查資料有沒有正確載入，但要在 template 中顯示
還是需要將 store 裡的資料取出來，如上圖所示，之後在 C.vue 中這些都可以正確顯示啦！
參考資料：
2020年10月19日 星期一
JavaScript 傳值、傳址
這個問題主要是做商品資料更新時候學到的作法：先開一個新陣列或物件儲存 API 傳回來的
資料，從簡易的邏輯來看，修改前跟修改後如果用的是同一筆資料，那修改之後就無法找回
修改前的資料。
在 JavaScript 中，基本型別的比較是傳值，也就是：
var a = 100; //number
var b = a; // 100 , number
console.log( a === b ) // 100 = 100
答案會是 true
但是在物件型別，也就是最常需要處理的商品資料中，是傳址，也稱作傳參考，例如：
var c = { price:100 }; //object
var d = { price:100 }; //object
console.log( c === d) // { price:100 } != { price:100 }
答案會是 false，這邊的思考可以想成是加了一個隱藏屬性地址，所以是
{ c , price:100 } != { d , price:100 }，c 當然不等於 d ，所以是 false。
這會產生什麼需要注意的事情呢？當有兩個產品價格相同，然後你就快樂寫了
var e = { price:100 };
var f = e //感覺省了一串
//然後 f 商品要改價格的時候
f .price = 80;
console.log(e); //80
console.log(f); //80
就會產生慘劇，延續上例，也就是 JavaScript 照著地址去把 e 的 price 屬性給改了，所以不同商品要乖乖做好預設值。
例外：function 的參數內的物件被重新賦值(x = y)的時候，外部變數的內容不受影響，但僅止於
此，若更改屬性仍然有效。
參考資料：
《0 陷阱！0 誤解！8 天重新認識 JavaScript！》Kuro Hsu 著
2020年10月7日 星期三
Pointer-events CSS3 在疊加圖層中點擊下層圖層
pointer-events:auto 預設值
pointer-events:none 可讓滑鼠點擊不生效，還有其他設置僅限SVG使用，可閱讀參考資料
文章。
這個 CSS 屬性可以在日常利用 position:relative 跟 position:absolute ，做出疊加圖層的時候，上
層有是漸層色彩或陰影，主要不同按鈕與連結在下層時，在上層增加這個 CSS 屬性後，就可以安心的
在下層做出主要按鈕或連結，而不會點擊到上層圖層導致點不到連結的情況，也可以使網頁結構更加穩
定。
參考資料：https://www.oxxostudio.tw/articles/201409/pointer-events.html
Vue Cli 一鍵部屬 Github Pages win10
目標：將本地端用 Vue Cli 建立的網站 Git Push 到 Github 並且打開 GitHub Pages。
在 Vue 專案資料夾下建立 deploy.sh。
在 deploy.sh 內建立以下內容：
set -e
originUrl=$(git config --get remote.origin.url)
nowStatus=${originUrl:0:5}
echo $nowStatus
if [ $nowStatus = 'https' ]
then
echo '傳輸方式採用 HTTPs 模式'
echo '目前遠端分支 URL：'$originUrl
else
echo '傳輸方式採用 SSH 模式'
echo '目前遠端分支 URL：'$originUrl
fi
npm run build
echo '移動目錄到編譯出來的 dist 資料夾'
cd dist
git init
git add .
git commit -m "update `date +'%Y-%m-%d %H:%M:%S'`";
git push -f $originUrl master:gh-pages
cd -
儲存檔案，然後先把編譯前的檔案 Push 到 GitHub 確定不會卡驗證。
筆者是用 VSCode 完成編譯前的檔案上傳。
下載 Git 並安裝。
https://gitforwindows.org/
開啟 Git Bash ，並 cd 到專案資料夾。
輸入 sh deploy.sh 。
最後回到 GitHub 儲存庫，Setting --> GitHub Pages 開啟並把分支設在 gh-pages 上。
過一陣子應該就可以讀出利用 Vue Cli 建立的 SPA 網站了。
參考資料：https://hsiangfeng.github.io/vue/20200214/1055437216/
訂閱：
文章 (Atom)