时间戳

首页 > 解决方案 > 将“API”属性作为对象添加到 DOM 元素作为 element.API

javascript - 将“API”属性作为对象添加到 DOM 元素作为 element.API

问题描述

我有一个向元素添加 API 属性的 javascript 框架。它通过这个属性提供一个接口。

<script type="javascript">
var $slider= document.getElementById('mySlider');

//this function inits a slider and adds API property o element
initMyFancySlider($slider);

//now I can access API
$slider.API.next();
$slider.API.play();
// etc...
<script>

这不是通过扩展任何 DOM 原型来实现的。API 属性直接链接到 Element

<script type="javascript">
function  initMyFancySlider(element){
  //some staff

    Object.defineProperty(element, 'API', {
        enumerable: false,
        configurable: false,
        value: MyFancySliderManagerInstance.API;
    });
}
<script>

有人说向 DOM 元素添加属性不是一个好习惯。但我发现它对于 CMS 类型的项目非常有用。用户可以轻松访问 API 来自定义界面。

你的观点是什么？您可以提供更好的方法吗？

只是为了确保，实际上 DOM 元素并没有存储数据，它只是代理了一些 API 功能。我知道 DOM 元素不是用来存储数据或功能的。例如$element.API.play()只是一个方法，如$element.blur(). 它们与存储在元素上的数据无关。

我在这里看不到任何性能开销问题。我在这里可以看到的唯一风险是element.API属性可能会在未来被 DOM 规范使用。但我认为这是一个非常低的概率，因为没有以大写形式指定 DOM 属性。它们始终存在于 camelCase 中（直到现在）。

提前致谢。

标签： javascriptdom

解决方案

最后我放弃了使用这种方法。感谢您的评论。

我认为最好使用“Youtube Iframe API”之类的方法。

<script type="javascript">
var $slider= document.getElementById('mySlider');    
let sliderInstance= new MFSlider.create($slider, {/*options*/});

sliderInstance.next();
sliderInstance.play();

// OR...

MFSlider.get('mySlider').next();
MFSlider.get('mySlider').play();

</script>

推荐阅读