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

我在这里迷路了，你们对此有何看法？有一个更好的方法???

感谢。

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

创建编辑器

1 个答案: