原文链接：http://www.jianshu.com/p/0b3bbd52ad48
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
今天第一天上班没多少事情，公司用的是SVN代码管理器，后端人员帮我把环境搭建好以后老大就让我在网上找一下Handlebars.js和Seajs来看看，因为公司用的是这种模板库和规范，大概了解一下这两个东西明天就要开始写页面了。
（一）handlebars.js
对于handlebars.js，在网上找到杨元的博客--《js模版引擎handlebars.js实用教程——为什么选择Handlebars.js》
介绍
Handlebars 是 JavaScript一个语义模板库，通过对view和data的分离来快速构建web模板。在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。
基本语法
Handlebars expressions 是handlebars模板中最基本的单元，使用方法是加两个花括号{{value}}, handlebars模板会自动匹配相应的数值，对象甚至是函数。
handlebars会根据上下文来自动对表达式进行匹配，如果匹配项是个变量，则会输出变量的值，如果匹配项是个函数，则函数会被调用。handlebars会根据当前上下文输出content变量的title属性的值。
在JavaScript中，使用Handlebars.compile()方法来预编译模板。
---如何引入Handlebars.js？
因为Handlebars.js是Jquery的一个插件，第一步当然要引用Jquery啦，然后引用Handlebars.js即可，仅仅需要这两个js文件。
---each-基本循环使用方法
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-基本循环使用方法 - by 杨元</title>
</head>
<body>
each-基本循环使用方法
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
<!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18
},
{
"name": "李四",
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
]
};
//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script> </body>
</html>
Handlebars.js一个重要特性：循环。#each可以理解成循环命令，循环的是json对象中的student属性。对于每次循环，都可以读出里边的name、sex、age属性。
---each-循环中使用this
<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-循环中使用this - by 杨元</title>
</head>
<body>
each-循环中使用this
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">
</tbody>
</table>
<!--插件引用-->
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{/each}}
</script>
<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = [
{
"name": "张三",
"sex": "0",
"age": 18
},
{
"name": "李四",
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
];
//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));
});
</script> </body>
</html>
很多时候，我们拿到的json对象，本身就是一个list，并不是map，直接就可以遍历，不需要#each student这样指定遍历某个属性。 此时可以用#each this，表示遍历当前对象。this表示当前上下文，非常灵活。
（二）SeaJs
--SeaJs是什么？
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。但是它与jQuery等JavaScript框架不同的是，SeaJS没有扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。
--SeaJs有什么好处？
使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。
--SeaJS的特性：
一是html页面不用再维护冗长的script标签列表，只要引入一个sea.js即可。
二是js代码以模块进行组织，各个模块通过require引入自己依赖的模块，代码清晰明了。
--模块的定义及编写：
模块定义函数define：SeaJS中使用“define”函数定义一个模块，define可以接收三个参数：
如果只有一个参数，则赋值给factory。如果有两个参数，第二个赋值给factory；第一个如果是array则赋值给deps，否则赋值给id。如果有三个参数，则分别赋值给id，deps和factory。但是，包括SeaJS的官方示例在内几乎所有用到define的地方都只传递一个工厂函数进去，类似与如下代码：
个人建议遵循SeaJS官方示例的标准，用一个参数的define定义模块。那么id和deps会怎么处理呢？
id是一个模块的标识字符串，define只有一个参数时，id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块，则这个模块的ID会赋值为“http://example.com/a.js”，没有特别的必要建议不要传入id。deps一般也不需要传入，需要用到的模块用require加载即可。
工厂函数factory解析
工厂函数是模块的主体和重点。在只传递一个参数给define时（推荐写法），这个参数就是工厂函数，此时工厂函数的三个参数分别是：
require——模块加载函数，用于记载依赖模块。
exports——接口点，将数据或方法定义在其上则将其暴露给外部调用。
module——模块的元数据。
这三个参数可以根据需要选择是否需要显示指定。
下面说一下module。module是一个对象，存储了模块的元信息，具体如下：
module.id——模块的ID。
module.dependencies——一个数组，存储了此模块依赖的所有模块的ID列表。
module.exports——与exports指向同一个对象。
模块的载入和引用
上文说过一个模块对应一个js文件，而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块，所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。SeaJS支持如下标识：
根据应用场景的不同，SeaJS提供了三个载入模块的API，分别是seajs.use，require和require.async，下面分别介绍。seajs.use：
seajs.use主要用于载入入口模块。入口模块相当于C程序的main函数，同时也是整个模块依赖树的根。上面在TinyApp小例子中，init就是入口模块。
require：
require是SeaJS主要的模块加载方法，当在一个模块中需要用到其它模块时一般用require加载。
require.async：
SeaJS会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用到时才下载，可以使用require.async。这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。