electron中custom.js中采用引用的方式调用main.js中的方法函数

源码资源网

electron中custom.js中采用引用的方式调用main.js中的方法函数
如果你希望在  `custom.js`  中通过引用的方式直接调用  `main.js`  中的方法，可以将这些方法导出到一个对象中，然后在  `custom.js`  中使用  `require`  导入这个对象。以下是如何实现这一点的改进示例：
### 1. 在  `main.js`  中导出方法
**main.js**

1. const { app, BrowserWindow } = require('electron');
   
2. const path = require('path');
   
3. const customModule = require('./js/custom.js'); // 导入自定义 JS 文件
   
4. // 定义一个方法
   
5. function greet(name) {
   
6.     return `Hello, ${name}!`;
   
7. }
   
8. // 将方法导出
   
9. module.exports = { greet };
   
10. function createWindow() {
    
11.     const win = new BrowserWindow({
    
12.         width: 800,
    
13.         height: 600,
    
14.         webPreferences: {
    
15.             contextIsolation: true,
    
16.             preload: path.join(__dirname, 'preload.js') // 使用 preload.js 进行安全通信
    
17.         }
    
18.     });
    
19.     win.loadFile('index.html');
    
20.      // 在这里调用 custom.js 中的方法
    
21.     customModule.callGreet(greet, 'World'); // 调用 custom.js 中的函数并传递 greet 方法
    
22. }
    
23. app.whenReady().then(createWindow);

复制代码

### 2. 在  `custom.js`  中引用  `main.js`  的方法
**js/custom.js**

1. const { greet } = require('../main'); // 导入 main.js 中的 greet 方法
   
2. function callGreet(name) {
   
3.     const message = greet(name); // 直接调用导入的 greet 方法
   
4.     console.log(message); // 输出: Hello, World!
   
5. }
   
6. // 导出函数
   
7. module.exports = { callGreet };

复制代码

### 3. 启动应用
确保你的项目结构正确，然后运行 Electron 应用。你应该能在控制台看到  `Hello, World!`  的输出。
### 总结
- 在  `main.js`  中定义方法（如  `greet` ）并将其导出。
- 在  `custom.js`  中使用  `require`  导入  `main.js`  中的函数。
- 通过这种方式，你可以在  `custom.js`  中直接调用  `main.js`  中的方法，同时保持代码的模块化。
### 注意事项
1. **模块之间的依赖**：直接引用  `main.js`  可能会导致循环依赖问题，因此在大型应用中要谨慎使用。
2. **上下文问题**：确保在适当的上下文中调用方法，以避免出现未定义的情况。


在  `main.js`  中同时导出方法和变量，并在  `custom.js`  中引用这些导出内容。
### 1. 在  `main.js`  中导出方法和变量

1. const { app, BrowserWindow } = require('electron');
   
2. const path = require('path');
   
3. // 定义一个变量
   
4. let myVariable = "Hello from main.js";
   
5. // 定义一个方法
   
6. function greet(name) {
   
7.     return `Hello, ${name}!`;
   
8. }
   
9. // 导出变量和方法
   
10. module.exports = { myVariable, greet };
    
11. function createWindow() {
    
12.     const win = new BrowserWindow({
    
13.         width: 800,
    
14.         height: 600,
    
15.         webPreferences: {
    
16.             contextIsolation: true,
    
17.             preload: path.join(__dirname, 'preload.js') // 使用 preload.js 进行安全通信
    
18.         }
    
19.     });
    
20.     win.loadFile('index.html');
    
21.      // 在这里调用 custom.js 中的函数
    
22.     const customModule = require('./js/custom.js'); // 导入自定义 JS 文件
    
23.     customModule.showVariable(); // 输出变量
    
24.     customModule.callGreet('World'); // 调用 greet 方法
    
25. }
    
26. app.whenReady().then(createWindow);

复制代码

### 2. 在  `custom.js`  中引用  `main.js`  的方法和变量

1. const { myVariable, greet } = require('../main'); // 导入 main.js 中的变量和方法
   
2. function showVariable() {
   
3.     console.log(`Variable from main.js: ${myVariable}`); // 输出: Variable from main.js: Hello from main.js
   
4. }
   
5. function callGreet(name) {
   
6.     const message = greet(name); // 调用导入的 greet 方法
   
7.     console.log(message); // 输出: Hello, World!
   
8. }
   
9. // 导出函数
   
10. module.exports = { showVariable, callGreet };

复制代码

### 3. 启动应用
确保你的项目结构正确，然后运行 Electron 应用。你应该能在控制台看到以下输出：

1. Variable from main.js: Hello from main.js
   
2. Hello, World!

复制代码

### 总结
- 在  `main.js`  中定义并导出一个变量和一个方法。
- 在  `custom.js`  中使用  `require`  导入  `main.js`  中的变量和方法。
- 通过这种方式，你可以在不同的模块之间共享变量和方法，保持代码的模块化和清晰。