JasonCodingBlog

Coding Road

0%

Posted on Edited on In

箭頭函式（Arrow Function）

ES6 增加了箭頭函式使我們的程式碼更簡潔

去掉 function 加入 =>
只有一個參數 （）可加可不加，兩個以上一定要加 （params,params2）
箭頭函式 this 指向外層

函式比較

1
2
3
4
5
6
7
// ES5
const numbers =[2,3,4];

const double =numbers.map(function(number){
    return number * number;
});
console.log(double)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ES6
const numbers =[2,3,4];

const double =numbers.map((number)=>{
    return number * number;
});

const double =numbers.map(number=>{
    return number * number;
});

const double =numbers.map(number=>number * number);

console.log(double)

this比較

1
2
3
4
5
6
7
8
9
10
11
12
13
// ES5
const Jason={
    name:'Jason',
    hobbies:['Coding', 'Running', 'Sleeping'],
    printHobbies: function(){
        let self=this //透過宣告變數來取得外層this
        this.hobbies.map(function (hobby) {
            console.log(this) //指向window
            console.log(`${self.name} loves ${hobby}`); 
        })
    }
}
Jason.printHobbies();
1
2
3
4
5
6
7
8
9
10
11
// ES6
const Jason={
    name:'Jason',
    hobbies:['Coding', 'Running', 'Sleeping'],
    printHobbies: function(){
        this.hobbies.map(hobby=> {
            console.log(`${this.name} loves ${hobby}`); 
        })
    }
}
Jason.printHobbies();

Posted on Edited on In


在 ES6 之前 JavaScript 沒有區塊域的概念，因此經常使用 var 來宣告變數，
而造成區域變數覆蓋到全域變數，因此才有 let、const 來避免此狀況產生。

let

用法就跟 var 沒有差別，但作用域只在括號內，讓我們看個經典例子來瞭解

1
2
3
4
5
6
for (var i = 0; i < 3; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 10);
}


我們會發現出來的結果是 這執行第3次，而不是我們要的結果，
因為 var 宣告 i 會變成全域變數，造成 for 迴圈累加，
在 setTimeout 實際執行時只會拿到 3 這個數字。
此時在查找 i，發現 i＝3，疑～🧐 不是只會作用在函式裡嗎？
怎麼 window 也讀得到？

用 let 改寫

1
2
3
4
5
6
for (let i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 10);
}


我們會發現結果會依序跑出，且查找i，
顯示 Uncaught ReferenceError: i is not defined，
i 變數未被宣告，因為 let 作用域只在括號內。

const

是宣吿一個常數，且必須一定要有值，不可被更改。

1
2
3
const a=1;
let  a=2;
a=2

物件是例外

因為物件是傳址而不是傳值

1
2
3
4
5
const CLOTHES ={
    color:'red',
    size:'L',
}
CLOTHES .material="棉"

盡量少用 var 用 let、const 做取代
const 可以宣告不太會更動的內容。ex: DOM 、物件、api
const 常數可以用大寫，以利區分

Posted on Edited on In

s

分支

在開發中我們會有許多版本，像是開發版、測試版，測試功能都正常，才會合併到上線版。

分支就像是影分身術的概念，而我們會透過 git 的指令，來取需要分身的部分。 

1
2
新增分支：git branch 分支名稱
查看分支：git branch

HEAD 表示目前在哪裡，預設是指向 master

1
2
3
切換分支：git checkout 分支名稱
刪除分支：git branch -d 分支名稱 、-D 是強制刪除
還原上個版本：git reset HEAD^

HEAD 代表目前位置
HEAD^ 代表 HEAD 往前一個版本，HEAD^^ 代表 HEAD 往前二個版本
HEAD~1 代表 HEAD 往前一個版本，HEAD~4 代表 HEAD 往前四個版本



分支合併

Merge

在使用 merge 合併分支的時候，git 預設會以 fast-forward 的模式進行，那什麼是 fast-forward 和 no-fast-forward 呢？

