创建编辑器

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-*初始化，但是如果是一个工具栏就创建一个工具栏，如果是一个编辑器就创建一个编辑器，但是让这两个工具继承一个具有公共属性的父类。

我有点迷路了，你们怎么看？有一个更好的方法？

谢谢。

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中的对象继承没有帮助。为此，您需要进行原型设计，这会得到...很复杂。你可以在这里看到例子：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Inheritance