制作H5P内容

Question

有人能解释一下prototype到底是什么吗，以及我如何访问输入字段中输入的值？(例如InputSwapFirst)。我正在尝试生成一些代码来教人们使用H5p的快速排序算法。

var H5P = H5P || {};
 
H5P.QuickSort = (function ($) {

  function C(options, id) {
    // Extend defaults with provided options
    this.options = $.extend(true, {}, {
        toSort: '42'
    }, options);
    // Keep provided id.
    this.id = id;
    this.list = this.options.toSort.split(',').map(x =>+x);
    this.list = quickSort(this.list, 0, this.list.length - 1);
  }; 


   * @param {jQuery} $container
   
  C.prototype.attach = function ($container) {

    $container.addClass("QuickSort");

    $container.append('<div class="greeting-text">' + this.options.toSort+testM()+ '</div>');
    $container.append('<div class="greeting-text">' + this.list+ '</div>');

    $container.append('<button id="ButtonSwap" class="inputSwap" type="button" id="swapBtn" onclick="testM()">Swap</button>');
    $container.append('<label id="InputSwapLeftBracket" class="inputSwap" for="swap">(</label> ');
    $container.append('<input id="InputSwapFirst" class="inputSwap" type="text"/>');
    $container.append('<label id="InputSwapComma" class="inputSwap" for="partition">,</label> ');
    $container.append('<input id="InputSwapSecond" class="inputSwap" type="text"/>'); 
    $container.append('<label id="InputSwapRightBracket" class="inputSwap" for="partition">)</label> ');

    $container.append('<button id="ButtonPart" class="inputPart" type="button" id="partBtn">Partitioniere</button>');
    $container.append('<label id="InputPartLeftBracket" class="inputPart" for="partition">(</label> ');
    $container.append('<input id="InputPartFirst" class="inputPart" type="text"/>');
    $container.append('<label id="InputPartComma" class="inputPart" for="partition">,</label> ');
    $container.append('<input id="InputPartSecond" class="inputPart" type="text"/>'); 
    $container.append('<label id="InputPartRightBracket" class="inputPart" for="partition">)</label> ');

};
 
  return C;
})(H5P.jQuery);

Answer 1

原型

“原型”是JavaScript的一个(或说是)概念。您可以将其视为所有JavaScript对象都具有的属性，该属性可公开访问，并且该对象的后代可以继承。我认为https://dev.to/sigfualt/looking-at-the-prototype-1jnb是一个很好的介绍--但我认为现在几乎没有人会以这种方式编写代码。然而，当然，了解这个概念仍然是件好事。

从输入字段检索值

在上面的代码中，您使用jQuery来附加子对象。您必须获得您的InputSwapFirst元素，有几种方法。如果由于某种原因您不想存储jQuery元素/ HTMLElements，那么可以使用如下查询：

// plain JavaScript, gives you the HTMLElement from DOM
const foo = document.querySelector('#InputSwapFirst');

或

// jQuery, gives you the jQuery object for the HTMLElement
const $foo = $('#InputSwapFirst');

或

// jQuery, gives you the HTMLElement just like the plain JavaScript query above
const $foo = $('#InputSwapFirst').get(0);

但是，您可以先创建该元素并将其存储在一个变量(这里是foo和$foo)中，然后再将其添加到DOM中-从DOM检索元素往往会变得杂乱无章。如果您使用普通的JavaScript或jQuery，这并不重要。

然后，您可以简单地访问文本输入字段的value属性，在这里将其打印到控制台：

// Plain JavaScript
const foo = document.querySelector('#InputSwapFirst'); // Assuming that field can in fact be found - could also return null!
console.log(foo.value);

或

// jQuery
const $foo = $('#InputSwapFirst');
console.log($foo.val());

甚至是

// jQuery using its chaining capabilities and not storing the variable
console.log($('#InputSwapFirst').val());

进一步的建议

如果你想坚持使用jQuery，那就这么做吧--它有它的好处。但我认为它已经失去了一些吸引力，而且有一张票可以从H5P核心https://h5ptechnology.atlassian.net/browse/HFP-874和内容类型中删除所有jQuery依赖项。

Mozilla Developer Network是一个关于超文本标记语言、DOM以及将两者与JavaScript结合使用的很好的资源--例如在input元素上：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

首先可能会觉得有点吓人，但是您可能想看看https://github.com/h5p/h5p-boilerplate上的H5P样板模板。它的主分支保存了一个完整的简单内容类型的基本示例，如上面概述的那样，以及https://github.com/h5p/h5p-boilerplate/tree/question-type中问题类型内容类型的一个分支