Harp 規(guī)則

2021-09-24 19:05 更新

開發(fā) Harp 應(yīng)用模板需要遵循的五個(gè)簡(jiǎn)單規(guī)則。

Harp 沒有復(fù)雜的功能集,只有一些遵循工作的簡(jiǎn)單規(guī)則。Harp 是相對(duì)簡(jiǎn)單的武士刀,而非功能復(fù)雜的瑞士軍刀。通過理解規(guī)則,你將學(xué)會(huì)如何有效使用 Harp。

約定優(yōu)于配置。

Harp 少到只需要一個(gè) public/index.html 文件就可以工作,并不需要任何的配置。添加額外的路由只需添加額外的文件。通過學(xué)習(xí)這些剩余的規(guī)則你將會(huì)發(fā)現(xiàn),所有的 Harp 的功能都是基于約定的。 Harp 致力于提供一個(gè)合理的開發(fā)框架,遵循成型的最佳實(shí)踐。Harp 并非設(shè)計(jì)用于給很多人做很多事情,而是專注于自己擅長的事情。

設(shè)計(jì)原理

秉行多約定,少配置 ,Harp易于上手,讓你更好地開發(fā)產(chǎn)品。

典型 Harp 應(yīng)用的剖析

 myapp.harp.io/                <-- root of your application
   |- harp.json                <-- configuration, globals goes here.
   +- public/                  <-- your application assets belong in the public dir
      |- _layout.jade          <-- optional layout file
      |- index.jade            <-- must have an index.html or index.jade file
      |- _shared/              <-- arbitrary directory for shared partials
      |   +- nav.jade          <-- a partial for navigation
      +- articles/             <-- pages in here will have "/articles/" in URL
          |- _data.json        <-- articles metadata goes here
          +- hello-world.jade  <-- should have at least one .html,  .jade, .md or .ejs file.

根目錄是 public 的。

Harp 是一個(gè)網(wǎng)頁服務(wù)器,所以它可以伺服任何目錄,無論是包含一個(gè)大的 Harp 應(yīng)用,還是只有單個(gè) index.html 文件。

 myapp.harp.io/
     |- index.html           <-- will be served

框架風(fēng)格

Harp 應(yīng)用可以選擇性地以框架風(fēng)格運(yùn)行。當(dāng)一個(gè)項(xiàng)目包含一個(gè) harp.json 文件和一個(gè) public 目錄,public 目錄會(huì)取代根目錄做為伺服目錄??蚣茱L(fēng)格中,公共文件放在 public 目錄中。public 目錄之外的文件不會(huì)被伺服。

 myapp.harp.io/
   |- harp.json                <-- required harp.json file
   |- README.md                <-- won't be served
   |- secrets.txt              <-- won't be served
   +- public/                  <-- explicit public directory
       +- index.html           <-- will be served

忽略以下劃線開頭的文件

任何以下劃線開頭的文件都會(huì)被服務(wù)器忽略。這是布局和局部視圖文件的推薦命名約定。Harp 將會(huì)對(duì)文件和目錄都遵循這個(gè)規(guī)則。

設(shè)計(jì)原理

通過一個(gè)簡(jiǎn)單的約定,指定和鑒別哪些文件不對(duì)終端用戶服務(wù)變得相當(dāng)簡(jiǎn)單。

示例

 myapp.harp.io/
   +- public/
       |- index.html            <-- will be served
       |- _some-partial.jade    <-- won't be served
       +- _shared-partials/     <-- won't be served
           +- nav.jade

靜態(tài)簡(jiǎn)單 asset pipeline

Harp 支持 ?jade?, ?ejs?, ?stylus?, ?less ?以及 ?coffee ?腳本。只需添加 .jade.ejs.styl.less 或者 .coffee 后綴,?Harp asset pipeline? 會(huì)負(fù)責(zé)剩余的事情。 只需添加文件擴(kuò)展名,引用類庫,Harp 便會(huì)自動(dòng)預(yù)編譯。

 myfile.md            ->        myfile.html
 myfile.jade          ->        myfile.html
 myfile.ejs           ->        myfile.html
 myfile.less          ->        myfile.css
 myfile.styl          ->        myfile.css
 myfile.scss          ->        myfile.css
 myfile.sass          ->        myfile.css
 myfile.coffee        ->        myfile.js

如果你高興的話,通過在擴(kuò)展名前加上想要的擴(kuò)展,可以特別指定支持這種類型的文件。

 myfile.jade          ->        myfile.html
 myfile.xml.jade      ->        myfile.xml

然而,這是可選的,就像每一個(gè)擴(kuò)展名都已經(jīng)有了一個(gè)默認(rèn)的擴(kuò)展類型。下面的兩個(gè)文件都會(huì)被當(dāng)作 myfile,css 進(jìn)行伺服,例如:

 myfile.less          ->        myfile.css
 myfile.css.less      ->        myfile.css

可變?cè)獢?shù)據(jù)

_data.json 文件比較特殊,里面的數(shù)據(jù)對(duì)模板文件可用。

 myapp.harp.io/
   +- public/
       |- index.jade
       +- articles/
           |- _data.json        <-- articles metadata goes here
           |- hello-world.jade  <-- hello world article
           +- hello-brazil.jade <-- hello brazil article

_data.json 文件可能包含這樣的內(nèi)容:

 {
   "hello-world": {
     "title": "Hello World.",
     "date": "Feb 28, 2013"
   },
   "hello-brazil": {
     "title": "Hello Brazil.",
     "date": "March 4, 2013"
   }
 }

此信息將在模板文件中可以這樣使用:

 public.articles._data

此外,由于 hello-world 匹配文件名 hello-world.jade,這些變量可以在 hello-world.jade 模板文件中使用。這個(gè)對(duì)象也可以作為 public.articles._data.hello-world 在所有的模板文件中使用。

在模板文件中,可以通過下面方式,在Jade文件中迭代 articles 變量:

 for article, slug in public.articles._data
   a(href="/articles/#{ slug }")
     h2= article.title


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)