Meteor 基于 Nodejs 的实时 Web APP 开发框架入门

Z时代
2024-01-10
分类：IT

简单的说，你可以用 JavaScript 搞定客户端、服务端的开发。另外，客户端和服务端的界限被极大的模糊。客户端的界面跟服务端的数据是双向绑定的，修改服务端的数据，用户界面会随着更新，你也可以在客户端直接修改服务端的数据库。

系统的归纳下，对于（前端）开发者来说，可能比较吸引人的点。

统一开发语言：客户端、服务端都可以用js搞定。

提高开发效率：开发者可以用10行左右的代码就开发出一个具有多点实时更新的应用，因为底层框架已经帮你处理好了数据更新、数据同步以及界面更新的工作。

数据驱动下的多端同步更新机制：基于DDP协议，服务端数据的修改会引起客户端界面的更新，同时客户端对数据的改动也会同步到服务端。

统一插件系统：同样的插件，可以同时运行在客户端、服务端。

简易热部署：通过简单的命令，即可快速部署到生产系统。同时对所有当前已链接的应用进行更新。

高实时性：通过巧妙的延迟补偿策略，让终端的用户感觉是在访问一个实时无延迟的应用。

原生应用：可通过编译工具，将web app编译成原生的终端应用程序

数据库访问：客户端、服务端都可以直接访问数据库（安全性隐患）

开始使用

Demo 请点击，参照官方 demo 进行的仿写，进一步进行了简化。也可直接参考官方demo

Meteor的入门Demo还是比较好上手的。跟着教程一步一步的走，基本就可以捣鼓出一个像样的TODO LIST的demo了，所以这里也不打算细讲，只是挑一些重点备忘下。

首先，安装Meteor，然后通过meteor create这个命令创建一个新项目。

meteor create meteor-todo-list

创建好的项目结构如下：

Meteor 基于 Nodejs 的实时 Web APP 开发框架入门

大致包含以下内容。有点像传统的web页面，1个HTML页面，再加1个CSS文件、1个JS文件。

├─ .meteor // 项目依赖的package，在这个小Demo里我们可以先忽略

├─ meteor-todo-list.css // 页面相关的CSS

├─ meteor-todo-list.html // 页面入口文件

└─ meteor-todo-list.js // 页面主逻辑

Meteor-todo-list.html

打开html页面，你会发现只有head、body、template三个标签。如果接触过模版引擎的同学会有中熟悉之感。其中：

head、body两个标签中的内容，最终会被嵌入到输出给终端用户的HTML页面中。

template则定义了页面需要用到的模版，有点向web component规范看齐的意味。

举例来说，head 标签中内容如下

<head>
    <title>meteor demo</title>
</head>

我们访问页面就可以看到 title 为 meteor demo

至于 body 标签，如果对 handlebars 熟悉的同学，大致就知道是干嘛用的了。{{>create}} 引入定义好的模版，该模版的 name 为 create。{{#each tasks}} 则是对数据进行遍历，至于数据源，下面会提到。

<body>
    {{>create}}
    <div class="todo-items">
        {{#each tasks}}
            {{>task}}
        {{/each}}
    </div>
</body>

我们再来看看这段模版。name 为 create，就可以在页面里方便的通过 create 这个名字来引用这段模版（包括模版嵌套）。而模版数据会在 meteor-todo-list.js 小节提到。

<template name="create">
    <div class="">
        <input type="text" placehodler="输入todo项" class="js-text" />
        <button class="js-add">创建</button>
    </div>
</template>

meteor-todo-list.js

打开 meteor-todo-list.js，会看到一行显眼的代码。正如 meteor 官方介绍所说，meteor 应用的代码可以同时跑在客户端、服务端。有些场景下，某些代码只适合跑在客户端，那么就可以用下面的判断。

if( Meteor.isClient ){
    //...
}

meteor-todo-list.html 里其实就一堆模版。相应的，需要为这些模版提供数据。数据大都是存在数据库的，那么就需要有数据库操作。

除了数据之外，还要处理用户交互，那么就涉及到事件绑定。

数据和数据库操作

数据在Meteor应用了扮演了极为重要的角色，作为实时双向更新的引用，meteor服务端数据的修改，会导致客户端界面的更新。同时，客户端用户操作导致的数据更新，也会实时同步到服务端。

比如这段代码，意思就是，模版body用到的tasks数据，就是这个同名方法的返回值。

  Template.body.helpers({
    tasks: function(){
      return Tasks.find({});
    }
  });

比如页面有这么一段无聊的模版，那么就可以通过Template.nonsense.helpers来注册nonsense这段模版需要用到的数据。我们的页面里其实没有name为body的模版，这是因为内部做了特殊处理，body、head 标签默认当模板对待了。

<template name="nonsense">
    <p>hello {{nick}}</p>
</template>

下面来讲数据库操作，这里用到了人民大众热爱已久的mongodb。

首先，我们我们创建collections，对应的是一系列的文档集合，下面我们做的就是对这个文档集合进行操作，比如增、删、改、查，这四大操作demo里都覆盖到了。

var Tasks = new Mongo.Collection("tasks");

举个例子，返回所有的task数据，类似mysql里的select *。

return Tasks.find({});

插入一条task。

Tasks.insert({text: value, createdAt: new Date()});

其余操作类似，这里不赘述，更多细节参考官方文档。

事件绑定

相当直观。以下面代码为例。更多细节参考官方文档

Template.create.events表示为 create 这个模版渲染出来的节点绑定事件。

click .js-add表示：为.js-add这个选择器匹配中的节点监听click事件。

event就是常规的事件对象。而template相当于模版自身的引用，可以通过template.$(selector)来选中模版内部的子节点。（类似backbone内部节点操作的设计）

Template.create.events({
'click .js-add': function(event, template){
  var ('.js-text'),
      value = $input.val();
  Tasks.insert({text: value, createdAt: new Date()});
  $input.val('');
}
});