Meteor入门介绍
Meteor是什么
基于nodejs的实时web APP开发框架。
Meteor能带来什么
简单的说,你可以用js搞定客户端、服务端的开发。另外,客户端、服务端的界限被极大的模糊。客户端的界面跟服务端的数据是双向绑定的,修改服务端的数据,用户界面会随着更新;你也可以在客户端直接修改服务端的数据库。
系统的归纳下,对于(前端)开发者来说,可能比较吸引人的点。
- 统一开发语言:客户端、服务端都可以用js搞定。
- 提高开发效率:开发者可以用10行左右的代码就开发出一个具有多点实时更新的应用,因为底层框架已经帮你处理好了数据更新、数据同步以及界面更新的工作。
- 数据驱动下的多端同步更新机制:基于DDP协议,服务端数据的修改会引起客户端界面的更新,同时客户端对数据的改动也会同步到服务端。
- 统一插件系统:同样的插件,可以同时运行在客户端、服务端。
- 简易热部署:通过简单的命令,即可快速部署到生产系统。同时对所有当前已链接的应用进行更新。
- 高实时性:通过巧妙的延迟补偿策略,让终端的用户感觉是在访问一个实时无延迟的应用。
- 原生应用:可通过编译工具,将web app编译成原生的终端应用程序
- 数据库访问:客户端、服务端都可以直接访问数据库(安全性隐患)
getting started
demo请点击,参照官方demo进行的仿写,进一步进行了简化。也可直接参考官方demo
meteor的入门demo还是比较好上手的。跟着ste by step的教程走,基本就可以捣鼓出一个像样的TODO LIST的demo了,所以这里也不打算细讲,只是挑一些重点备忘下。
首先,安装meteor,然后通过meteor create
这个命令创建一个新项目。
meteor create meteor-todo-list
创建好的项目结构如下。
大致包含以下内容。有点像传统的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为程序猿小卡
至于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
里其实就一堆模版。相应的,需要为这些模版提供数据。数据大都是存在数据库的,那么就需要有数据库操作。
除了数据之外,还要处理用户交互,那么就涉及到事件绑定。
1、数据 & 数据库操作
数据在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()});
其余操作类似,这里不赘述,更多细节参考官方文档。
2、事件绑定
相当直观。以下面代码为例。更多细节参考官方文档
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('');}});
meteor-todo-list.css
没什么好讲的,跳过。。。
DDP协议
DDP是 分布式数据协议 (Distributed Data Protocol)的简称,meteor双向实时更新机制的底层依赖的就是这东东。官方协议
粗略瞄了下协议,大致有两个特点:
- 平台无关的通用协议:DDP只是定义了协议的格式和一些规范,但具体用什么语言在什么平台上实现无所谓,你可以用js写,也可以用java写。
- json格式:从协议说明,以及实际抓包来看,服务端、客户端数据通信采用的都是json格式的数据,前端极为友好~
实际看看例子。在chrome控制台下,切到WebSocket
这个tab,就会看到不断的有收发包。部分是用户操作发出(如删除操作),部分是用于保持通信状态的心跳包。(可以这样翻译吧。。)
协议比较长,内容本身倒是不复杂,有兴趣的自行围观。。。
package
meteor有自己的包管理机制,也有个专门的社区在维护 https://atmospherejs.com/ 。关于这个,有空再单独拎出来讲讲。
编译原生应用
同样没什么好讲的,直接贴上官方文档地址 https://www.meteor.com/try/7 ,有空再贴几章截图。。
附录
TODO demo:https://github.com/chyingp/meteor-todo-list
官网:https://www.meteor.com/
入门教程:https://www.meteor.com/install
DDP协议:https://github.com/meteor/meteor/blob/devel/packages/ddp/DDP.md
转载于:https://www.cnblogs.com/chyingp/p/meteor-getting-started.html
Meteor入门介绍相关推荐
- .NET读写Excel工具Spire.Xls使用(1)入门介绍
原文:[原创].NET读写Excel工具Spire.Xls使用(1)入门介绍 在.NET平台,操作Excel文件是一个非常常用的需求,目前比较常规的方法有以下几种: 1.Office Com组件的方式 ...
- 独家 | 集成学习入门介绍
作者:Jason Brownlee 翻译:wwl 校对:王琦 本文约3300字,建议阅读8分钟. 本文介绍了我们在生活中的许多决定包括了其他人的意见,由于群体的智慧,有的时候群体的决策优于个体.在机器 ...
- SpringBoot 2.0 系列001 -- 入门介绍以及相关概念
为什么80%的码农都做不了架构师?>>> SpringBoot 2.0 系列001 -- 入门介绍以及相关概念 什么是SpringBoot? 项目地址:http://proje ...
- ECC加密算法入门介绍
作者 : ZMWorm[CCG] E-Mail: zmworm@sohu.com 主页 : Http://ZMWorm.Yeah.Net/ 前言 同RSA(Ron Rivest,Adi S ...
- [翻译][1.4.2]Flask-Admin入门介绍
为什么80%的码农都做不了架构师?>>> #Flask-Admin入门介绍 ##让我们荡起双桨 初始化 Introduction To Flask-Admin Getting ...
- 谷歌大脑科学家亲解 LSTM:一个关于“遗忘”与“记忆”的故事 本文作者:奕欣 2017-01-14 09:46 导语:AI科技评论保证这是相对通俗易懂的一篇入门介绍了,看不懂的话欢迎关注「AI 科技
谷歌大脑科学家亲解 LSTM:一个关于"遗忘"与"记忆"的故事 本文作者:奕欣 2017-01-14 09:46 导语:AI科技评论保证这是相对通俗易懂的一篇入 ...
- Tomcat容器入门介绍
Tomcat容器入门介绍 Tomcat环境配置 PS:JDK的安装这里就不讲了,找到安装包直接下一步下一步就行了. 1.配置JDK 在Windows10下,找到环境变量 在环境变量中添加JDK主目录 ...
- QWT中Qdial的入门介绍
最近使用了一下QWT.因为是第一次使用,所以有一些需要注意的地方,特记录在此,以供后来者参考. 1,QWT的安装与配置环境 有关QWT的安装与配置,网络上已经有很多篇文章,这里就不再重复了.介绍一下自 ...
- Spring入门介绍:
Spring入门介绍 Spring诞生: 创建Spring的目的就是用来替代更加重量级的的企业级Java技术 简化Java的开发 基于POJO轻量级和最小侵入式开发 通过依赖注入和面向接口实现松耦合 ...
最新文章
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
- 在互联网公司说女生备孕,就像跟你女朋友说你不行一个性质!
- spellchecker.php 漏洞,整理一些大汉版通的漏洞
- ospfdr选举规则_OSPF-DR与BDR的选举及作用
- 区域增长——初步学习
- 如何用计算机打出love,游戏中名字的LOVE怎么用符号打出来?
- 编制一个c语言成绩记录簿_C语言基础知识点模拟试题
- Non-parseable POM C:\Users\admin\.m2\repository\org\springframework问题解决方案
- java se基础巩固实例,Java SE基础巩固(十五):lambda表达式
- 今天开始写一些内容,留作备份。
- idea 配置springmvc+mybatis(图文教程)
- 使用openssh的登录的三种方法
- pcl之将QVTKWidget添加到QtCreator
- windows搭建FTP
- Vue中点击复制文本功能
- Android上的CPU和GPU是共享内存,为什么有的手机从GPU读取数据还是很慢?
- 你可能不知道的21个PS技巧
- 三重积分平均值_直角坐标系下的三重积分的几何可视化解释图解高等数学
- python十二星座符号_12种编程语言类比12星座女
- 苹果画画软件_Mac必装的10个软件,让你的Mac如虎添翼