fast-forward

1
git merge 分支名稱


Gif 來源：CS Visualized

no-fast-forward

1
git merge 分支名稱 --no-ff


Gif 來源：CS Visualized

可以很清楚的看到同樣都是 merge，使用 no-fast-forward 的模式，會長出小耳朵，可以讓成員在日後很清楚辨識不同的 Commit 歷程，但小耳朵過多會造成混亂，所以會需要 fast-forward 用來 merge 些較不重要的 Commit，像是零碎的 bug fix，保持 Commit 的乾淨。

重要的合併用 git merge 分支名稱 --no-ff
不重要的合併用 git merge 分支名稱

衝突

當同時修改同一個檔案的同一行code，就會發生衝突，
因為 git 無法知道哪個才是正確的內容，
這時就需要雙方溝通，看要用誰的code。

假設我們在 cat 分支修改了 index.html 的內容如下：

然後在 dog 分支剛好也修改了 index.html，內容如下：

這時候進行合併，發現因為第 9 行重複，所以產生了衝突，
此時狀態，已被放置至暫存區。
選要用哪個內容，在跑過一次 Commit 流程，就解決衝突了。

Rebase

從字面上來看，「rebase」是「re」加上「base」，翻成中文大概是「重新定義分支的參考基準」的意思。

合併版本


Gif 來源：CS Visualized

修改歷史 commit 紀錄


Gif 來源：CS Visualized

使用 Rebase 來合併分支

優點:很自由可以自己決定歷史順序
缺點:有時候恍神失智，忘了自己 Rebase 到哪，
不小心弄壞了還不知道怎麼 reset 回來 (¬_¬)，
發生衝突時會停在一半，對不熟悉 Rebase 的人來說是個困擾

使用時機

通常在還沒有推（Push）出去但感覺得有點亂（或太瑣碎）的 Commit，可以先使用 Rebase 分支來整理完再推出去。但如同前面提到的，Rebase 等於是修改歷史，修改已經推出去的歷史可能會對其它人帶來困擾，所以對於已經推出去的內容，非必要的話請盡量不要使用 Rebase。

技術總結:

創立 branch 用 git branch 分支名稱
切換 HEAD 位置 git ckeckout 位置
合併到主要版本用 git merge 分支名稱 --no-ff
整理 commit 點 可以用 git rebase 和 git merge

參考文章

為你自己學 Git

練習 Git 小遊戲

Learn Git Branching

Posted on Edited on In

本篇適用於完全不會Git的人，將一步步帶你上傳檔案至GitHub

安裝

首先到 Git 官網 ，下載Git
以下為 windows 環境下示範 ，開始選單> 所有程式> Git> Git Bash
然後開啟 Git Bash

讓我們瞭解基本的 command 指令

  1. 移動路徑：cd 路徑
  2. 回上一層：cd ..
  3. 開新資料夾： mkdir 資料夾名稱
  4. 開新檔案： touch 檔案名稱

    設定

    首先先設定使用者的資料，這些資訊將作為提交者資訊顯示在版本控制的歷史記錄中。
    1
    2
    3
    $ git config --global user.name "<使用者名字>"
    $ git config --global user.email "<電子信箱>"
    $ git config --list //來確認使用者資料

    Git 基礎操作

    創建 Git

    1
    2
    3
    4
    新增一個資料夾
    cd 資料夾的路經 
    $ git init //開啟一個新的 git 
    $ touch index.html //建立一個檔案,可依自己需求建立，此示範為 index.html

    確認工作目錄與索引的狀態

    從下圖我們得知檔案還未 commit , 系統建議我們先把它加入索引,不然會 commit 不到
    1
    $ git status

    將檔案加入至索引

    透過 $ git status，我們得知檔案已被加入索引。
    1
    2
    3
    $ git add '檔案名稱' //加入指定檔案
    $ git add . //未加入的檔案一次加入
    $ git status

    執行commit命令提交檔案

    最後只要執行 git commit -m "更新註解" 就可以將本次更新的內容提交到數據庫了。
    1
    2
    $ git commit -m "update1" 
    $ git log //查詢提交記錄

    遠端數據庫 GitHub

    申請 GitHub 帳號

    申請完 GitHub 帳號，我們要創建一個資料夾，來當遠端數據庫。


