22、MeteorJS开发：最佳实践、模式与SEO优化-优快云博客

本文链接：https://blog.youkuaiyun.com/zero1/article/details/149384917

MeteorJS开发：最佳实践、模式与SEO优化

1. 应用启动与扩展

启动应用并添加一些笔记。若不想像之前那样将模板与应用关联，可以包含布局，然后直接从包中添加模板，也可以操作DOM来自行添加编辑和删除功能。

还能通过创建新模块（如提醒模块）来扩展应用，该模块可实现基于时间的提醒功能，发挥你的想象力即可。

在仅使用包创建应用时，要确保为代码的每个部分使用符合逻辑的命名，并且能够为应用各阶段的模块绘制流程图，以避免设计相关的麻烦。尝试这种模块化应用开发方式，有助于提升设计思维。

2. MVC模式在MeteorJS中的实现

MVC是大多数应用编程语言常用的设计模式。在JavaScript框架中，常能直接遇到MVC或其变体。MVC旨在根据用途将代码组织成模型、控制器和视图。

在MeteorJS中实现MVC没有严格规则。有些开发者会按照MVC创建模型、视图和控制器目录，将代码分类存放以实现分离；而MeteorJS属于另一种情况，它通过组件在应用中的角色或用途来定义MVC，例如集合可归为模型，模板和模板助手可视为视图，服务器方法或客户端的操作逻辑可当作控制器。若使用iron - router，路由器组件则扮演执行业务逻辑、调用适当模板并更新模型的控制器角色。若想通过目录分离来定义MVC，MeteorJS也不限制，但要遵循其服务器和客户端目录环境分离的规则。

MVC组件	MeteorJS对应部分
模型	集合
视图	模板和模板助手
控制器	服务器方法、客户端操作逻辑（使用iron - router时，路由器组件）

3. SEO优化

3.1 SEO的重要性及MeteorJS应用的问题

SEO是重要话题。MeteorJS适用于交互式应用，也可用于需要搜索引擎索引的应用，如在线教程发布应用。MeteorJS应用在加载HTML时类似单页应用，浏览器中查看页面源代码会发现body标签为空，因为HTML是动态加载的，这给搜索引擎索引带来了挑战。

3.2 搜索引擎索引原理

搜索引擎通过引用找到网页，然后派遣爬虫获取页面内容。爬虫访问页面并收集加载的内容，搜索引擎再根据各种排名规则对收集的内容进行排名。

3.3 让爬虫知晓动态加载内容的方法

有两种方式让爬虫知道网站内容是动态加载的：
1. 在哈希部分前添加感叹号（!），如 https://example.com/a/site#!key=value 。
2. 若路由中不使用哈希部分，可在页面中包含 <meta name="fragment" content="!"> 元标签，这会告知爬虫在指定URL（如 https://example.com/a/site?_escaped_fragment_=key=value ）查找页面的HTML快照。要确保爬虫访问该URL页面时能获取到合适的内容。

3.4 Spiderable包的使用

MeteorJS应用是按需加载模板的动态应用，为了向爬虫展示页面，可使用 spiderable 包。操作步骤如下：
1. 向应用添加 spiderable 包。
2. 安装PhantomJS。
当爬虫携带 _escaped_fragment_ 查询字符串访问页面时， spiderable 包会处理请求，在PhantomJS（无头浏览器）中渲染页面并将内容呈现给爬虫。可在浏览器中携带 _escaped_fragment_ 查询字符串访问网站进行测试，会看到原本为空的body标签中有了HTML内容。

若使用iron - router，可通过其 onBeforeAction 钩子设置页面所需的元信息，也可使用 ms - seo 包来设置元数据。

3.5 PhantomJS的问题及替代方案

PhantomJS存在一些问题，如爬虫同时访问多个页面时，MeteorJS会为每个请求生成一个PhantomJS实例，导致CPU繁忙；出现问题时难以调试；某些云托管环境可能不支持；运行的JavaScript版本较旧。

替代方案是使用服务器端路由，步骤如下：
1. 选择感兴趣的包实现服务器端路由。
2. 将模板放在服务器端，使用 meteorhacks:ssr 等包编译模板。
3. 最好将模板放在私有目录，使用 Assets.getText("home.html") 获取模板。
4. 选择支持服务器端路由的路由器。

这种方法称为服务器端渲染。此外， fast - render 包有助于服务器端渲染，但不直接影响SEO，它能减少应用加载时间，可与Iron - router和FlowRouter无缝配合。

graph LR
    A[搜索引擎] --> B[通过引用找到网页]
    B --> C[派遣爬虫]
    C --> D[访问页面获取内容]
    D --> E[搜索引擎排名]
    F[MeteorJS应用] --> G[动态加载内容]
    G --> H[使用spiderable包和PhantomJS]
    H --> I[呈现内容给爬虫]
    G --> J[服务器端渲染]
    J --> K[编译模板响应请求]

4. ES2015支持

ES2015带来了许多JavaScript新特性，MeteorJS从1.2版本开始支持ES2015特性，无需特殊设置。开发者可以在应用中轻松使用ES2015代码进行学习和实验。

5. 社区资源

