Skip to main content

1-8

scrollTop clientHeight 複習​

Vue Props​

  • props 設定 default 為物件或陣列時，需用 function return 給值
props: {
  position: {
    require: false,
    type: Object,
    default () {
      return {
        top: 0,
        right: '80px'
      }
    }
  }
}

Object.values() & Object.keys()​

  • 將物件轉陣列，前者取其值轉陣列，後者取其鍵轉陣列
  • 會建立新的參考，轉換後做變動皆不影響原物件
  • const array = Object.values(data)

Object.assign()​

  • 將多個物件合併，回傳合併後的物件，參數可帶入多個
  • Object.assign() 不會在來源物件屬性的值為null 或 undefined 的時候拋出錯誤
  • 為淺拷貝，其參照的屬性內物件有更改自身也會更改
  • 若合併的兩個物件其屬性名相同，後者的值會覆蓋前者
  • const newData = Object.assign(oldData, otherData1, otherData2)
  • 目標物件 (oldData) 其自身也會變得跟 newData 一樣，可用 Object.assign({},oldData, .....) 代替

Nuxt.JS: middleware​

  • 提供方法在進入路由頁面前進行調用
  • 例如判斷是否已有登入 token
  • 在 middleware 資料夾中新增 JS 檔，檔名會對應使用時的名稱
// authenticated.js
export default function({ route, store, redirect }) { // 可取得 route, store 資料進行應用，很方便
    // 如果使用者不存在，跳到登入頁面
    if (!store.getters.adminUser) {
        redirect('/admin')
    }
}
  • 若只要在特定的 vue 檔內進行 middleware
*// XXX.vue**
export default* {
    middleware: 'authenticated',
    // data......
    // methods......
}
  • 若全頁面進行調用
// nuxt.config.js
module.exports = {
  router: {
    middleware: 'authenticated'
  }
  // ...
}

簡易亂數字串​

Math.random();// 0.2681560355715408
//隨機小數
Math.random().toString(36);//0.jh5mobu22br
//36是進位方式指定，從2到36進位
//如果使用36進位就是等於10碼數字+26英文
Math.random().toString(36).substring(7);
//從第7個字開始抓，所以是13 - 7 = 6 個隨機數字+字母

Docker 記憶體浪費​

  • 當 container 中程式有印出 log 訊息之類時，會在 docker 紀錄，若日積月累沒清掉的話會造成記憶體的浪費
  • docker file 有提供參數設定 log 紀錄的最大值和設定寫一份檔案

遞迴物件內值(好用​

obj.getVaule = function(key, defaultValue) {
    const keys = key.split('.')
    let result
    for (let key of keys) {
        if (result === undefined) {
            result = this[key]
        } else {
            if (result[key] !== undefined) {
                result = result[key]
            } else {
                result = defaultValue
            }
        }
    }
    if (result === undefined) {
        return defaultValue
    } else {
        return result
    }
}
  • obj.getVaule(‘foo.bar.name’, ‘Jason’ ) // 找此物件底下是否有該值，若沒有則返回第二個參數

windows 環境 → npm script​

  • 例："build": "vue-cli-service build --target lib --name miap-blackhole 'src/components/index.js'"
  • 參數路徑在 macOS 環境用單引號包沒問題，但在 windows 環境中不能，改成 src/components/index.js 後雙環境都OK

export 檔案功能​

Last updated on