Codemirror v5

版本5 -> 6的資料夾結構變動很大

v5

v5的所有套件在npm install codemirror<...

codemirror

什麼是codemirror，它是一款可以實現在前端網頁上的編輯器。
如同現在網路上看到的文字編輯器一樣，但你可以去設定當使用者做哪些操作時codemirror做哪些對應的行為。
CodeMirror v5

閱讀更多

在JS複製object

在寫code有時候會需要使用某些變數或是object，但是又不希望直接對其做操作，因為可能在其他地方會繼續使用原始的object，
這時候就會宣告一個新的變數去把原先的object assign過去。

1
2
3
4
5
6
7
8
9

const source = {name:'Andy',coutry:'Taiwan',phone:'0911-111-111'}
//原始資料

const destination = source 
//新變數
destination.name = 'Rendy';

console.log(destination.name);  //結果: Rendy
console.log(source.name);       //結果: Rendy

某些時候會希望動態改變css的樣式高度、寬度、顏色…等等的
在vue中可以宣告一個ref變數(composition API)，然後把搭丟到vue檔案中的

1
2
3
4

setup(){
    const mdSize = ref("100px");

}

嘗試對npm下載的node_modules裡面的套件的code做修改，但是發現不論怎麼改都不會生效。
才發現在vite & vue3的環境下，vite把一些預先編譯好的東西放到node_modules/.vite中，
所以需要手動刪除這個資料夾去讓編譯器去編譯修改過的程式碼，又或者透過 npm run dev --force

在Vue3 & Composition下，想一次watch多個變數的實現方法

1
2
3
4
5
6
7
8

setup(){
    const message = ref('');
    const name = ref('');
    watch([message,name],([newValueMessage,newValueName],[oldValueMessage,oldValueName])=>{
        //do something
    })
}

什麼是codemirror

codemirror是一個可以應用在web頁面的程式碼編輯器。

如何使用？

前一陣子為了寫一個markdown編輯器尋尋覓覓的網路上搜尋資料，找到codemirror，後來在vue上實現它。

同步與非同步？

什麼是同步

一般來說JS都是以 同步synchronous 的方式執行程式碼，以圖中左邊來說，由上而下的時間軸順序執行程式碼，每次只做一件事，
以同步的字面上來說很像是同時做很多件事，但其實是一次只執行一件事。...