MeteorJS社区庞大，能快速找到多数问题的答案。以下是一些值得关注的学习和求助资源：
1. Stack Overflow ：有Meteor标签，可访问 http://stackoverflow.com/questions/tagged/meteor 查看相关问题和答案。
2. MeteorJS讨论论坛 ：网址为 https://forums.meteor.com/ ，可在此提问、讨论核心特性、包使用、与前端框架集成、测试应用、托管解决方案等。
3. Atmosphere ：MeteorJS包仓库，网址为 https://atmospherejs.com/ ，用于搜索、使用和发布MeteorJS包。
4. Meteorhacks ： https://meteorhacks.com/ ，有很多关于MeteorJS的文章，对订阅、MergeBox、托管解决方案等有详细解释。
5. BulletProofMeteor ： https://bulletproofmeteor.com ，交互式教程网站，部分内容免费，部分为付费内容。
6. Meteorpedia ： http://www.meteorpedia.com/read/Main_Page ，可查找MeteorJS相关问题的解决方案。
7. YouTube频道 ： https://www.youtube.com/user/MeteorVideos ，有很多开发者分享使用MeteorJS的经验视频。
8. Meetups ：可通过 http://meteor.meetup.com/ 了解活动信息。
9. Twitter ：关注 https://twitter.com/meteorjs 获取MeteorJS官方新闻，还可向开发团队反馈问题。

此外，还有一些值得关注的社区贡献者，如@arunoda（Kadira背后的开发者）和Josh Owens（有丰富的MeteorJS应用开发经验，博客为 http://joshowens.me/ ）。

使用MeteorJS构建的知名应用包括Atmosphere（ https://atmospherejs.com ）、Kadira、Telescope（ www.telescopeapp.org ）、BulletProofMeteor（ www.bulletproofmeteor.com ）和Meteorpedia等。MeteorJS的官方文档（ http://docs.meteor.com/#/full/ ）也是学习的好资源，其GitHub页面（ https://github.com/meteor/meteor/ ）包含源代码，可深入学习其内部实现。

MeteorJS虽年轻，但遵循基本软件原则，有一些经过实践的最佳实践和模式（如包模式、MVC）。它从1.2版本开始支持ES2015，社区资源丰富。现在你已掌握开发、部署和扩展MeteorJS应用的知识，有信心使用它创建产品，多实践并与社区分享经验，MeteorJS有望改变应用开发方式，让我们一起参与并创造更美好的世界。

6. 最佳实践与模式总结

6.1 基本准则

MeteorJS作为一个年轻的框架，虽没有众多特定的模式和最佳实践，但遵循基本的软件原则是关键。一些经过尝试和验证的最佳实践并非硬性规则，可根据实际需求灵活调整。

6.2 应用模式

包模式 ：这是一种不太常见但可行的应用模式，能帮助开发者更好地组织代码。
MVC模式 ：在MeteorJS中，MVC的定义较为灵活。可以通过组件的角色和用途来划分，也可以通过目录分离来实现，但要遵循MeteorJS的服务器和客户端目录环境分离规则。

模式	特点
包模式	组织代码，提高复用性
MVC模式	灵活定义，可按角色或目录分离

6.3 代码规范

在仅使用包创建应用时，为代码的每个部分使用符合逻辑的命名至关重要。开发者应能够为应用各阶段的模块绘制流程图，以避免设计相关的麻烦，同时提升设计思维。

7. 开发与部署要点回顾

7.1 开发阶段

应用扩展 ：可通过创建新模块（如提醒模块）来扩展应用功能，发挥想象力实现更多特性。
模板处理 ：若不想将模板与应用紧密关联，可包含布局，从包中添加模板，或操作DOM添加编辑和删除功能。
MVC实现 ：根据实际需求选择合适的MVC实现方式，可按组件角色或目录分离来组织代码。

7.2 部署阶段

SEO优化 ：针对MeteorJS应用动态加载HTML的特点，可采用 spiderable 包和PhantomJS，或使用服务器端渲染的方式，让搜索引擎能够正确索引页面内容。
性能优化 ：使用 fast - render 包可减少应用加载时间，提升用户体验。
扩展与集成 ：MeteorJS支持与多种前端框架（如React.js、Angular.js）集成，开发者可根据项目需求选择合适的框架。

graph LR
    A[开发阶段] --> B[应用扩展]
    A --> C[模板处理]
    A --> D[MVC实现]
    E[部署阶段] --> F[SEO优化]
    E --> G[性能优化]
    E --> H[扩展与集成]

8. 社区与学习资源

8.1 社区支持

MeteorJS拥有庞大的社区，开发者可以在社区中快速找到多数问题的答案。社区成员积极分享经验和知识，为新手提供了良好的学习环境。

8.2 学习资源

在线论坛 ：Stack Overflow和MeteorJS讨论论坛是提问和获取答案的好地方，涵盖了各种技术问题和实践经验。
官方文档 ：MeteorJS的官方文档（ http://docs.meteor.com/#/full/ ）是学习的重要资源，提供了详细的API文档和使用指南。
GitHub仓库 ：MeteorJS的GitHub页面（ https://github.com/meteor/meteor/ ）包含源代码，开发者可以通过学习源代码深入了解其内部实现。
其他网站 ：Atmosphere、Meteorhacks、BulletProofMeteor、Meteorpedia等网站提供了丰富的学习材料和教程，帮助开发者提升技能。