Question

我有一个JavaScript框架，可向元素添加API属性。它通过此属性提供一个接口。

<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()这样的方法。它们与存储在元素上的数据无关。

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

谢谢。

Answer 1

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

我认为最好使用类似“ 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>

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

1 个答案: