时间戳

首页 > 解决方案 > Javascript 变量作为函数名

javascript - Javascript 变量作为函数名

问题描述

const self = {
        element: document.querySelector(selector),
        html: () => self.element,
        on: (event, callback) => {
            self.element.addEventListener(event, callback);
        },
        style: {
            alignContent: (property) => {
                return (property === null) ? self.element.style.alignContent : self.element.style.alignContent = property;
            }
     }
}

我正在努力做到这一点，因此我可以使用 jQuery 之类的选择器快速访问所有 CSS 样式属性，它应该可以作为：select('h1').style.alignContent('center')，但问题是我必须为每个样式属性创建一个单独的函数才能使此方法起作用，有没有办法在不重复大量代码的情况下解决这个问题？

//Duplication example
color: (property) => {
  return (property === null) ? self.element.style.color : self.element.style.color = property;
}

标签： javascript

解决方案

一种方法是使用Proxy（mdn）：

let elemWrapper = selector => {
  let element = document.querySelector(selector);
  return {
    element,
    html: () => element,
    on: (event, callback) => {
      element.addEventListener(event, callback);
    },
    style: new Proxy({}, {
      get: (obj, prop) => {
        // The user called a function named "prop"
        // We need to return a function that sets the style property named "prop"
        return cssValue => element.style[prop] = cssValue;
      }
    })
  };
};

let bodyElem = elemWrapper('body');
bodyElem.style.backgroundColor('cyan');

为了证明这个概念，我body使用动态命名的函数设置了元素的背景颜色。

这种方法的最大缺点是代理的性能不佳（这里有关于代理性能的优秀读物）。

这意味着简单地编译所有 css 属性名称的列表并为每个属性名称定义一个函数可能会更快（从不使用代理）。以下代码编译所有 css 属性名称，作为起点：

console.log(Object.keys(document.body.style));

推荐阅读