Nodejs in Visual Studio Code 13.構建單頁應用Scrat示例挖一挖

1.開始

　　Scrat做者說要搞個很碉堡的示例，果真就搞出來了，若是要學習並使用Scrat，能夠從官方示例開始，簡直太方便了。

 

2.Scrat示例

目錄

　　component_modules : 公共組件

　　components : 系統級組件

　　server : 一些服務，不用管

　　views : Scrat.js,Index.html等Scrat框架內容

　　component.json : Scrat生態組件配置文件 

　　fis-conf.js : FIS配置文件

　　package.json : Node配置文件

　　系統級組件獨立成一個文件夾，包括js,css,handlebars（什麼是handlebars？handlebars是一個template，構建時做爲一個tpl屬性存儲在js文件中，而後渲染的時候會動態讀取數據最終成爲咱們看到的HTML）.

 

骨架的渲染

　　經過Site.js與site.handlebars中的代碼實現的以下

　　menu.render,footer.render，好熟悉的節奏，Express視圖引擎就是這麼寫的.

 

骨架的構成

　　打開scrat/components/site/site.handlebars，系統由site-menu，site-content,site-footer三部分構成。

<div class="site transition-all">
    <div class="site-menu transition-all" id="site-menu"></div>
    <div class="site-content transition-all">
        <div id="site-views" class="site-views">
            {{#each views}}
            <div class="site-view" data-page="{{@key}}"></div>
            {{/each}}
        </div>
    </div>
    <div id="site-footer" class="site-footer transition-all"></div>
</div>

 

 

Require

　　require表示引用依賴的文件

　　each和extend是經過scrat-team-each,scrat-team-extend下的component.json的name字段對應上的

{
  "name": "each",
  "repo": "scrat-team/each",
  "description": "A forEach shim for both array and object",
  "version": "0.1.0",
  "keywords": ["each", "forEach"],
  "scripts": ["index.js"],
  "dependencies": {
    "scrat-team/type": "0.1.0"
  },
  "license": "MIT"
}

　　

　　

3.結束

　　接下來結合官網的示例與說明，已經具有將本身的.Net前端項目重構爲scrat項目的東風了，而後可能會有坑，先試試吧。

　　單頁HTML技術的缺陷：可能會致使你的網站沒法被爬取，我想這也是爲何用Blink技術的是twitter、facebook之流，這些站點大概不想被Google爬取內容而後賣廣告吧。