js动态函数（方法）

最新推荐文章于 2024-05-03 11:08:18 发布

volodyan

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量1.7k

点赞数 1

分类专栏： js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_37312180/article/details/128188805

版权

js 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

一、动态函数构成

MethodName-----函数名称

Parameter-----入参

ToolClickFun(MethodName, Parameter) {
        this[`${MethodName}`] &&
          this[`${MethodName}`](Parameter);
      },

二、使用动态函数

    mounted(){
        this.ToolClickFun("TestFun",123)
    },
    methods: {
        ToolClickFun(MethodName, Parameter) {
          this[`${MethodName}`] &&
          this[`${MethodName}`](Parameter);
       }, 
       TestFun(Data){
        console.log(data)
       }
    },

三、结合Promise异步编程使用

创建promise

  let PromiseAllMethods = [];
        this.GetComponentLists.map((ele, index) => {
          let ItemPromise = new Promise((resolve, reject) => {
            this.ToolClickFun(
              ele.ComponentCptMethodName,
              {
                Time: this.GetSelectTimeData,
                No: 0,
              },
              resolve,
              reject
            );
          });
          PromiseAllMethods.push(ItemPromise);
        });
        Promise.all(PromiseAllMethods)
          .then((res) => {
            console.log(res);
            res.map((ele, index) => {
              let ItemComponent = this.GetComponentLists[index];
              ItemComponent.ComponentCptData = ele.data.Data;
              ItemComponent.ComponentLoadingStatus = false;
              ItemComponent.ComponentCptId = GenNonDuplicateID(8);
              ItemComponent.ComponentDate = this.GetSelectTimeData;
              this.$set(this.GetComponentLists, index, ItemComponent);
            });
          })
          .catch((e) => console.log(e));

全部代码：

<template>
    <div class="DialogCptoutbox">
    </div>
  </template>
  <script>
  import { GenNonDuplicateID } from "@/utils/UniqueId";
  export default {
    name: "DialogCpt",
    components: {
        CptOne,
        CptTwo,
        CptThtree,
    },
    data() {
      return {
        GetComponentLists: [
          {
            ComponentName: "测试1",
            ComponentIndex: 0,
            ComponentDate: "",
            ComponentLoadingStatus: true,
            ComponentCpt: "CptOne",
            ComponentCptId: GenNonDuplicateID(8),
            ComponentCptData: {},
            ComponentCptIsShow: true,
            ComponentCptMethodName: "TestFunOne",
            ComponentCptParameter: {
              No: 0,
            },
          },
          {
            ComponentName: "测试2",
            ComponentIndex: 1,
            ComponentDate: "",
            ComponentLoadingStatus: true,
            ComponentCpt: "CptTwo",
            ComponentCptId: GenNonDuplicateID(8),
            ComponentCptData: {},
            ComponentCptIsShow: true,
            ComponentCptMethodName: "TestFunTwo",
            ComponentCptParameter: {
              No: 0,
            },
          },
          {
            ComponentName: "测试3",
            ComponentIndex: 2,
            ComponentDate: "",
            ComponentLoadingStatus: true,
            ComponentCpt: "CptThtree",
            ComponentCptId: GenNonDuplicateID(8),
            ComponentCptData: {},
            ComponentCptIsShow: true,
            ComponentCptMethodName: "TestFunThree",
            ComponentCptParameter: {
             No: 0,
            },
          },
         
        ],
      };
    },
    computed: {
      ...mapGetters({}),
    },
    mounted() {
        this.PromiseAllFun();
    },
    methods: {
      ToolClickFun(MethodName, Parameter, resolve, reject) {
        this[`${MethodName}`] &&
          this[`${MethodName}`](Parameter, resolve, reject);
      },
      PromiseAllFun() {
        /* 创建promise，在promise中调用axios then里使用resolve回调，catch里使用reject回调,GenNonDuplicateID(8) */
        let PromiseAllMethods = [];
        this.GetComponentLists.map((ele, index) => {
          let ItemPromise = new Promise((resolve, reject) => {
            this.ToolClickFun(
              ele.ComponentCptMethodName,
              {
                Time: this.GetSelectTimeData,
                No: 0,
              },
              resolve,
              reject
            );
          });
          PromiseAllMethods.push(ItemPromise);
        });
        Promise.all(PromiseAllMethods)
          .then((res) => {
            console.log(res);
            res.map((ele, index) => {
              let ItemComponent = this.GetComponentLists[index];
              ItemComponent.ComponentCptData = ele.data.Data;
              ItemComponent.ComponentLoadingStatus = false;
              ItemComponent.ComponentCptId = GenNonDuplicateID(8);
              ItemComponent.ComponentDate = this.GetSelectTimeData;
              this.$set(this.GetComponentLists, index, ItemComponent);
            });
          })
          .catch((e) => console.log(e));
      },
      TestFunOne(Parameter, resolve, reject) {
            this.$axios
                .post(AxiosUrl.UrlPath + "TestData1.json",
                    JSON.stringify(Parameter), {
                    headers: {
                        "Content-Type": "application/json;"
                    },
                }
                ).then((res) => {
                    console.log("res:", res);
                    resolve(res);
                })
                .catch((error) => {
                    reject(error);
                });
        },
        TestFunTwo(Parameter, resolve, reject) {
            this.$axios
                .post(AxiosUrl.UrlPath + "TestData2.json",
                    JSON.stringify(Parameter), {
                    headers: {
                        "Content-Type": "application/json;"
                    },
                }
                ).then((res) => {
                    console.log("res:", res);
                    resolve(res);
                })
                .catch((error) => {
                    reject(error);
                });
        },
        TestFunThree(Parameter, resolve, reject) {
            this.$axios
                .post(AxiosUrl.UrlPath + "TestData3.json",
                    JSON.stringify(Parameter), {
                    headers: {
                        "Content-Type": "application/json;"
                    },
                }
                ).then((res) => {
                    console.log("res:", res);
                    resolve(res);
                })
                .catch((error) => {
                    reject(error);
                });
        },
    },
  };
  </script>

GenNonDuplicateID代码：

//生成指定长度的唯一ID
export function GenNonDuplicateID(randomLength) {
    return Number(
        Math.random()
        .toString()
        .substr(3, randomLength) + Date.now()
    ).toString(36);
}

控制台输出：