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爬取内容然后卖广告吧。

Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖的更多相关文章

  1. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  2. Nodejs in Visual Studio Code 11.前端工程优化

    1.开始 随着互联网技术的发展,企业应用里到处都是B/S设计,我有幸经历了很多项目有Asp.Net的,有Html/js的,有Silverlight的,有Flex的.很遗憾这些项目很少关注前端优化的问题 ...

  3. Nodejs in Visual Studio Code 10.IISNode

    1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...

  4. Nodejs in Visual Studio Code 14.IISNode与IIS7.x

    1.开始 部署IISNode环境请参考:Nodejs in Visual Studio Code 08.IIS 部署Nodejs程序请参考:Nodejs in Visual Studio Code 1 ...

  5. Nodejs in Visual Studio Code 01.简单介绍Nodejs

    1.开始 作者自己:开发人员,Asp.Net , html / js , restful , memcached , oracle ,windows , iis 目标读者:供自己以后回顾 2.我看No ...

  6. Nodejs in Visual Studio Code 04.Swig模版

    1.开始 设置Node_Global:npm config set prefix "C:\Program Files\nodejs" Express组件:npm install e ...

  7. Nodejs in Visual Studio Code 07.学习Oracle

    1.开始 Node.js:https://nodejs.org OracleDB: https://github.com/oracle/node-oracledb/blob/master/INSTAL ...

  8. Nodejs in Visual Studio Code 05.Swig+Bootstrap

    1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...

  9. Nodejs in Visual Studio Code 06.新建Module

    1.开始 Node.js:https://nodejs.org 2.Moudle js编程中,由于大家可以直接在全局作用域中编写代码,使开发人员可以很容易的新建一个全局变量或这全局模块,这些全局变量或 ...

随机推荐

  1. JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  2. JQ 让光标在文本框最末尾

    function setFocus() { //文本末尾获得焦点 var obj = event.srcElement; var txt = obj.createTextRange(); txt.mo ...

  3. 阿里云服务器如何安装memcached

    方法/步骤 1 使用Xshell登陆阿里云服务器. 请使用root帐号登陆.下面的操作全部在home目录里执行 2 安装libevent. 输入命令 yum -y install libevent-d ...

  4. ASP生成新会员编号

    Function MakeUserCode OpenDB() Randomize dim getid_rs,getid set getid_rs=rsobj do while true getid=^ ...

  5. 新装的mysql,直接安装板

    Windows安装MySQL解压版 http://www.cnblogs.com/xiaoit/p/3932241.html my文件 如下: [mysql]# 设置mysql客户端默认字符集defa ...

  6. oracle行列转换总结-转载自ITPUB

    原贴地址:http://www.itpub.net/thread-1017026-1-1.html 谢谢原贴大人 最近论坛很多人提的问题都与行列转换有关系,所以我对行列转换的相关知识做了一个总结, 希 ...

  7. iOS远程消息推送

    iOS 推送基础知识 Apple 使用公共密钥数字证书对来自 iOS 应用程序的推送请求进行身份验证,所以您首先需要创建身份验证密钥,并向 Apple 注册它们.我将在下一节中花相当长的篇幅来直接介绍 ...

  8. Objective - C 中NSString (字符串)与C中的字符串转换问题

    NSString是一个常用的类,NSString是原生支持unicode C中的字符串 比如char * a = "hello world";  是utf8类型的, char* d ...

  9. 掌握JS

    1.原生的js,好比全真教的武功,一步步从基础开始(先练气再御剑),很长一段时间内和jquery有很大差距,掌握以后发现jquery只不过是另外一种武功,看一遍既会.且当学原生到一定程度之后,可以自创 ...

  10. java基础学习总结01

    在过去的一周我们先学习了JAVA的一些基础知识和基础语法,基础知识包括:指令.程序.计算机语言.机器语言.高级语言的概念和特点,java的概念.平台.组建等,以及代码的编译过程,代码的开发流程.基础语 ...