在 Javascript - @class、@param、@属性、@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) 如何从这 3 个类创建 instance 并使用另一个 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 imports/exports 时，它给了我这个错误：

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。它基本上等同于 c# 的摘要 xml 注释。在高层次上，它只是一种 更好的 方式来记录您的方法、类、变量、函数等...而不是到处做 //...。您可以了解有关 JSDoc here 的更多信息。其他语言也有类似的东西。不过我最熟悉c#和JS。

JSDoc 的酷炫之处在于，如果你有一个支持它的 IDE，你基本上可以将鼠标悬停在某个东西上，并假设你在使用的任何模块上都有正确的 JSDoc，你'我会立即获得文档。您不必跳转到源代码查看作者是否为您留下任何评论。他们只会弹出内联。 WebStorm 在这方面做得很好。

func Class1和Class1.prototype.someName

有什么区别

这 (IMO) 是 JavaScript 中类的老派写作方式。使用 ES6+，你可以只使用关键字 class 而不是 function 并且必须使用原型。

本质上，

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

是旧的做法

class Class1 { ... }

话虽如此，

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

是老派的做法

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

}

关于你的第三个问题，我不清楚你在问什么。

使用现代类与 'older' 方式的示例：

// 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());

在 Javascript - @class、@param、@属性、@augments 中使用实例

Using instances in Javascript - @class, @param, @property, @augments

javascript

instance