尧图网页设计 
深入MagicMirror²核心源码ElectronNode.js双端架构如何加载与渲染模块【免费下载链接】MagicMirrorMagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.项目地址: https://gitcode.com/GitHub_Trending/ma/MagicMirrorMagicMirror² 是一款开源模块化智能镜子平台把家里浴室或玄关的普通镜子变成个人助手。它的核心巧妙之处在于Electron Node.js 双端架构同一个进程里既跑着 Node.js 服务端负责取数据、开 HTTP 服务又跑着 Electron 客户端负责全屏渲染镜面 UI。本文带你深入核心源码看清一个模块从配置到渲染上镜的完整旅程无需基础也能读懂。一、双端架构全景一份代码三个角色MagicMirror² 启动时实际同时扮演三种角色角色关键文件职责️ Electron 壳js/electron.js创建全屏无边框透明窗口加载本机网页⚙️ Node.js 服务端js/app.js、js/server.js加载配置、启动各模块 node_helper、提供 HTTP 与 Socket.io 通信 浏览器渲染端js/main.js、js/loader.js拉取配置、加载模块脚本、渲染 DOM在 package.json 中可以看到main: js/electron.js它就是整个应用的启动入口。理解了这个分工后面所有源码细节都只是在这三个角色之间来回传递数据。二、Electron 端一扇通往本地服务器的“全屏镜子”打开 js/electron.js核心逻辑非常直白创建窗口createWindow()读取主显示器尺寸创建一个fullscreen: true、frame: false、transparent: true、背景纯黑的BrowserWindow——这正是智能镜子需要的“无边框镜面”效果。加载 URL 而非本地文件注意mainWindow.loadURL(...)加载的是http://localhost:8080这类地址而不是直接打开 HTML 文件。Electron 端只是一个“显示窗”页面内容由同一进程里的 Node.js 服务提供。条件启动服务端文件末尾有一个关键判断——只有当config.address是 localhost或未指定时才会调用core.start()启动 Node 核心。也就是说Electron 窗口可以连接任意远程的 MagicMirror² 服务器本机只是其中一种部署形态。优雅退出before-quit事件中会调用core.stop()让每个模块的 node_helper 都有机会清理定时器、断开连接。三、Node.js 端App 类如何编排整个服务端真正的“大脑”在 js/app.js 中的App类。它的start()方法按顺序做了四件事加载并校验配置Utils.loadConfig()读取config/config.js同时保留一份“脱敏配置”用于保护密钥。解析模块清单遍历config.modules过滤掉disabled的模块、校验position是否合法位置清单来自 defaultmodules/defaultmodules.js 等定义。加载 node_helper对每个模块按modules/模块名/node_helper.js或defaultmodules/模块名/node_helper.js的约定去找辅助脚本找不到就跳过很多模块纯前端没有 helper。找到的 helper 会被require进来并实例化还可以声明requiresVersion校验最低支持版本。启动 Web 服务new Server(configObj)打开端口然后把 Express 应用和 Socket.io 实例分别注入每个 helpersetExpressApp/setSocketIO最后统一调用各 helper 的start()。内置 Web 服务器的关键路由js/server.js 用一个 Express 应用把静态目录和几个关键接口挂载出来/config把配置以 JSON 发给浏览器。巧妙的是配置里可能含函数而函数无法被JSON.stringify序列化——服务端把它包装成带标记的对象浏览器端再“复活”成真正的函数见下文。/env、/version、/startup分别提供模块目录路径、版本号、启动时间戳供前端判断服务是否重启过。/reload开发模式下通过 Socket.io 广播RELOAD事件让浏览器热刷新。静态资源/config、/css、/defaultmodules、/modules、/node_modules等目录全部开放为静态资源模块的 js/css/模板文件正是这样被浏览器请求到的。 想体验纯服务端形态无 Electron 窗口比如只在一台树莓派上跑、用别的浏览器访问入口在 serveronly/index.js它只调用app.start()并打印可访问的浏览器地址。四、node_helper服务端能力的“大脑”每个模块都可以携带一个node_helper.js它继承自 js/node_helper.js 导出的NodeHelper基类。这个基类给模块作者提供了几个钩子start()/stop()服务启停时的初始化与清理socketNotificationReceived(notification, payload)接收浏览器端发来的消息sendSocketNotification(...)向浏览器端回发消息setExpressApp(app)模块还可以注册自己的 HTTP 路由并自动获得/模块名/静态目录。通信基于 Socket.io 的命名空间每个模块独占一个以模块名命名的 channelio.of(this.name)消息互不干扰。以天气模块为例其 defaultmodules/weather/node_helper.js 收到INIT_WEATHER后动态加载对应的 weather provider定时抓取数据再通过WEATHER_DATA事件推送给前端——前端不直接访问天气 API所有网络请求都在服务端完成这是双端架构最实际的收益。五、浏览器端从拉取配置到模块上镜页面加载后js/main.js 导出全局MM对象并执行MM.init()整个客户端流程分三步1. 获取配置loadConfig()通过fetch(/config)拿到服务端下发的配置。还记得那些“无法序列化的函数”吗这里用一个 JSON reviver 识别带__mmFunction标记的对象重新new Function还原成活函数——这是双端之间传输可执行代码的优雅方案。2. 加载模块js/loader.jsjs/loader.js 是模块装载流水线Loader.loadModules()依次执行getModuleData()把配置里的模块清单翻译成“模块档案”——解析模块名、判断属于 defaultmodules 还是用户 modules 目录、生成唯一identifiermodule_序号_名称、记录position、order、animateIn/Out等信息。loadModule()以script标签的方式动态加载每个模块的模块名.js加载完调用Module.create(name)实例化模块对象。bootstrapModule()按顺序执行setData→loadScripts()→loadStyles()→loadTranslations()。模块通过覆写getScripts()/getStyles()/getTranslations()声明自己的依赖加载器会去重同一文件只加载一次js/vendor.js 里还定义了公共库别名。startModules()并行调用所有模块的start()完成后通知核心MM.modulesStarted(...)进入渲染阶段。3. 渲染 DOMjs/main.js js/module.js模块启动完毕后createDomObjects()开始布局按position找到对应的页面容器如top bar、bottom left为每个模块创建一个div内含headercontent两块调用module.getDom()生成内容——js/module.js 的默认实现会使用Nunjucks 模板引擎如果你覆写了getTemplate()返回.njk文件名比如 defaultmodules/helloworld/helloworld.njk 这类模板就按文件渲染返回字符串则直接当模板串渲染getTemplateData()提供数据渲染完成后广播DOM_OBJECTS_CREATED通知模块之间即可互通。之后每次数据更新模块调用this.updateDom(speed)核心会比较新旧内容——内容没变就跳过有变化则执行“淡出 → 替换 → 淡入”动画还支持 AnimateCSS 自定义动画。隐藏模块时甚至会把元素转为position: fixed彻底不占空间空区域容器也随之隐藏保持镜面布局干净。六、模块间协作通知系统与 Socket 消息MagicMirror² 里有两套消息机制都定义在 js/module.js 中机制作用范围典型场景sendNotification浏览器端模块之间时钟模块广播DATE_UPDATE日历、天气模块监听并联动sendSocketNotification浏览器端 ↔ 本模块 node_helper前端请求天气服务端回推WEATHER_DATA浏览器端的 Socket 封装在 js/socketclient.jsMMSocket类与服务端NodeHelper一一对应。这套“广播 点对点”的设计让模块彼此解耦它们不直接引用对方只约定消息名称。七、小结双端架构带来的三大好处安全隔离API 密钥、日历账号等敏感请求全部在 Node.js 端完成浏览器只看到脱敏后的配置密钥永不上镜。模块即目录一个模块就是「前端 js 可选 node_helper njk 模板 样式 翻译文件」的标准目录核心加载器按约定路径自动发现无需注册。单一数据源Electron 窗口只是渲染器服务端是唯一事实来源同一份代码既能本机全屏运行js/electron.js也能纯服务端部署serveronly/index.js甚至支持远程窗口连接远端服务。读懂了这份 Electron Node.js 双端架构你也就掌握了给智能镜子添加新模块的全部密钥约定目录结构、覆写getDom/getTemplate控制画面、用node_helper接管网络剩下的交给核心加载器自动完成。✨【免费下载链接】MagicMirrorMagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.项目地址: https://gitcode.com/GitHub_Trending/ma/MagicMirror创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 深入MagicMirror²核心源码：Electron+Node.js双端架构如何加载与渲染模块
深入MagicMirror²核心源码ElectronNode.js双端架构如何加载与渲染模块【免费下载链接】MagicMirrorMagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.项目地址: https://gitcode.com/GitHub_Trending/ma/MagicMirrorMagicMirror² 是一款开源模块化智能镜子平台把家里浴室或玄关的普通镜子变成个人助手。它的核心巧妙之处在于Electron Node.js 双端架构同一个进程里既跑着 Node.js 服务端负责取数据、开 HTTP 服务又跑着 Electron 客户端负责全屏渲染镜面 UI。本文带你深入核心源码看清一个模块从配置到渲染上镜的完整旅程无需基础也能读懂。一、双端架构全景一份代码三个角色MagicMirror² 启动时实际同时扮演三种角色角色关键文件职责️ Electron 壳js/electron.js创建全屏无边框透明窗口加载本机网页⚙️ Node.js 服务端js/app.js、js/server.js加载配置、启动各模块 node_helper、提供 HTTP 与 Socket.io 通信 浏览器渲染端js/main.js、js/loader.js拉取配置、加载模块脚本、渲染 DOM在 package.json 中可以看到main: js/electron.js它就是整个应用的启动入口。理解了这个分工后面所有源码细节都只是在这三个角色之间来回传递数据。二、Electron 端一扇通往本地服务器的“全屏镜子”打开 js/electron.js核心逻辑非常直白创建窗口createWindow()读取主显示器尺寸创建一个fullscreen: true、frame: false、transparent: true、背景纯黑的BrowserWindow——这正是智能镜子需要的“无边框镜面”效果。加载 URL 而非本地文件注意mainWindow.loadURL(...)加载的是http://localhost:8080这类地址而不是直接打开 HTML 文件。Electron 端只是一个“显示窗”页面内容由同一进程里的 Node.js 服务提供。条件启动服务端文件末尾有一个关键判断——只有当config.address是 localhost或未指定时才会调用core.start()启动 Node 核心。也就是说Electron 窗口可以连接任意远程的 MagicMirror² 服务器本机只是其中一种部署形态。优雅退出before-quit事件中会调用core.stop()让每个模块的 node_helper 都有机会清理定时器、断开连接。三、Node.js 端App 类如何编排整个服务端真正的“大脑”在 js/app.js 中的App类。它的start()方法按顺序做了四件事加载并校验配置Utils.loadConfig()读取config/config.js同时保留一份“脱敏配置”用于保护密钥。解析模块清单遍历config.modules过滤掉disabled的模块、校验position是否合法位置清单来自 defaultmodules/defaultmodules.js 等定义。加载 node_helper对每个模块按modules/模块名/node_helper.js或defaultmodules/模块名/node_helper.js的约定去找辅助脚本找不到就跳过很多模块纯前端没有 helper。找到的 helper 会被require进来并实例化还可以声明requiresVersion校验最低支持版本。启动 Web 服务new Server(configObj)打开端口然后把 Express 应用和 Socket.io 实例分别注入每个 helpersetExpressApp/setSocketIO最后统一调用各 helper 的start()。内置 Web 服务器的关键路由js/server.js 用一个 Express 应用把静态目录和几个关键接口挂载出来/config把配置以 JSON 发给浏览器。巧妙的是配置里可能含函数而函数无法被JSON.stringify序列化——服务端把它包装成带标记的对象浏览器端再“复活”成真正的函数见下文。/env、/version、/startup分别提供模块目录路径、版本号、启动时间戳供前端判断服务是否重启过。/reload开发模式下通过 Socket.io 广播RELOAD事件让浏览器热刷新。静态资源/config、/css、/defaultmodules、/modules、/node_modules等目录全部开放为静态资源模块的 js/css/模板文件正是这样被浏览器请求到的。 想体验纯服务端形态无 Electron 窗口比如只在一台树莓派上跑、用别的浏览器访问入口在 serveronly/index.js它只调用app.start()并打印可访问的浏览器地址。四、node_helper服务端能力的“大脑”每个模块都可以携带一个node_helper.js它继承自 js/node_helper.js 导出的NodeHelper基类。这个基类给模块作者提供了几个钩子start()/stop()服务启停时的初始化与清理socketNotificationReceived(notification, payload)接收浏览器端发来的消息sendSocketNotification(...)向浏览器端回发消息setExpressApp(app)模块还可以注册自己的 HTTP 路由并自动获得/模块名/静态目录。通信基于 Socket.io 的命名空间每个模块独占一个以模块名命名的 channelio.of(this.name)消息互不干扰。以天气模块为例其 defaultmodules/weather/node_helper.js 收到INIT_WEATHER后动态加载对应的 weather provider定时抓取数据再通过WEATHER_DATA事件推送给前端——前端不直接访问天气 API所有网络请求都在服务端完成这是双端架构最实际的收益。五、浏览器端从拉取配置到模块上镜页面加载后js/main.js 导出全局MM对象并执行MM.init()整个客户端流程分三步1. 获取配置loadConfig()通过fetch(/config)拿到服务端下发的配置。还记得那些“无法序列化的函数”吗这里用一个 JSON reviver 识别带__mmFunction标记的对象重新new Function还原成活函数——这是双端之间传输可执行代码的优雅方案。2. 加载模块js/loader.jsjs/loader.js 是模块装载流水线Loader.loadModules()依次执行getModuleData()把配置里的模块清单翻译成“模块档案”——解析模块名、判断属于 defaultmodules 还是用户 modules 目录、生成唯一identifiermodule_序号_名称、记录position、order、animateIn/Out等信息。loadModule()以script标签的方式动态加载每个模块的模块名.js加载完调用Module.create(name)实例化模块对象。bootstrapModule()按顺序执行setData→loadScripts()→loadStyles()→loadTranslations()。模块通过覆写getScripts()/getStyles()/getTranslations()声明自己的依赖加载器会去重同一文件只加载一次js/vendor.js 里还定义了公共库别名。startModules()并行调用所有模块的start()完成后通知核心MM.modulesStarted(...)进入渲染阶段。3. 渲染 DOMjs/main.js js/module.js模块启动完毕后createDomObjects()开始布局按position找到对应的页面容器如top bar、bottom left为每个模块创建一个div内含headercontent两块调用module.getDom()生成内容——js/module.js 的默认实现会使用Nunjucks 模板引擎如果你覆写了getTemplate()返回.njk文件名比如 defaultmodules/helloworld/helloworld.njk 这类模板就按文件渲染返回字符串则直接当模板串渲染getTemplateData()提供数据渲染完成后广播DOM_OBJECTS_CREATED通知模块之间即可互通。之后每次数据更新模块调用this.updateDom(speed)核心会比较新旧内容——内容没变就跳过有变化则执行“淡出 → 替换 → 淡入”动画还支持 AnimateCSS 自定义动画。隐藏模块时甚至会把元素转为position: fixed彻底不占空间空区域容器也随之隐藏保持镜面布局干净。六、模块间协作通知系统与 Socket 消息MagicMirror² 里有两套消息机制都定义在 js/module.js 中机制作用范围典型场景sendNotification浏览器端模块之间时钟模块广播DATE_UPDATE日历、天气模块监听并联动sendSocketNotification浏览器端 ↔ 本模块 node_helper前端请求天气服务端回推WEATHER_DATA浏览器端的 Socket 封装在 js/socketclient.jsMMSocket类与服务端NodeHelper一一对应。这套“广播 点对点”的设计让模块彼此解耦它们不直接引用对方只约定消息名称。七、小结双端架构带来的三大好处安全隔离API 密钥、日历账号等敏感请求全部在 Node.js 端完成浏览器只看到脱敏后的配置密钥永不上镜。模块即目录一个模块就是「前端 js 可选 node_helper njk 模板 样式 翻译文件」的标准目录核心加载器按约定路径自动发现无需注册。单一数据源Electron 窗口只是渲染器服务端是唯一事实来源同一份代码既能本机全屏运行js/electron.js也能纯服务端部署serveronly/index.js甚至支持远程窗口连接远端服务。读懂了这份 Electron Node.js 双端架构你也就掌握了给智能镜子添加新模块的全部密钥约定目录结构、覆写getDom/getTemplate控制画面、用node_helper接管网络剩下的交给核心加载器自动完成。✨【免费下载链接】MagicMirrorMagicMirror² is an open source modular smart mirror platform. With a growing list of installable modules, the MagicMirror² allows you to convert your hallway or bathroom mirror into your personal assistant.项目地址: https://gitcode.com/GitHub_Trending/ma/MagicMirror创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考