函数名为Javascript变量
函数名为Javascript变量
提问于 2020-07-31 00:08:41
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类似的选择器，它的工作方式应该是：select('h1').style.alignContent('center')，但问题是，我必须为每个样式属性做一个单独的函数，以便这个方法工作，有没有办法解决这个问题，而不重复大量的代码？
//Duplication example
color: (property) => {
return (property === null) ? self.element.style.color : self.element.style.color = property;
}Stack Overflow用户
发布于 2020-07-31 00:17:10
一种方法是使用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元素的背景色。
这种方法的最大缺点是代理的性能很差(关于代理性能的优秀读物可以在here上找到)。
这意味着，简单地编译所有css属性名称的列表，并为每个属性名称定义一个函数(从不使用代理)可能会更快。下面的代码编译所有css属性名称，作为起点：
console.log(Object.keys(document.body.style));
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63177122
复制相关文章
相似问题
腾讯云开发者
