文档章节

Meteor——不一般的全栈开发平台!

笔阁
 笔阁
发布于 2015/09/15 10:23
字数 2360
阅读 2283
收藏 2

一、全栈开发平台 - 不仅仅是前端

Meteor和那些名声如雷贯耳的前端框架,比如Angular, React等都不一样,它是一个 采用单一开发语言的全栈开发的平台:开发者可以使用JavaScript同时 进行前端和后端的开发,然后交给Meteor运行这个包含了前后端的完整应用:

fullstack.jpg

从图中你可以看到,Meteor在前端使用浏览器作为基础运行环境,在后端则是以NodeJS作为 基础运行环境,以MongoDB作为数据持久化系统。

Meteor提供了一个横跨前端和后端的中间层平台,预置封装了很多功能库,简化了 Web应用的开发:使用单一语言快速开发Web应用,这是Meteor的最重要诉求。

二、初识Meteor

从构成来讲,可以认为Meteor开发平台由两部分构成:

Meteor库 - 以功能包的形式存在,封装了诸如实时通信、反应式编程之类的核心功能。当 一个Meteor应用启动时,Meteor会自动加载这些库,为应用提供了一个基础环境。

Meteor工具 - 可以理解为命令行方式的开发环境,它使我们可以轻松地管理整个应用 开发流程:从创建应用、调试应用、自动化测试到打包、部署、热升级。

现在,让我们让我们使用Meteor命令行工具meteor创建并启动第一个Meteor应用吧。

1. 创建应用 —— meteor create [project]

在终端中输入meteor create test,然后按回车:

~$ meteor create test

这个命令将在当前目录下创建一个子文件夹test,Meteor将使用内置的应用模板 作为这个文件夹的内容。我们可以进入test文件夹,执行ls命令查看一下内容:

~$ cd test ~/test$ ls -al

你可以看到Meteor创建了3个文件和1个目录。

  • test.css - 前端的样式表文件
  • test.html -前端的HTML文件
  • test.js - 前端/后端共用的JavaScript文件。

全栈,对吧O(∩_∩)O~

.meteor - 这个子目录是Meteor应用必须的特殊子目录,由Meteor平台维护,我们不要动 先略过3个文件的具体内容,我们运行起来看看。

2. 运行应用 —— meteor run

执行meteor命令启动应用,在终端中输入meteor,这等价于运行meteor run:

~/test$ meteor

当你看到终端中出现下面的提示信息:

... App running at: http://localhost:3000/

恭喜!我们的第一个Meteor应用已经运行起来了!

3.停止应用运行 —— Ctrl+C

用鼠标左键点击一下终端区域,确保它获得键盘输入焦点(你应该可以看到一个 闪烁的光标),然后同时按Ctrl键和C键,即可停止应用运行:

 ^C ~/test$

4.复位应用数据 —— meteor reset

Meteor应用运行时会生成打包文件、创建应用数据库。可以使用下面命令 清理这些生成的文件和应用数据:

~/test$ meteor rest

meteor reset命令不影响你的源代码文件。

三、模板文件 - test.html

打开test.html,你可能会略有不适:

template2.jpg

它不是一个标准的HTML文件:没有html顶层标签,奇怪的符号{{> hello}}… 不过,在Metoer中这样的文件却是合法的文件 —— 模板文件。

1.模板顶层标签 —— head/body/template

Meteor规定,在一个模板文件里,只能出现三种顶层标签:head、body和template。 也就是说,模板文件只能包含以这三种标签为顶层标签的HTML片段。

这是因为,Meteor在运行应用之前有一个打包/bundle的过程,此时Meteor会提取所有 模板文件(一个应用中可以有多个模板文件)中的head、body和template片段,分别进行 合并、编译后才呈现给用户:

tpl-proc.jpg

上图中,a.html和b.html中的head片段合并后作为最终的head内容,b.html和c.html中 的body片段合并后作为最终的body内容,至于c.html中的template的内容,则最终替换了 b.html中的{{> hello}}。

2.模板语言 —— Spacebars

Meteor的模板使用的语言是私有的spacebars语言,它基于流行的handlebars,通过 在HTML片段中嵌入模板标签(以两对大括号为边界)实现模板化。因此,Meteor的模板 其实就是HTML标签和模板标签的混合体。

{{> hello}}模板标签用来调用一个子模板,Meteor将在最终呈现给用户的HTML文档中, 使用子模板hello的内容进行原地替换。

特殊的template标签用来定义一个子模板。

{{counter}}模板标签执行插值工作,Meteror将在最终呈现给用户的HTML文档中,使用 标识符counter对应的值进行原地替换。

四、样式文件 - test.css

和模板文件类似,Meteor在打包过程中,会将所有的样式文件合并成一个大的样式文件, 然后在呈现给用户的HTML文档中引用这个样式文件:

cssbundle.jpg

上图中,a.css和b.css的内容将被合并为一个文件,并在最终呈现给用户的HTML文档中, 使用link标签引用这个文件。

五、代码文件 - test.js

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

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

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

1.判断代码执行环境 —— 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){ //仅在后端执行的代码块 }

2.前后端都执行的代码

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

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

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

六、前端代码 - 模板实例对象

回忆下,在模板文件test.html中,我们定义了一个模板:

<!--test.html--> <template name="hello"> <button>Click Me</button> <p>You've pressed the button {{counter}} times.</p> </template>

当Meteor运行这个应用时,将自动创建一个对应的模板实例对象:Template.hello。 对模板的数据绑定和事件绑定,这些通常需要使用JavaScript实现的功能,就通过这 个对象来实现:

template.jpg

在hello模板中,{{counter}}模板标签中的标识符couter的值,将由对应模板实例 对象的counter函数返回值决定,这个函数被称为模板的helper函数,使用模板实例的 helpers()方法声明模板标签中标识符对应的helper函数。

而通过模板实例对象的events方法,则为模板中的button元素挂接了click事件监听处理 函数。

七、前端代码 - 模板标签标识符解析/helper

使用Template.hello.helpers(helpers)方法声明hello模板中模板标签标识符的解析函数。参数helpers是一个JS对象,属性表示应用在模板标签中的标识符,值 通常是一个函数,被称为helper,大致是帮助Meteor解析模板中的标识符的值 这样的意思。

比如,在test.js中我们为hello模板中出现在{{counter}}模板标签中的counter表达 式声明其对应的helper函数:

//test.js Template.hello.helpers({ 'counter':function(){ return Session.get('counter'); } });

每次当Meteor需要对模板标签{{counter}}进行计算时,都将调用其counter标识符 对应的helper函数进行计算:它简单地返回Session变量counter的当前值。

1.为helper函数设定参数

helper函数可以接受参数,比如对于模板test中的displayName标识符:

<template name="test"> <h1>Hello,{{displayName "Jason" "Mr."}}!</h1> </template>

声明如下的helper函数:

Template.test.helpers({ 'displayName' : function(name,title){ return title + ' ' + name; } });

那么Meteor渲染后将获得如下的HTML结果:

<h1>Hello,Mr. Jason!</h1>

2.使用常量helper

当然,也可以将helper定义为一个常量:

Template.test.helpers({ displayName : "Mr. WHOAMI" })

这时,模板标签{{displayName}}将永远地被设定为固定的值了。

在线练习内容和更多示例可以去这里看看: 

http://www.hubwiz.com/course/55b87a7b3ad79a1b05dcc339

© 著作权归作者所有

笔阁
粉丝 223
博文 218
码字总数 492488
作品 0
海淀
程序员
私信 提问
Meteor,单一开发语言的全栈开发的平台!

一、全栈开发平台 - 不仅仅是前端 Meteor和那些名声如雷贯耳的前端框架,比如Angular, React等都不一样,它是一个采用单一开发语言的全栈开发的平台:开发者可以使用JavaScript同时 进行前端...

笔阁
2015/10/09
1K
1
Meteor全栈开发平台 - 不仅仅是前端

全栈开发平台 - 不仅仅是前端 Meteor和那些名声如雷贯耳的前端框架,比如Angular, React等都不一样,它是一个 采用单一开发语言的全栈开发的平台:开发者可以使用JavaScript同时 进行前端和后...

马拉喀什
2015/09/07
0
0
十个最适合 Web 和 APP 开发的 NodeJS 框架

在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一。全球各地的开发者张开双臂拥抱 NodeJS。 对于新手来说,Node.js 是...

noeticforce
2015/12/02
41.2K
22
13 款惊艳的 Node.js 框架——第1部分

【编者按】本文作者为 Peter Wayner,主要介绍13款至精至简的 [Node.js][1] 框架,帮助你简化高速网站、丰富 API 以及实时应用的开发流程。本文系国内 [ITOM][2] 管理平台 [OneAPM][3] 编译呈...

OneAPM蓝海讯通
2016/05/23
219
0
2016 年最值得程序员阅读的开源书:《全栈增长工程师指南》

这本书来源于在《Repractise简介篇:Web开发的七天里》中所说的 Web 开发的七个步骤而展开的电子书。当然它也是一个 APP,是一本关于如何成为全栈增长工程师的指南。 编写过程 昨天,我终于把...

Phodal
2016/04/15
19.2K
49

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部