Import classes without file name - javascript

In javascript is it not possible to import a class without having to refrence the page. This seems ugly to me.
I have a class called "DashboardPage" It is located within a file name called "DashboardPage.js".
In order for me to import the class, I have to export the class in the file and then import it in another file. Like so
module.exports.DashboardPage = DashboardPage;//Export
var DashboardPage = require("DashboardPage");//Import
Now when I want to create a new DashboardPage. I have to go:
//Here is the problem. Why do I have to call the file name then the object.
var page = new DashboardPage.DashboardPage();
Am I doing something silly here? This seems silly. I come from a C# background and I may be going at this the wrong way.

This doesn't really have to do anything with class in JavaScript but with the CommonJS module system.
require simply returns the value that is assigned to module.exports. So you can also export a value by directly assigning to module.exports:
module.exports = DashboardPage;
Then when you do
var DashboardPage = require("DashboardPage");
DashboardPage is already your class and you create a new instance by calling new DashboardPage().

Related

How to use the instance of class in another file?

I am using babylonjs in my React app. Since this file get bigger and bigger I try to split it into several parts.
Scene3d.js
import * as Setup from './Scene3d/setup'
class Scene3d extends Component {
...
}
export default Scene3d
setup.js
import Scene3d from '../Scene3d'
Unfortuantely I am not able to use the instance object of Scene3d. Scene3d just returns the component in setup.js. I want to avoid to add "this" to all function to pass the object to the functions.
I appreaciate your help.
Best

Make a instance from entire webpack project

I have a project using a function class.
the webpack config part of the output is something like below:
...
output: {
library: 'FirstPoint',
...
FirstPoint is first point to access main class, and main class at index.js (entry point) is something like:
import { onInit } from './intilize'
import { showSomeThing } './somthing'
export function MyClass(props) {
onInit()
}
MyClass.prototype.showFoo = showSomeThing
the full example for this:
let myClass1 = new FirstPoint.MyClass()
let myClass2 = new FirstPoint.MyClass()
myClass1 .showFoo() //not show myClass1 detail, use last instance detail (myClass2)
after the run, all thing is done. just after creating another instance the showFoo method that using a function outside main class keep last value from the last instance.
I want to make instance for all new object that defines from MyClass class, Or, in other words, is there a way that I can import all the imported modules into the first level, ie, the main class, and instead of the output (production version) of an array of modules, there is only one modulus, and within that other modules, like the function?
One method for doing this, is using encapsulation, and the other way use a Param class!

How to import a module in es6 that itself needs to invoke/initialize its function/class before being imported

I was wondering what is the best practice to import a module's function/class in another module that the module itself needs to invoke/initialize its own function/class before being imported into another module? I don't know if I could ask my question clearly enough! So let's put it in an example.
This is my module:
// myModule.js
class MyModule {
constructor() {
// do sth
}
}
let myModule = new MyModule();
And this is how I like to import it in another module:
import MyModule from './myModule';
This actually works fine! But as you can see, in the myModule.js file I didn't export default my MyModule class because that's not the only thing that is happening in the myModule.js file! I'm also initializing the class after defining it... (I know that even if I have set my class as export default the initializing would still work fine while the module is imported somewhere else...)
So, without setting anything as exported inside of our module, or with setting the class as the export default, everything works fine when the module has been imported somewhere else... So far so good! But I'm looking for a best practice if there's one!
So here are my questions regarding such cases:
Is it ok to import a module that doesn't have anything for export?
Shall we set the class as the export default, although we are doing some more works outside of the class in the module (The initializing job that is happening after defining the class)?
Or maybe is it good to do the initializing job in another function and then export both, the class and the function, and then invoke the function to do the initializing job in the imported module?
Thanks a lot everyone! I really appreciate any helps regarding this :)
How about offering to import the class or the instance of it? Like:
// export class itself
export class MyModule {
constructor() {
// do sth
}
}
// export instance of MyModule directly
export default new MyModule();
// export a factory function if you need more work to be done
// before the instance is created
export function myModuleFactory(...args) { // define e.g. arguments to be passed to constructor
// ... do stuff
const myModule = new MyModule(...args);
// ... do more stuff
return myModule;
}
So you could do:
// import instance
import instance from './myModule';
// or class
import { MyModule } from './myModule';
// or import factory
import { myModuleFactory } from './myModule';
What to do, depeneds on what you want to accomplish with your module. If you want your app use one shared instance of a MyModule class object, you’d export and import the instance like shown above. If you want to create multiple instances in different contexts, you’d export the class itself or a factory function to return a new instance.
To keep it even more clean, you’d keep the class in yet another separate file and import it into the module providing the factory/instantiation.
Update
To answer your first question: You can import modules that don’t have any export defined. The module will be loaded and its logic executed. The thing is that as long as it won’t change global variables (like window in web development) it won’t have any effect as everything inside the module happens within an isolated scope. As you may have guessed, having modules change global vars is far from best practice.
Thanks a lot guys for your answers. I really appreciate that. Actually I got really confused on the project that I'm working on, so maybe I couldn't express what I'm trying to do...
But anyway, I write my own answers to my questions, maybe someone else find them useful:
It's always a good practice to have a export default or export for a module that we're going to write. Because every piece of code tends to have some results, right? So in a module, we should consider what we're going to achieve at the end and then export that. Export your outputs, the things that you expect your module to provide when it is going to be imported somewhere else.
If your module is a single class, it's good to export default it. Otherwise, as I said in the first answer, it all depends in what you're going to achieve in your module and what is your results. Export all the results, utility functions, etc...
You may like to do that too! But first think about your use case. As soon as the module is imported somewhere else, all the codes inside of it will be executed. So do whatever you like to do and then export the end results.

