校对完毕

校对完毕 @GitFuture 译的挺好,谢谢。
This commit is contained in:
jasminepeng 2017-01-06 15:08:14 +08:00 committed by GitHub
parent 6b4a0bc607
commit 3f8edc03b5

View File

@ -8,11 +8,11 @@
如果你还不确定什么是 HTTP/2或者为什么它能改进你的工作可以先看看我[介绍背景方面的第一篇文章][4]。
记住:开始之前,我要告诉你,尽管你的浏览器可能支持 HTTP/2但你的服务器可能不支持。检查你的主机托管服务看看他们是否提供 HTTP/2 的支持。否则你可能建立你自己的服务器。这篇文章并不会涉及这方面该如何做,但你可以查看 [http2 github][5] 页面,找一找这方面的工具。 
记住:开始之前,我要告诉你,尽管你的浏览器可能支持 HTTP/2但你的服务器可能不支持。检查你的主机托管服务看看他们是否提供 HTTP/2 的支持。否则你可能建立你自己的服务器。这篇文章并不会涉及这方面该如何做,但你可以查看 [http2 github][5] 页面,找一找这方面的工具。 
### 🙏 [准备工作]
### 🙏 [热身工作]
首先组织好你的文件。看一看下面的文件树结构作为组织样式表的起点:
首先组织好你的文件。看一看下面的文件树结构作为组织样式表的起点:
```
`/styles
@ -51,7 +51,7 @@ Setup 目录保存所有的变量函数mixins 以及其它文件正常编
### Global 目录
接下来的目录Global应该包含可在当前站点的多个部分或者每一个页面中重复使用的组件。像按钮、文本、主要样式以及你的浏览器默认设置应该放在这里。我不建议把顶部或底部样式放在这儿,因为某些项目中没有顶部,或者不同页面顶部不同。而且,底部永远是页面的最后一个元素,所以在用户加载完当前站点的其它东西前,不必过分优先考虑加载底部样式。
接下来的目录Global (全局)目录,应该包含可在当前站点的多个部分或者每一个页面中重复使用的组件。像按钮、文本、主要样式以及你的浏览器默认设置应该放在这里。我不建议把 <ruby>头部<rt>header</rt></ruby><ruby>底部样式<rt>footer styles</rt></ruby> 放在这儿,因为某些项目中没有头部,或者不同页面头部不同。而且,底部永远是页面的最后一个元素,所以在用户加载完当前站点的其它东西前,不必过分优先考虑加载底部样式。
记住,如果没有那些定义在 Setup 目录下的东西,你的 Global 样式就可能没有作用,你的 Global 文件看起来应该像这样:
@ -76,7 +76,7 @@ Setup 目录保存所有的变量函数mixins 以及其它文件正常编
### 最后,你的组件
注意,我没有在上述文件树中的 Components 目录里包含索引文件。这是 HTTP/2 所带来的效用。直到现在,我们已经按照标准步骤构建了一个典型的站点,包含相当<ruby>简单的结构<rt>fairly lean infrastructure</rt></ruby>,选择仅仅全局化那些最重要的样式。组件充当他们自己的索引文件。
注意,我没有在上述文件树中的 Components(组件)目录里包含索引文件。这是 HTTP/2 所带来的效用。直到现在,我们已经按照标准步骤构建了一个典型的站点,包含 <ruby>相当简单的结构<rt>fairly lean infrastructure</rt></ruby>,选择仅仅全局化那些最重要的样式。组件充当他们自己的索引文件。
大多数开发者有独特的组织组件的方式,因此我并不想影响你的策略。但是,你所有的组件看起来应该像这样:
@ -93,7 +93,7 @@ header {
... etc`
```
同样的,你要把 Setup 样式包含进来,确保所有东西在编译时都有定义。除了编译这些文件,以及可能要把他们放到 /assets 目录,以便很容易找到模版,对这些文件你不必<ruby>链接<rt>concatenate</rt></ruby><ruby>压缩<rt>minify</rt></ruby>或者改变什么。
同样的,你要把 Setup 样式包含进来,确保所有东西在编译时都有定义。除了编译这些文件,以及可能要把他们放到 /assets 目录,以便很容易找到模版,对这些文件你不必 <ruby>链接 <rt>concatenate</rt></ruby><ruby>压缩<rt>minify</rt></ruby> 或者改变什么。
现在样式表已经差不多了,构建站点应该很简单。
@ -115,7 +115,7 @@ header {
... etc`
```
非常好!在模版里你可能有更简单的方式链接资源,但这里显示你所要做的仅是在开始构建时,在模版文件中链接一个小小的头部样式。这将允许你的站点仅仅加载特定资源到任意给定页面的组件中,而且,能够设定页面从头到脚的组件的优先级。
非常好!在模版里你可能有更简单的方式链接资源,但这里显示你所要做的仅是在开始构建时,在模版文件中链接一个小小的头部样式。这将允许你的站点仅仅加载特定资源到任意给定页面的组件中,而且,能够设定页面从头到脚的组件的优先级。
### 结合在一起
@ -159,12 +159,12 @@ header {
</html>`
```
这是一个高级别方法,但你的项目中可能有调整的更细致<!-- finer-tuned -->的组件,在头部可以用 `<nav>` 容器包含顶部,它会加载自己的样式表。尽你所能地自由发挥,让容器更有作用 - HTTP/2 不会因这些需求而阻碍<!-- penalize -->你。
这是一个高级别方法,但你的项目中可能有调整的<ruby>更细致的<rt>finer-tuned</rt></ruby>组件。例如,在头部的 `<nav>` 组件可能要加载自己的样式表。尽你所能地自由发挥,让组件更有作用 - HTTP/2 不会因这些需求而阻碍你!
For example, you may have a <nav> component within the header that has its own stylesheet to load. Feel free to go as deep as you want with your components in a way that makes sense - HTTP/2 will not penalize you with those extra requests!
### 结论
这只是一个简单的方法,如何用前端思想和 HTTP/2 构建项目,但这仅是皮毛而已。你可能注意到我上面的所用的方法还有改进的空间。请不吝赐教正如我在第一篇文章中所说的HTTP/2 可能颠覆自 HTTP/1 以来我们所熟知的某些标准,所以要慎重思考和实践,以便高效使用 HTTP/2 的开发环境。
这只是一个关于如何在前端用 HTTP/2 构建项目的基本介绍,仅是皮毛而已。你可能注意到我上面所用的方法有的还有改进的空间。请不吝赐教正如我在第一篇文章中所说的HTTP/2 可能颠覆自 HTTP/1 以来我们所熟知的某些标准,所以要慎重思考和实践,以便高效使用 HTTP/2 的开发环境。
--------------------------------------------------------------------------------