Использование экземпляров в Javascript - @class, @param, @property, @augments

Question

Я получил файл JavaScript. Есть 3 класса, и мне нужно создать экземпляры этих классов и использовать методы, которые они содержат. Проблема в том, что эти 3 класса не похожи на class Example {...}. Вместо этого они выглядят так:

* @class
* @param {Array|Object} param1 - [REQUIRED]
* @param {Array|String} param2 - [OPTIONAL]
* @property {String} prop1
* @property {String} prop2
* @property {Array} prop3
* @property {Class2} prop4

function Class1(param1, param2) {
    ...
}

@augments Class1
@param {String} param5
@return {String}

Class1.prototype.someName = function (param5) {
    ...
}

И это так. Мои вопросы:

1) Что означает @class или property и т. Д.?

2) В чем разница между func Class1 и Class1.prototype.someName?

3) Как я могу создать instance из этих 3 классов и использовать методы из другого файла js. Потому что мне нужно создать все из этого файла JavaScript. Они содержат некоторый HTML с классами CSS, такими как:

function Class1(param1, param2) {
    this.openTag;
    this.closeTag;
    this.htmlTags;

    this.openTag = '<div id="' + this.elementId + '">';
    this.closeTag = '</div>';

    this.htmlTags = {
        sectionTitle: {
            openTag: '<h2 class="class1">',
            closeTag: '</h2>'
        },
        group: {
            openTag: '<div class="class2">',
            closeTag: '</div>'
        },
        table: {
            openTag: '<table class="class3">',
            closeTag: '</table>'
        }
    }
   ...
}

Как я могу создать экземпляр этих классов и вызвать их из другого файла javascript? Когда я пытаюсь сделать ES6 импорт / экспорт, он выдает мне эту ошибку:

Access to script at 'file:///Users/user/Desktop/project/someName.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

&

app.js:1 Uncaught SyntaxError: Cannot use import statement outside a module

Это не 'я не могу вызывать функции из другого js-файла.

Буду признателен, если вы все объясните шаг за шагом:)

Answer 1

Что означает @class?

Это то, что называется JSDoc. Это в основном эквивалент сводных xml комментариев для c #. На высоком уровне это просто лучший способ документировать ваши методы, классы, переменные, функции и т. Д., А не просто делать //... везде. Вы можете узнать больше о JSDoc здесь . У других языков есть подобные вещи. Я больше всего знаком с c # и JS.

Крутая вещь в JSDoc заключается в том, что если у вас есть IDE, которая поддерживает его, вы можете просто навести курсор мыши на что-то и предположить, что у вас есть нужный JSDoc на любом модуле. вы используете, вы получите документацию прямо тогда и там. Вам не нужно переходить к источнику, чтобы увидеть, оставил ли автор какие-либо комментарии для вас. Они просто всплывают. WebStorm хорошо справляется с этим.

В чем разница между func Class1 и Class1.prototype.someName

Это (ИМО) являетсяолдскульный способ написания классов в JavaScript. В ES6 + вы можете просто использовать ключевое слово class вместо function и использовать прототипы.

По сути,

function Class1 (...) {...}

- более старый способделать

class Class1 { ... }

С учетом сказанного,

Class1.prototype.someName = function (...) { ... }

- это способ старой школы

class Class1 () {
    constructor(...) {...}
    someName(...) { ... }

}

По вашему третьему вопросу мне непонятно, что вы спрашиваете.

Пример использования современных дневных классов по сравнению со «старым» способом:

// Older way of creating a Person class
function Person(first, last) {
  this.first = first;
  this.last = last;
}

Person.prototype = {
  getFullName: function () {
    return this.first + ' ' + this.last;
  }
}

var oldPerson = new Person('John', 'Doe');
console.log(oldPerson.getFullName());

// Modern way of creating a class

class Person1 {
  constructor(first, last) {
    this.first = first;
    this.last = last;
  }
  getFullName() {
    return `${this.first} ${this.last}`;
  }
}

const newPerson = new Person1('Jane', 'Doe');
console.log(newPerson.getFullName());