React Native: How to split a file up into multiple files and import them?

I am writing my first app in react native and my js file is getting pretty big. What is the proper way to split the file up.
If i have something like
var MyClass = React.createClass({
...
})
Can I save it at myclass.js and include in by some command in another js file?
Here is the updated solution with using the import statement (in latest React-Native and generally Javascript adhering to ECMAScript6 and later):
file1 myClass.js:
export default class myClass {...}
file2 app.js:
import myClass from './myClass';
This is the basic version using a single default export. You can also export named exports that have to be explicitly listed on import. For more info see export and import.
In general you can do the following:
var MyClass = React.createClass({
...
)}
module.exports = MyClass;
This way you tell what should be publicly available.
And then, in your former big file you can load the contents like this:
var MyClass = require('./myclass.js');
Require returns the object that references the value of module.exports.

TypeScript: access global var from a class without import

I got this module like this:
module MyModule {
export class Constants {
public static WIDTH:number = 100;
public static HEIGHT:number = 100;
....
}
}
export = MyModule;
Now I need to use MyModule.Constants.WIDTH in another class but I can't use import (I need to deliver this class js to a third party, and they don't use requirejs). Right now I use reference to get code checking but it keep giving this error (at transpilling time)
error TS2095: Could not find symbol 'MyModule'
What should I do now so I can use autocomplete and get rid of this error?
I hope you're not mindplay on the TypeScript forum otherwise I'm about to repeat myself.
export and import work together. You should either be using both or neither. If you check what the generated code looks like with and without the export keyword you'll see that export causes a module to be built. Since the third party can't use RequireJS I don't think this is what you want.
I would structure my classes like the following:
// file pkg/Foo.ts
module company.pkg {
export class Foo {}
}
// file pkg2/Bar.ts
module company.pkg2 {
export class Bar{}
}
Putting everything into the name space of your company minimizes the chance of a conflict with another library. Classes know about each other using a reference /// <reference path="..." /> which will allow it to compile.
Since you're not doing modules I would also compile to a single file using --out filename.js. That gets all the files included in (usually) the right order.

Categories