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

Question

I got a javascript file. There are 3 classes and I need to create these classes instances and use the methods they contain. Problem is, these 3 classes are not like class Example {...} . Instead they look like this:

* @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) {
    ...
}

And it goes like this. My questions are:

1) What does @class or property etc. mean?

2) What is difference between func Class1 and Class1.prototype.someName ?

3) How can I create instance from these 3 classes and use the methods from another js file. Because I need to create everything from this javascript file. They contain some HTML with CSS classes like:

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>'
        }
    }
   ...
}

How can I create an instance of these classes and call them from another javascript file? When I try to do ES6 imports/exports, it gives me this error:

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

It doesn't allow me to call functions from another js file.

I would appreciate if you explain everything step by step:)

Answer 1

What does @class mean?

This is something called JSDoc. It's basically the equivalent of the summary xml comments for c#. At a high level, it's just a better way to document your methods, classes, variables, functions, etc... rather than just doing //... everywhere. You can learn more about JSDoc here . Other languages have similar things. I am most familiar with c# and JS though.

The cool thing about JSDoc is that if you have an IDE that supports it, you can basically just hover over something and assuming you've got proper JSDoc on whatever module you're using, you'll get the documentation right then and there. You don't have to hop over to the source to see if the author left any comments for you. They'll just pop up inline. WebStorm does a good job with this.

What is the difference between func Class1 and Class1.prototype.someName

This (IMO) is the old school way of writting classes in JavaScript. With ES6+, you can just use the keyword class instead of function and having to use prototypes.

Essentially,

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

is the older way of doing

class Class1 {... }

With that being said,

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

is the old school way of doing

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

}

For your 3rd question, I am unclear what you're asking.

Example of using modern day classes vs the 'older' way:

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