Meteor开发平台入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

代码文件 - test.js

test.js是最有趣的文件,Meteor将在前端和后端同时运行这个文件。可以这样理解:

  • 前端 - Meteor将在最终呈现给用户的HTML文档中使用script标签引用test.js
  • 后端 - Meteor将通过NodeJS读入并运行test.js

毫无疑问,如果不做任何处理,谁也没法保证一段JS代码既可以在前端浏览器环境中运行, 也可以在后端NodeJS中运行。在test.js中,我们需要判断当前的具体运行环境,以便 执行相应的代码。

≡ 判断代码执行环境 —— Meteor.isClient/Meteor.isServer

让同一个js文件即可以跑在前端,也可以跑在后端(比如NodeJS),已经有很多 应用了,只需要判断下在某个特定环境才存在的变量就可以了(比如,NodeJS有global,而 浏览器有window)。Meteor提供了一组更加清晰的API来实现这个判断:

  • Meteor.isClient - 为真时,表示当前运行环境为前端
  • Meteor.isServer - 为真时,表示当前运行环境为后端

你可以看到,在test.js中也是这么做的:

//test.js
if(Meteor.isClient){
  //仅在前端执行的代码块
}
if(Meteor.isServer){
  //仅在后端执行的代码块
}

≡ 前后端都执行的代码

很显然,如果在test.js中,不判断执行环境的代码将同时在前端和后端运行。比如:

//test.js
console.log("Hello,Meteor!");
if(Meteor.isClient){...}
if(Meteor.isServer){...}

运行应用后,你将在后台的终端中看到Hello,Meteor!,也将在前台的调试台 中看到相同的输出。

这节课我们练习在同一个文件中如何编写分别应用于前端和后端的代码。请修改 test.js文件,达成如下目标:

  1. 在服务端启动后,在终端打印输出:server starting...
  2. 在使用访问测试按钮 打开前端页面时,前端弹窗显示信息:client starting...