摘要：其实是定义了一个入口文件，这个就不细说了，参考官方文档这个是英文的，大家可以自行百度其他文档。
最近在某网站看到了handlebars.js，出于好奇就百度了下这是神马玩意，结果让我很是欢喜，于是就开始自学下，handlebars就几个方法，蛮简单，言归正传！
以下是基本教学逻辑演示，会附完整代码
测试案例就分为3大块，头、主体、尾：
先来讲讲id="contact"主体有些什么内容，html代码就不贴了，直接看下图：
handlebars的模版代码如下：
图片中的‘2016通讯录’用到了handlebars.registerHelper，代码如下：
Handlebars.registerHelper("transformat", function(value) {
if(value == "通讯录") {
return new Handlebars.SafeString("2016通讯录")
} else {
return "old通讯录";
}
});
注册一个helper，value是模版传进来的值，相当于jq的function()，new Handlebars.SafeString是为了防止把html标签输出为文本形式，就是jq下html()和text()的区别。
最后通过渲染将模版输出到网页，代码如下：
$("#contact").html(Handlebars.compile($("#contact-template").html())(data));
如果有通用模版，就是一个模版要调用多次，上面的代码也可以这样写，方便调用：
var contact=Handlebars.compile($("#contact-template").html());
$("#contact").html(contact(data));
其中的data就是json数据，为了方便就自定义了：
var data = {
"info": "通讯录",
"tit": ["序号", "姓名", "性别", "年龄", "身高"],
"student": [{
"name": "张三",
"sex": "男",
"age": 18,
"sheight": "175"
}, {
"name": "李四",
"sex": "男",
"age": 22,
"sheight": "180"
}, {
"name": "妞妞",
"sex": "女",
"age": 18,
"sheight": "165"
}, {
"name": "袁帅",
"sex": "男",
"age": 17,
"sheight": "173"
}]
};
最后效果图如下，其实和刚刚那个主体一样，就是有头有尾而已：
到这里其实handlebars的基础知识就讲解完了，已经能满足日常网站的需求，当然handlebars还有其他的一些功能，可以参考中文手册：
http://keenwon.com/992.html
未完待续，然后文件的头和尾怎么能拆分出来放在多带带的页面中来引用呢？不然不可能每个页面都写一遍，以后要改就麻烦了（当然如果你前端用的是php、asp之类的动态语言，那么一下部分可以忽略不看，因为我用的是html+ajax来调用api接口的）然后只能百度新的东西，最终找到了require text.js，又一神器出现，天将降大任于斯人也，那么简单再来说说，看招：
text.js是require.js下的一个插件，我代码里都有。
我把头和尾拆分为两个多带带的html文件，如下：
header.html
footer.html
其实放在一个文件中也行，到时候自己体会。
两个文件拆分了，接下来就是引用的，那么require text.js就要出马了，先调用下。
data-main其实是定义了一个入口文件，这个就不细说了，参考官方文档：
http://www.bootcdn.cn/require-text/readme/
这个是英文的，大家可以自行百度其他文档。
main.js的代码是自己写的，写入口，其他的不多说了，就说和引用有关的，看代码：
define(["text!../header.html", "text!../footer.html"], function(header, footer) {
$("#header").html(header);
$("#header").html(Handlebars.compile($("#header-template").html()));
$("#footer").html(footer);
$("#footer").html(Handlebars.compile($("#footer-template").html()));
});
text!../header.html中的text!表示把header.html文件引用进来以文本的形式，反正就是类似于php的include、require，把header.html和footer.html引用到index.html中。
这样一来，Handlebars.compile渲染模版就要放在main.js的define回调中去。
这样就能在任何页面引用Handlebars模版文件了，说到这，大家应该会明白我刚说的头和尾能放一个文件中吧，调用模版也是根据模版的ID调用，如果模版不多，放一个公用html文件就好。
好了，废话就说到这了，放上大家心心念念的完整代码了！拜~
http://files.cnblogs.com/files/yuanxiaojian/handlebars_require.rar
今天过来更新下代码，关于requirejs的，模块化了js的管理和一些公用文件，改动较大，不明白可以参考官方文档，这里就不再介绍了，直接上代码了！2017-01-11
http://files.cnblogs.com/files/yuanxiaojian/handlebars_requirejs.rar
注意：要搭建本地环境后浏览，直接打开没内容，json之类的读取不到，这种最后用的时候肯定是服务器环境，小白不会搭建的话直接百度下载个phpstudy安装就好。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81227.html
摘要：维护起来将是我们开发的噩梦。的都是这种的闭合结构的判断只能判断和，没办法进行这种的逻辑判断。它的设定就是如此，它认为逻辑判断的内容不应该出现在模板中。因为的输出默认转义，几乎所有的模板引擎输出默认都是转义的，避免攻击。 概述 刚接触前端的时候，师傅就给我推荐了Handlebars，自己也蛮喜欢它的语法。到现在，Handlebars都已经更新到3.0.3了，是时候重新过一遍文档了。 ...
摘要：一句化即它是插件的插件，作者事后才发现有这么一个插件绕了不少弯路。这里的主要是为了保存这段内容用于打包使用。免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区 本文由作者郑海波授权网易云社区发布。 前言我这里就不介绍requirejs了， 简而言之： requirejs是支持AMD规范的模块加载器， 事实上它也是...
摘要：简单来说，模板最本质的作用是变静为动，一切利于这方面的都是优势，不利于的都是劣势。二选择的原因全球最受欢迎的模板引擎是全球使用率最高的模板引擎，所以当之无愧是全球最受欢迎的模板引擎。创建更为复杂一些，当时功能更加强大。 showImg(https://segmentfault.com/img/bVbb3kg?w=775&h=216); 为什么需要使用模板引擎？ 关于为什么要使用模板引擎...
阅读 3513·2021-11-11 10:58
阅读 2179·2021-09-22 15:43
阅读 2755·2019-08-30 15:44
阅读 2029·2019-08-30 13:08
阅读 1694·2019-08-29 17:28
阅读 706·2019-08-29 10:54
阅读 474·2019-08-26 11:46
阅读 3385·2019-08-26 11:43