連結至 GitHub 遠端數據庫

透過 $ git clone 'GitHub 的 URL'，連結至 GitHub 的遠端數據庫

1
$ git clone 'GitHub 的 URL'

上傳至 GitHub 專案

透過 $ git push 將本地端數據庫上傳至雲端數據庫 ，會要求你輸入 GitHub 的帳號密碼以確認。

1
$ git push



操作過一次流程，我們就瞭解
$ git init 建立工作目錄
$ git add . 把工作目錄的檔案加入索引
$ git commit -m '' 將索引的檔案提交至本地數據庫
$ git clone 'URL' 連接至遠端數據庫
$ git push 本地端數據庫上傳至雲端數據庫

Posted on Edited on In

Hexo 基礎設定

設定網站名稱、及作者名稱

開啟目錄資料夾中的 _config.yml搜尋site

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Site
title: JasonCodingBlog //網站名稱
subtitle: 'Coding Road' //副標題
description: '不要等待運氣來臨，應該主動去努力掌握知識。' //網站敘述
keywords: //關鍵字
author: Jason06286 //作者名稱
language: zh-tw //語系
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://jason06286.github.io/ //輸入您的網站URL
root: /
permalink: :year:month:day/:abbrlink/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

設定主題

下載 themes 並解壓縮到資料夾內的 themes 資料夾內，
開啟目錄資料夾中的 _config.yml搜尋theme

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next-master //更改成你所下載的主題名稱

Next

加入 Google Analytics

這邊使用 NexT 7.8.0 模板作舉例。
進入主題 (Next) 中尋找 _config.yml 檔案，搜尋Google Analytics

1
2
3
google_analytics:
  tracking_id: 
  only_pageview: false
1
2
3
google_analytics:
  tracking_id: UA-XXXXXX-1 //UAID追蹤碼
  only_pageview: false

更改 Next 主題樣式

進入主題 (Next) 中尋找 _config.yml 檔案，搜尋scheme
想要使用哪一個，打開註解即可。

1
2
3
4
5
# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

設置側邊欄

進入主題 (Next) 中尋找 _config.yml 檔案，搜尋menu，
想要使用哪一個，打開註解即可，若tags、categories跳出 404，
請參照此解決辦法。

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home
  # about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  # schedule: /schedule/ || fa fa-calendar
  # sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

開啟 Social Media

進入主題 (Next) 中尋找 _config.yml 檔案，搜尋menu，
想要使用哪一個，打開註解即可。

1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/jason06286 || fab fa-github
  E-Mail: mailto:dj4871114@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  FB Page: https://www.facebook.com/profile.php?id=100000248997692 || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

開啟 Gitalk 留言版

建立 GitHub OAuth APP

由於要使用 Gitalk 必須先有 GitHub OAuth，首先開啟 GitHub → Setting

接下來選擇 Developer settings

然後點 OAuth Apps ，新增 New OAuth Apps

接下來依照欄位填寫即可

1
2
3
4
Application name - 應用程式名稱
Homepage URL - 應用程式網域 → 部落格網址
Application description - 應用程式描述
Authorization callback URL - 授權回應網址 → 部落格網址


申請完之後，你會獲得兩組 ID (Client ID、Client Secret)

Gitalk

進入主題 (Next) 中尋找 _config.yml 檔案，搜尋Gitalk

1
2
3
4
5
6
7
8
9
gitalk:
  enable: true
  github_id:  //GitHub 作者帳號
  repo: jason06286.github.io //你的 Repo 名稱，通常就是網域
  client_id: xxxxxxxx //剛剛申請的 Client ID
  client_secret: xxxxxxxx //剛剛申請的 Client Secret
  admin_user: jason06286 //管理者的帳號
  distraction_free_mode: true //無干擾模式
  language: zh-TW //語系

