函数名为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;
}回答 3
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用户
发布于 2020-07-31 00:18:00
您可以使用Proxy拦截所有获取属性的尝试。
let selector = '#test';
const self = {
element: document.querySelector(selector),
html: () => self.element,
on: (event, callback) => {
self.element.addEventListener(event, callback);
},
style: new Proxy(Object.create(null), {
get(target, prop, receiver) {
if (self.element.style.hasOwnProperty(prop)) {
return val => {
if (val != null) {
self.element.style[prop] = val;
} else {
return self.element.style[prop];
}
}
}
throw Error("No such property exists: " + prop);
}
})
};
self.style.color('red')
console.log("Color:", self.style.color());<div id="test">
This is a test
</div>
您还可以将其封装到一个通用函数中，如下所示：
const getEnhancedElement = arg => {
const element = /Element/.test(Object.prototype.toString.call(arg)) ? arg
: document.querySelector(arg);//accept a HTMLElement or a selector
return {
element,
html: () => element,
on: (event, callback) => {
element.addEventListener(event, callback);
},
style: new Proxy(Object.create(null), {
get(target, prop) {
if (element.style.hasOwnProperty(prop)) {
return val => {
if (val != null) {//set value
element.style[prop] = val;
} else {//get value
return element.style[prop];
}
}
}
throw Error("No such property exists: " + prop);
}
})
};
};
let test = getEnhancedElement("#test");
test.style.color('red')
console.log("Color:", test.style.color());
test.style.textAlign('center');<div id="test">
This is a test
</div>
Stack Overflow用户
发布于 2020-07-31 00:18:53
我会有这样的东西：
style: {
chnageStyle: (propertyName, propertyVal) => {
return (propertyName === null) ? self.element.style[propertyName] : self.element.style[propertyName] = propertyVal;
}
}然后你可以这样调用：
style.changeStyle('alignContent','center');
style.changeStyle('color','orange');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63177122
复制相关文章
相似问题
腾讯云开发者
