javascript - 在 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)如何从这3个类创建实例并使用另一个js文件中的方法。因为我需要从这个 javascript 文件创建所有内容。它们包含一些带有 CSS 类的 HTML，例如:

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 导入/导出时，出现以下错误:

从源“null”访问“file:///Users/user/Desktop/project/someName.js”处的脚本已被 CORS 策略阻止:仅协议(protocol)方案支持跨源请求: http、数据、chrome、chrome 扩展、https。

&

app.js:1 未捕获的语法错误:无法在模块外部使用 import 语句

它不允许我从另一个 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 并且必须使用原型(prototype)。

本质上，

函数 Class1 (...) {...}

是较旧的做法

class Class1 { ... }

话虽这么说，

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

这是老派的做法

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

}

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

使用现代类(class)与“旧”方式的示例:

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