Posted on Edited on In

為什麼要建立 Hexo 部落格

從今年開始學習前端技術，不知不覺也過了半年了，覺得自己的技術有所成長，
可以藉由寫文章幫助大家並整合自己的技術。平台這麼多，為何我會選擇 Hexo ？

因為 Hexo 是要用指令來開發，也必須配合 Git 做使用，，是不是摸蜊仔兼洗褲呢！

Hexo 是使用 Ｍarkdown 撰寫格式，也需要熟悉 Git 指令還有一點 npm 的知識，
可以參考下方連結教學。

Ｍarkdown
Git
npm

建立 Hexo 部落格

版本與環境

作業系統： macOs

Nodejs:：v12.18.3 LTS

IDE：VS Code

本文環境

Hexo 版本

hexo: 5.0.0

hexo-cli: 4.1.0

從 GitHub 建立新的數據庫 (Creat a new Repository)

  • 名稱務必要謹慎設定，因為之後就無法更改，若想要修改只能重新建立數據庫，記得後面的 github.io 要打一樣的。
  • 下方的權限直接用 Public (公開) 即可，若一開始還不想公開就選擇 Private (私人的)。
  • 其他不用更動，直接選擇最下方的綠色按鈕 (Create repostory) 建立數據庫

安裝 Hexo

使用指令安裝 Hexo，開啟終端機，輸入以下指令：

1
npm install hexo-cli -g

指令說明：透過 npm 在 全域 (-g) 下安裝 Hexo-Cli

可以透過以下指令，確認是否安裝成功

1
hexo -v

建立 Hexo

在要存取的硬碟中開啟一個新資料夾，並自訂名稱 (建議用英文)，之後的資料就會在這個資料夾內，並輸入以下指令：

1
hexo init projectname
  • projectname 改成自己定義的名稱，建議用英文，安裝完成後如下圖：

進入 Hexo

在終端機輸入：

1
cd projectname
  • projectname 為自定義名稱

    安裝相關套件

    由於建立完畢的 Hexo 還必須安裝 npm 相關套件，所以必須在這個目錄下輸入：
    1
    npm install
  • 指令說明：將 package.json 相依套件下載下來

啟動 Hexo

完成上方內容後再輸入下方指令：

1
hexo server


  • 就會產生一個本地端 4000的網頁

    將資料上傳至 GitHub

    1
    2
    3
    4
    5
    6
    git init //創建一個 git 初始檔
    git add README.md
    git commit -m "first commit"
    git remote add origin https://github.com/jason06286/1234.git //創建一個遠端資料庫
    git push -u origin master // 將資料上傳至遠端 master 分支

    部署 GitHub

需要安裝一個 Hexo 沒有安裝的插件

1
npm install hexo-deployer-git --save

修改 _config.yml 中的 Depolyment 如下：

1
2
3
4
deploy:
  type: git // 模式
  repo: https://github.com/yourGithub /yourGithubName.github.io.git // 自己 GitHub repos 連結
  branch: master // 分支

修改完後輸入下方指令：

1
2
hexo g d

  • 指令說明：g →生成靜態頁面、d →部屬

    其他指令

    1
    hexo new "title"
  • 建立新文章
    1
    hexo s
  • s →啟動伺服器 
    1
    hexo g d
  • g →生成靜態頁面 d →部屬模式 
    1
    hexo clean
  • 刪除已生成的靜態頁面及快取檔案

    刪除指定文章

    在本地端 source 資料夾，把指定的 md. 檔案刪除，在重新佈署即可，指令為：
    1
    hexo g d

參考文章：https://hsiangfeng.github.io/hexo/20190411/932826160/
參考文章：https://www.youtube.com/watch?v=jOJI9ekTzK8&t=3809s

Posted on Edited on

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment