使用Meteor开发下一代JavaScript实时Web应用(二)
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

enter image description here

使用Meteor开发下一代JavaScript实时Web应用(二)

在本章中,你将学到以下内容:
1. 安装Meteor & Meteorite 2. 了解5种类型的Meteor包
3. 设置你的Meteor应用的文件结构

由于Meteor本身并不支持第三方的包,Tom Coleman(本书的作者之一)和Meteor社区的其他成员共同创造了Meteorite,一个Meteor的包裹器。Meteorite同时也可以为你安装Meteor,并帮你整合你所需要的包。

由于在某些时候我们会需要安装第三方的包,因此我们现在就来安装Meteorite。

mrt VS meteor

Meteorite中暴露除了mrt命令,它本质上来说是meteor命令的一个包裹。这意味着大部分时候mrt可以和meteor做完全相同的事,但是由于mrt支持一些我们将在后面谈到的额外的特性,我们会在这里就开始使用它。

通过Meteorite安装Meteor

首先,你需要确保你的电脑中已经安装了node和git。你可以通过官方网站下载并安装它们。

其次,我们来安装Meteorite。由于它是一个Node模块,因此我们运行下面的命令来安装它:

$ sudo npm install -g meteorite

只要这样就行了,Meteorite就这么简单地被安装到了你的电脑中。

注意:Windows系统暂时还不支持Meteor,但是你可以在这篇文章中找到替代的方法:https://www.discovermeteor.com/blog/using-meteor-and-atmopshere-on-windows/

创建一个简单的应用

既然我们已经安装好了Meteorite,现在我们就来创建一个应用。我们使用Meteorite暴露出的mrt命令行工具:

$ mrt create microscope

这条命令将会下载Meteor,并且为我们设置一个最基本的Meteor项目。当这条命令运行结束时,你应该看到一个叫做microscope的文件夹,它包含以下文件:

microscope.css  
microscope.html 
microscope.js 
smart.json 
smart.lock 

Meteor为你创建的这个应用是一个简单地模板应用,它展示了一些简单的功能。

虽然现在这个应用基本上干不了什么事,我们还是可以来运行一下它。为了让这个应用运行起来,你需要在终端中输入以下命令:

$ mrt 

现在打开你的浏览器并转到http://localhost:3000(或者与之等价的是http://0.0.0.0:3000),你会看到下面的结果:

enter image description here

恭喜你,你现在已经将你的第一个Meteor应用运行起来了。

添加一个包

我们现在将使用Meteorite来添加一个包,以便将Bootstrap包含进我们的项目中:

$ met add bootstrap

关于包的一些注意事项

当我们在Meteor中谈论到包时,有一些事情需要特别注意。Meteor中包含5中基本类型的包:

  • Meteor核心本身就是一个包。它被自动包含进每一个Meteor应用中,你永远不需要去担心它。

  • Meteor智能包裹(你可以通过运行meteor list来进行查看)。它们与Meteor绑定在一起,你可以选择性的将它们引入你的应用中。你甚至可以在不使用Meteorite的情况下使用这些智能包,只需要运行meteor add packagename即可。

  • 本地包是一种你可以自行在/package目录下创建的包。使用它们你同样不需要借助Meteorite。

  • Atmosphere智能包是第三方的Meteor包,你可以在https://atmosphere.meteor.com中找到这些包的列表。

  • NPM包是Node.js的包。尽管它们并不能被Meteor直接使用,但是它们可以被Atmosphere包所用。

一个Meteor应用的文件结构

在我们开始正式编写代码之前,我们应该适当的设置我们的项目。为了确保我们的代码有一个干净的组织结构,现在打开我们的microscope目录,然后删除microscope.html,microscope.js和miscroscope.css文件。

接下来,在/miscroscope目录下创建五个子目录:/client,/server,/public,/lib和/collections。这些目录中的一些非常特别。当这些特别的目录中包含进文件时,Meteor会遵循下面的原则:

  • /server目录中的代码只运行在服务器上
  • /client目录中的文件只运行在客户端上
  • 其他的所有代码在客户端和服务器端都能运行
  • /lib目录中的文件在其他所有的文件之前被载入
  • 任何名字叫做main.*的文件会在最后被载入
  • 你的静态资源(字体,图片等等)需要放在public目录中

要注意的一点是尽管Meteor遵循这些规则,但是这并不意味着你必须要是有那个这样的文件结果。这样的文件结构只是其中一种方法,并不是唯一的方法。

如果你想要了解更多的信息,你可以在Meteor的官方在线文档中查询到。

Meteor是MVC架构吗?

如果你之前使用过其他的框架例如Ruby on Rails,你一定会关心Meteor究竟是不是MVC架构。

答案是no。和Rails不一样,Meteor并不会为你的应用引入任何预定的结构。因此在本书中的后面我们在编写代码时,使用的是感觉最对的方式,而无需去遵循MVC框架的条条框框。

不需要public目录吗?

确实在这里我们撒谎了。我们确实不需要public目录,因为我们将要创建的Microscope应用并不会使用任何静态资源。但是由于大部分其他的Meteor应用都会包含一些图片,我们在此还是将这个目录包含在其中。

顺便提一句,你可能会在目录中发现一个叫做.meteor的隐藏文件夹。这就是Meteor存放它自己的代码的地方,修改这个文件夹中的代码绝对是一个坏主意。你唯一可以修改的地方是.meteor/packages和.meteor/release文件,这两个文件分别存放的是智能包的列表和你是用的Meteor的版本号。

下划线表示法和驼峰表示法

关于下划线表示法(my_variable)和驼峰表示法(myVariable),唯一要说的一点是你随便用哪个都可以,随你喜欢。

在本书中,我们使用驼峰表示法,因为它在JavaScript中使用最频繁(毕竟JavaScript没有叫做java_script)。

唯一的例外是文件的命名,我们会使用下划线表示法(my_file.js),以及CSS类,我们会使用连字符(.my-class)。之所以这样做的原因是,在文件系统中,下划线是使用最普遍的,同时CSS语法中也频繁的使用连字符(font-family,text-align等等)。

注意CSS

本书不是关于CSS的书,因此为了避免一点一点的向你展示CSS的细节,我们会在一开始就编写所有在后面需要用到的CSS,你在后面再也不需要担心CSS了。

在Meteor应用中,CSS会自动被加载和压缩,所以它应该被放在/client中,而不是/public中。现在就创建一个client/stylesheets/目录,然后在其中创建下面的style.css文件:

.grid-block, .main, .post, .comments li, .comment-form { background: #fff;
border-radius: 3px;  

padding: 10px;
margin-bottom: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
body {
background: #eee;
color: #666666; }
.navbar { margin-bottom: 10px } .navbar .navbar-inner {
border-radius: 0px 0px 3px 3px; }
#spinner { height: 300px } .post {
*zoom: 1;
-webkit-transition: all 300ms 0ms; -webkit-transition-delay: ease-in; -moz-transition: all 300ms 0ms ease-in; -o-transition: all 300ms 0ms ease-in; transition: all 300ms 0ms ease-in; position: relative;
opacity: 1;
}
.post:before, .post:after {
content: "";
display: table; }
.post:after { clear: both } .post.invisible { opacity: 0 } .post .upvote {
display: block; margin: 7px 12px 0 0; float: left;
}
.post .post-content { float: left } .post .post-content h3 {
margin: 0; line-height: 1.4; font-size: 18px;
}
.post .post-content h3 a {
display: inline-block;
margin-right: 5px; }
.post .post-content h3 span { font-weight: normal; font-size: 14px;
display: inline-block; color: #aaaaaa;
}
.post .post-content p { margin: 0 }
.post .discuss { display: block;
float: right;
margin-top: 7px; }
.comments { list-style-type: none; margin: 0;
}
.comments li h4 {
font-size: 16px;
margin: 0; }
.comments li h4 .date { font-size: 12px;
font-weight: normal; }
.comments li h4 a { font-size: 12px } .comments li p:last-child { margin-bottom: 0 } .dropdown-menu span {
display: block; padding: 3px 20px; clear: both; line-height: 20px; color: #bbb; white-space: nowrap;
}
.load-more {
display: block;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05); text-align: center;
height: 60px;
line-height: 60px; margin-bottom: 10px;
}
.load-more:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.1); }

关于CoffeeScript

在本书中我们会编写纯JS代码。但是如果你更加喜欢CoffeeScript,Meteor已经帮你处理好了这一点。你只需要简单的在项目中添加CoffeeScript的包即可:

mrt add coffee script


本系列文章译自Discover Meteor,正版图书购买地址:http://www.discovermeteor.com

如果你觉得本文对你有帮助,为我提供赞助:https://me.alipay.com/jabez128

评论
发表评论
暂无评论
WRITTEN BY
张小俊128
Intern in Baidu mobile search department。认真工作,努力钻研,期待未来更多可能。
TA的新浪微博
PUBLISHED IN
使用Meteor开发下一代JavaScript实时Web应用

介绍Meteor框架的基础知识,帮助你快速上手用Meteor开发实时web应用

友情链接 大搜车前端团队博客
我的收藏