iT邦幫忙

1

Javascript 是不是有什麼方法可以記錄我準備執行的function

範例:
(我簡單打一下,敘述我的問題重點,有問題莫怪)
(我的專案是Vue+JS)

<button @click="status?isShowPassword=true:doSomething()">
    DoSomething
</button>

<Password
    v-if="isShowPassword"
    @cancel="cancelPassword"
></Password>

<script>
export default {
    components: {
        Password,
    }
    data() {
        status: true,
        isShowPassword: false,
    },
    methods: {
        doSomething: function () {
            console.log("doSomthing")
        },
        cancelPassword: function (passStatus) {
            this.isShowPassword = false;
            if (passStatus) {
                this.doSomething();
            }
        }
    }
}
</script>

解釋一下
這段主要是一顆按鈕
按下後
status是判斷權限用
當false跳過輸入密碼的階段,直接執行doSomething
當true則跳出設計好的Password Component
並輸入密碼
這邊密碼通過與否都會透過cancelPassword回傳狀態
當回傳為密碼成功(true)
則會執行那顆安扭原本應該執行的function(doSomething)

我的問題是
我的類似的按鈕不只一顆
而且要執行的function也不見得一樣
有些function也有可能傳遞一些參數
不同於上面的範例是丟空參數

例如:

<button @click="status?isShowPassword=true:doSomething()">
    DoSomething
</button>

<button @click="status?isShowPassword=true:showMyName('My name is Jhon')">
    ShowMyName
</button>

<Password
    v-if="isShowPassword"
    @cancel="cancelPassword"
></Password>

<script>
export default {
    components: {
        Password,
    }
    data() {
        status: true,
        isShowPassword: false,
    },
    methods: {
        doSomething: function () {
            console.log("doSomthing")
        },
        showMyName: function (name) {
            console.log(name)
        },
        cancelPassword: function (passStatus) {
            this.isShowPassword = false;
            if (passStatus) {
                //this.doSomething();
                //this.showMyName('My name is Jhon');
                //這邊不能寫死
            }
        }
    }
}
</script>

問題在於這些按鈕共用這個component
我想到的解法是
能不能在我按鈕判斷那一行
status?isShowPassword=true:doSomething()
isShowPasswowrd=true後面加上一段
用某個變數紀錄我這個按鈕要執行的function包含其參數
例如
isShowPasswowrd=true;
dofunction=showMyName('My name is Jhon');
好讓我在cancelPassword這個function
在判斷密碼通過後
直接執行這個變數就好

if (passStatus) {
    //this.doSomething();
    //this.showMyName('My name is Jhon');
    this.dofunction;
}

當然
我知道上面這個寫法是錯的...=.=
想詢問板上的高手們
是不是有什麼類似的方法或是其他解法

froce iT邦大師 1 級 ‧ 2020-12-10 16:42:34 檢舉
多一個array,執行其他函數時丟物件把函數、參數丟進這樣?

但我建議:
檢查權限丟在doSomething裡面...

2 個回答

2
通靈亡
iT邦研究生 3 級 ‧ 2020-12-11 10:25:21
最佳解答

用某個變數紀錄我這個按鈕要執行的function包含其參數

其實是可以的,可以用變數儲存要執行的函數,並傳入儲存的變數。

https://codesandbox.io/s/jovial-dirac-cyyi8?file=/src/App.vue:0-1419

this[fnName](...parameter);
<template>
  <div id="app">
    <button @click="($event) => buttonHandler($event, 'buttonFn01')">
      button 01
    </button>
    <button
      @click="
        ($event) => buttonHandler($event, 'buttonFn02', 'My Name is Jeff', 'p2')
      "
    >
      button 02
    </button>
    <password-box
      v-if="passwordBox.isShowPassword"
      @OnOK="PasswordOnOk"
    ></password-box>
  </div>
</template>

<script>
import PasswordBox from "/src/components/PasswordBox.vue";
export default {
  name: "App",
  components: {
    PasswordBox,
  },
  data() {
    return {
      passwordBox: {
        isShowPassword: false,
        status: false,
      },
      fnHandler: {
        fnName: "",
        parameter: [],
      },
    };
  },

  methods: {
    buttonHandler(event, fnName, ...parameter) {
      if (this.passwordBox.status === false) {
        this.fnHandler.fnName = fnName;
        this.fnHandler.parameter = parameter;

        this.passwordBox.isShowPassword = true;
      } else {
        this[fnName](...parameter);
      }
    },
    PasswordOnOk() {
      this.passwordBox.status = true;
      this.passwordBox.isShowPassword = false;

      this[this.fnHandler.fnName](...this.fnHandler.parameter);
    },
    buttonFn01() {
      alert("This is buttonFn01");
    },
    buttonFn02(parameter, parameter2) {
      alert(parameter);
      alert(parameter2);
    },
  },
};
</script>

<style>
</style>

學到了!!/images/emoticon/emoticon12.gif

0

在javascript裏。

是可以將函式丟給變數的。
只是沒辦法儲存要傳入的變數。

正常來說,也比較沒人會像這這樣幹就是了。
大多數就是將要儲存的變數用個全域或半域的變數來處理。

則在呼叫函式時直接帶入該變數來處理。

還有一種寫法是叫臨時性函式應用。

func1 = function(){};

這大多數是為了特殊處理或是callback應用居多。
你也可以往這方面去想。

我是有另一個方法可以解決
就是呼叫Component的時候丟個參數或字串給他
告訴這個Component
等等我要執行一個function
例如我丟字串showMyName
等Component做完他的事後
除了回傳密碼通過狀態
同時回傳我剛剛給他的showMyName
最後
我在我接到回傳參數的function
寫switch判斷接到什麼參數就case什麼function
只是這樣的維護會有點不優
如果同一頁面有10個這樣的功能要接
switch會很長
又如果另一個頁面有同樣的事情要做
但功能命名又都不一樣
於是
這段switch不僅長
複製後,還得大改一番

再包一層就好了。或是將常用的動作給物件化處理也是一招。

通靈亡 iT邦研究生 3 級 ‧ 2020-12-11 10:47:19 檢舉

用 Property accessors 是可以做到呼叫存在變數的函數並傳入儲存的參數

我要發表回答

立即登入回答