Webpack ES6模块化多类应用程序组织

Question

我第一次用webpack构建一个应用程序，我正努力组织类文件。我很难让代码正常工作。我还是ES6之类的新手，所以下面的代码可能非常错误，但我不确定这是我的方法/概念还是我的语法。

条目是index.js，我也有这些文件

import App from './js/app.js';
import User from './js/user.js';
import Guest from './js/guest.js';
const app = new App();
const user = new User();
const guest = new Guest();
$(document).ready(function () {
app.DatabaseStore.senddata();
console.log( user.getall() );
});

src/js/app.js主要全局方法/变量类

import CookieStore from './cookie.js';
import DatabaseStore from './database.js';
export default class App {
constructor() {
this.cookieStore = new CookieStore();
this.databaseStore = new DatabaseStore();
}
gettime() {
return 'time';
}
}

用于users的src/js/user.js方法

import App from './app.js';
export default class User extends App {
constructor() {
this.mydata = App.cookieStore.getData();
console.log(this.mydata );
}
getall() {
return ['foo', 'bar', 'baz'];
}
}

适用于guests的src/js/guest.js方法

import App from './app.js';
export default class Guest extends App {
constructor() {
this.mydata = App.cookieStore.getData();
}
}

src/js/cookie.jscookie操作方法

export default class CookieStore {
constructor() {}
mydata() {return 'foo';}
}

src/js/database.js火球法

export default class DatabaseStore {
constructor() {}
senddata() {
this.mydata = App.cookieStore.getData();
}

Answer 1

您正在尝试静态访问实例属性。在尝试访问cookieStore属性之前，需要创建App类的实例。您可以创建一个实例，并将其导出到您的app.js中以拥有singleton实例。

//in your app.js 
export const app = new  App();

在其他文件中

import {app} from './js/app.js'
app.cookieStore.getData();