javascript - 创建编辑器

Question

我试图通过一个练习来理解 JS 中的对象继承，创建一个在线编辑器，就像我正在写的这个一样。

但是..我在这里有点困惑，我想使用 data-* 来操作我的编辑器:

<div class="editor__wrapper">
 <div data-editor="toolbar">
 </div>
 <textarea data-editor="textarea"></textarea>
</div>

所以，我尝试像这样初始化:

$(window).on('load', function() {
 $('[data-editor]').each(function() {
  var element = $(this);

   var editor = new Editor(element);
 });
});

和编辑:

var Editor = function(element) {
 this.element = element;
};

但这不是我真正想要的..

我想用 data-* 初始化，但是如果是工具栏就创建一个工具栏，如果是编辑器就创建一个编辑器，但是让两者继承自具有公共(public)属性的父亲。

我在这里有点迷路，你们对此有何看法？还有更好的办法吗？？？

谢谢。

Answer 1

如果您尝试将编辑器设置为根据值来处理要创建的内容，您可以执行以下操作:

<script type="text/javascript">
    $(window).on('load', function() {
        $('[data-editor]').each(function() {
            var element = $(this);

            var editor = new Editor(element);
        });
    });
    var Editor = function(element) {
        this.element = element;
        switch(element.data("editor")){
            case "toolbar":
                // Do something magic
                console.log("toolbar");
                break;
            case "editor":
                // Do something less magic
                console.log("editor");
                break;
            default:
                // Be sad and lonely
                console.log("lonely");
                break;
        }
    };
</script>

虽然这对 JS 中的对象继承没有帮助。为此，您需要进行原型(prototype)设计，这会变得……复杂。您可以在此处查看示例: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Inheritance