整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
分享成果，随喜正能量】人可以无知，但不可以无趣。在自己的心上种一颗快乐的种子，坚定、快乐的做自己的事，更让大家不那么无趣。
《VBA信息获取与处理》教程是我推出第六套教程，目前已经是第一版修订了。这套教程定位于最高级，是学完初级，中级后的教程。这部教程给大家讲解的内容有：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪贴板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。程序文件通过32位和64位两种OFFICE系统测试。是非常抽象的，更具研究的价值。
教程共两册，八十四讲。今日的内容是专题八“VBA与HTML文档”的第二节上半部分：HTML文档常用元素汇总
3）HTML 注释 <!-- 与 -->
注释标签 <!-- 与 --> 用于在 HTML 插入注释。可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
注释可以按下面的格式写：
<!--注释：文档头部，文档相关消息，并不提供文档内容-->
4）段落 <p>
段落是通过 <p> 标签定义的。浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
在上面的例子中我们已经用到了表述段落的符号<p>，我们如果提取网页小说的数据，新闻等页面的消息，文本都是一段一段的，这样的页面，我们就可以通过<p>标签实现。当运用ie/webbrowser方式提取这类网页的时候，历遍所有段落p元素即可。
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。可以用 <br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）
5）超链接 <a>
使用 <a> 标签在 HTML 中创建链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
有两种使用 <a> 标签的方式：通过使用 href 属性 - 创建指向另一个文档的链接也可以通过使用 name 属性 - 创建文档内的书签。
超链接是我们最常见的页面元素，基本的门户网站都有他，点了以后，可以跳转到另一个页面。一般语法格式：
<a href=”跳转的URL” target=” _blank/_self”>显示的超链接文本</a>
Target属性，表示的是当我们点击超链接，是在原页面进行跳转（_self）还是新建页面进行跳转（_blank）。
为了说明这种超链接，我们更正一下“HTML基础学习-1.html”的内容：
<html>
<head> <!--注释：文档头部，文档相关消息，并不提供文档内容-->
<title>
VBA应用提高篇
</title>
</head>
<body> <!--注释：文档主体-->
<h1>学习VBA语言</h1>
<p>为了更好的掌握VBA的各个知识点，您可以先参考我的第一套教程：VBA代码解决方案</p>
<a href="https://mbd.baidu.com/newspage/data/landingshare?pageType=1&isBdboxFrom=1&context=%7B%22nid%22%3A%22news_9520815886500285610%22%2C%22sourceFrom%22%3A%22bjh%22%7D" target=" _blank">显示学习的网页</a>
</body>
</html>
讲上述代码另存为“HTML基础学习-2.html”内容截图：
打开这个文件：
点击链接：
查看一下源码：
1）标题 <h1> - <h6>
2）水平线 <hr />
3）注释 <!-- 与 -->
4）段落 <p>
5）超链接 <a>
以上各个元素我们要熟练的掌握，才能在分析网页的时候可以随心所欲。下一讲我们继续讲解HTML网页的元素构成。
本节知识点回向：
什么是HTML文档的框架结构是怎样的？说出以下个元素的标签：标题，水平线，注释，段落，超链接 。
本节参考文件：HTML基础学习-1.html；HTML基础学习-2.html
我20多年的VBA实践经验，全部浓缩在下面的各个教程中，教程学习顺序：
【分享成果，随喜正能量】人生在世，会遇到一些好事，还会遇上些坏事。好事我承受得起，坏事也承受得住。就这样坦荡荡做个寻常人也不坏。
TML 中使用 <input> 元素表示单行输入框和 <textarea> 元素表示多行文本框。
HTML中使用的 <input> 元素在 JavaScript 中对应的是 HTMLInputElement 类型。HTMLInputElement 继承自 HTMLElement 接口：
interface HTMLInputElement extends HTMLElement {
...
}HTMLInputElement 类型有一些独有的属性和方法：
而在上述介绍 HTMLInputElement 类型中的属性时，type 属性要特别关注一下，因为根据 type 属性的改变，可以改变<input>的属性。
类型 | 描述 |
text | 文本输入 |
password | 密码输入 |
submit | 表单数据提交 |
button | 按钮 |
radio | 单选框 |
checkbox | 复选框 |
file | 文件 |
hidden | 隐藏的字段 |
image | 定义图像作为提交按钮 |
reset | 重置按钮 |
省略 type 属性与 type="text"效果一样， <input> 元素显示为文本框。
当 type 的值为text/password/number/时，会有以下属性对 <input> 元素有效。
属性 | 类型 | 描述 |
autocomplete | string | 字符串on或off，表示<input>元素的输入内容可以被浏览器自动补全。 |
maxLength | long | 指定<input>元素允许的最多字符数。 |
size | unsigned long | 表示<input>元素的宽度，这个宽度是以字符数来计量的。 |
pattern | string | 表示<input>元素的值应该满足的正则表达式 |
placeholder | string | 表示<input>元素的占位符，作为对元素的提示。 |
readOnly | boolean | 表示用户是否可以修改<input>的值。 |
min | string | 表示<input>元素的最小数值或日期。 |
max | string | 表示<input>元素的最大数值或日期。 |
selectionStart | unsigned long | 表示选中文本的起始位置。如果没有选中文本，返回光标在<input>元素内部的位置。 |
selectionEnd | unsigned long | 表示选中文本的结束位置。如果没有选中文本，返回光标在<input>元素内部的位置。 |
selectionDirection | string | 表示选中文本的方向。可能的值包括forward、backward、none。 |
下面创建一个 type="text" ，一次显示 25 个字符，但最多允许显示 50 个字符的文本框：
<input type="text" size="25" maxlength="50" value="initial value">HTML 使用的 <textarea> 元素在 JavaScript 中对应的是 HTMLTextAreaElement 类型。HTMLTextAreaElement类型继承自 HTMLElement 接口：
interface HTMLTextAreaElement extends HTMLElement {
...
}HTMLTextAreaElement 类型有一些独有的属性和方法：
下面创建一个高度为 25，宽度为 5 的 <textarea> 多行文本框。它与 <input> 不同的是，初始值显示在 <textarea>...</textarea> 之间：
<textarea rows="25" cols="5">initial value</textarea>注意：处理文本框值的时候最好不要使用 DOM 方法，而应该使用 value 属性。
<input> 与 <textarea> 都支持 select() 方法，该方法用于选中文本框中的所有内容。该方法的语法为：
select(): void下面看一个示例：
let textbox=document.forms[0].elements["input-box"];
textbox.select();也可以在文本框获得焦点时，选中文本框的内容：
textbox.addEventListener("focus", (event)=> {
event.target.select();
});当选中文本框中的文本或使用 select() 方法时，会触发 select 事件。
let textbox=document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event)=> {
console.log(`Text selected: ${textbox.value}`);
});HTML5 对 select 事件进行了扩展，通过 selectionStart 和 selectionEnd 属性获取文本选区的起点偏移量和终点偏移量。如下所示：
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}注意：在 IE8 及更早版本不支持这两个属性。
HTML5 提供了 setSelectionRange() 方法用于选中部分文本：
setSelectionRange(start, end, direction): void;下面看一个例子：
<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">选中部分文本</button>
<script>
function selectText() {
let input=document.getElementById("text-sample");
input.focus();
input.setSelectionRange(4, 8); // o Wo
}
</script>如果想要看到选中效果，必须让文本框获得焦点。
不同文本框经常需要保证输入特定类型或格式的数据，或许数据需要包含特定字符或必须匹配某个特定模式。而文本框并未提供验证功能，因此要配合 JavaScript 脚本实现输入过滤功能。
有些输入框需要出现或不出现特定字符。如果想要将输入框变成只读的，只需要使用 preventDefault()方法将按键都屏蔽：
input.addEventListener("keypress", (event)=> {
event.preventDefault();
});而要屏蔽特定字符，就需要检查事件的 charCode 属性。如下所示，使用正则表达式实现只允许输入数字的输入框：
input.addEventListener("keypress", (event)=> {
if (!/\d/.test(event.key)) {
event.preventDefault();
}
});还有一个问题需要处理：复制、粘贴及涉及Ctrl 键的其他功能。在除IE 外的所有浏览器中，前面代码会屏蔽快捷键Ctrl+C、Ctrl+V 及其他使用Ctrl 的组合键。因此，最后一项检测是确保没有按下Ctrl键，如下面的例子所示：
textbox.addEventListener("keypress", (event)=> {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否允许在文本框中输入某些字符。
IE 是第一个实现了剪切板相关的事件以及通过JavaScript访问剪切板数据的浏览器，其它浏览器在后来也都支持了相同的事件和剪切板的访问，后来 HTML5 将其纳入了规范。以下是与剪切板相关的 6 个事件：
剪切板事件的行为及相关对象会因浏览器而异。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜单时触发，但 IE 不仅在这种情况下触发，也会在 copy、cut 和 paste 事件在所有浏览器中都会按预期触发。
在实际的事件发生之前，通过beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改数据。不过，取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作，必须取消 copy、cut和 paste 事件。
剪贴板的数据通过 clipboardData 对象来获取，且clipboardData 对象提供 3 个操作数据的方法：
而 clipboardData 对象在 IE 中使用 window 获取，在 Firefox、Safari 和 Chrome 中使用 event 获取。为防止未经授权访问剪贴板，只能在剪贴板事件期间访问 clipboardData 对象；IE 会在任何时候都暴露 clipboardData 对象。因此，要兼容两者，最好在剪贴板事件期间使用该对象。
function getClipboardText(event){
var clipboardData=(event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
function setClipboardText (event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}如果文本框只有数字，那剪贴时，就需要使用paste事件检查剪贴板上的文本是否无效。如果无效，可以取消默认行为：
input.addEventListener("paste", (event)=> {
let text=getClipboardText(event);
if (!/^\d*$/.test(text)){
event.preventDefault();
}
});注意：Firefox、Safari和Chrome只允许在onpaste事件中访问getData()方法。
在 JavaScript 中，可以用在当前字段完成时自动切换到下一个字段的方式来增强表单字段的易用性。比如，常用手机号分为国家好加手机号。因此，我们设置 2 个文本框：
<form>
<input type="text" name="phone1" id="phone-id-1" maxlength="4">
<input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>当文本框输入到最大允许字符数后，就把焦点移到下一个文本框，这样可以增加表单的易用性并加速数据输入。如下所示：
<script>
function tabForward(event){
let target=event.target;
if (target.value.length==target.maxLength){
let form=target.form;
for (let i=0, len=form.elements.length; i < len; i++) {
if (form.elements[i]==target) {
if (form.elements[i+1]) {
form.elements[i+1].focus();
}
return;
}
}
}
}
let inputIds=["phone-id-1", "phone-id-2"];
for (let id of inputIds) {
let textbox=document.getElementById(id);
textbox.addEventListener("keyup", tabForward);
}
</script>这里，tabForward() 函数通过比较用户输入文本的长度与 maxLength 属性的值来检测输入是否达到了最大长度。如果两者相等，就通过循环表中的元素集合找到当前文本框，并把焦点设置到下一个元素。
注意：上面的代码只适用于之前既定的标记，没有考虑可能存在的隐藏字段。
HTML5 新增了一些表单提交前，浏览器会基于指定的规则进行验证，并在出错时显示适当的错误信息。而验证会基于某些条件应用到表单字段中。
表单字段中添加 required 属性，用于标注该字段是必填项，不填则无法提交。该属性适用于<input>、<textarea>和<select>。如下所示：
<input type="text" name="account" required>也可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填项：
let isRequired=document.forms[0].elements["account"].required;也可以检测浏览器是否支持 required 属性：
let isRequiredSupported="required" in document.createElement("input");注意：不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框，而Safari 什么也不做，也不会阻止提交表单。
HTML5 为 <input> 元素增加了几个新的 type 值。如下所示：
类型 | 描述 |
number | 数字值的输入 |
date | 日期输入 |
color | 颜色输入 |
range | 一定范围内的值的输入 |
month | 允许用户选择月份和年份 |
week | 允许用户选择周和年份 |
time | 允许用户选择时间（无时区） |
datetime | 允许用户选择日期和时间（有时区） |
datetime-local | 允许用户选择日期和时间（无时区） |
电子邮件地址的输入 | |
search | 搜索（表现类似常规文本） |
tel | 电话号码的输入 |
url | URL地址的输入 |
这些输入表名字段应该输入的数据类型，并且提供了默认验证。如下所示：
<input type="email" name="email">
<input type="url" name="homepage">要检测浏览器是否支持新类型，可以在 JavaScript 中创建 <input> 并设置 type 属性，之后读取它即可。老版本中会将我只类型设置为 text，而支持的会返回正确的值。如下所示：
let input=document.createElement("input");
input.type="email";
let isEmailSupported=(input.type=="email");而上面介绍的几个如 number/range/datetime/datetime-local/date/month/week/time 几个填写数字的类型，都可以指定 min/max/step 等几个与数值有关的属性。step 属性用于规定合法数字间隔，如 step="2"，则合法数字应该为 0、2、4、6，依次类推。如下所示：
<input type="number" min="0" max="100" step="5" name="count">上面的例子是<input>中只能输入从 0 到 100 中 5 的倍数。
也可以使用 stepUp() 和 stepDown() 方法对 <input> 元素中的值进行加减，它俩会接收一个可选参数，用于表示加减的数值。如下所示：
input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 减1
input.stepDown(10); // 减10HTML5 还为文本添加了 pattern 属性，用于指定一个正则表达式。这样就可以自己设置 <input> 元素的输入模式了。如下所示：
<input type="text" pattern="\d+" name="count">注意模式的开头和末尾分别假设有^和$。这意味着输入内容必须从头到尾都严格与模式匹配。
与新增的输入类型一样，指定 pattern 属性也不会阻止用户输入无效内容。模式会应用到值，然后浏览器会知道值是否有效。通过访问 pattern 属性可以读取模式：
let pattern=document.forms[0].elements["count"].pattern;使用如下代码可以检测浏览器是否支持pattern 属性：
let isPatternSupported="pattern" in document.createElement("input");HTML5 新增了 checkValidity() 方法，用来检测表单中任意给定字段是否有效。而判断的条件是约束条件，因此必填字段如果没有值会被视为无效，字段值不匹配 pattern 属性也会被视为无效。如下所示：
if (document.forms[0].elements[0].checkValidity()){
// 字段有效，继续
} else {
// 字段无效
}要检查整个表单是否有效，可以直接在表单上调用checkValidity()方法。这个方法会在所有字段都有效时返回true，有一个字段无效就会返回false：
if(document.forms[0].checkValidity()){
// 表单有效，继续
} else {
// 表单无效
}validity 属性会返回一个ValidityState 对象，表示 <input> 元素的校验状态。返回的对象包含一些列的布尔值的属性：
因此，通过 validity 属性可以检查表单字段的有效性，从而获取更具体的信息，如下所示：
if (input.validity && !input.validity.valid){
if (input.validity.valueMissing){
console.log("请指定值.")
} else if (input.validity.typeMismatch){
console.log("请指定电子邮件地址.");
} else {
console.log("值无效.");
}
}通过指定 novalidate 属性可以禁止对表单进行任何验证：
<form method="post" action="/signup" novalidate>
<!-- 表单元素 -->
</form>也可以在 JavaScript 通过 noValidate 属性设置，为 true 表示属性存在，为 false 表示属性不存在：
document.forms[0].noValidate=true; // 关闭验证如果一个表单中有多个提交按钮，那么可以给特定的提交按钮添加formnovalidate 属性，指定通过该按钮无需验证即可提交表单：
<form method="post" action="/foo">
<!-- 表单元素 -->
<input type="submit" value="注册提交">
<input type="submit" formnovalidate name="btnNoValidate"
value="没有验证的提交按钮">
</form>也可以使用 JavaScript 设置 formNoValidate 属性：
// 关闭验证
document.forms[0].elements["btnNoValidate"].formNoValidate=true;以上总结了 <input> 和 <textarea> 两个元素的一些功能，主要是 <input> 元素可以通过设置 type 属性获取不同类型的输入框，可以通过监听键盘事件并检测要插入的字符来控制文本框的内容。
还有一些与剪贴板相关的事件，并对剪贴的内容进行检测。还介绍了一些 HTML5 新增的属性和方法和新增的更多的 <input> 元素的类型，和一些与验证相关的属性和方法。
目背景
刚刚参加完一个项目，背景：后端是用java，后端服务已经开发的差不多了，现在要通过web的方式对外提供服务，也就是B/S架构。后端专注做业务逻辑，不想在后端做页面渲染的事情，只向前端提供数据接口。于是协商后打算将前后端完全分离，页面上的所有数据都通过ajax向后端取，页面渲染的事情完全由前端来做。另外还有一个紧急的情况，项目要紧急上线，整个web站点的开发时间只有两周，两周啊！于是在这样的背景下，决定开始一次前后端完全分离的尝试。
之前开发都是同步渲染和异步渲染混搭的，有些东西可以有后端PHP帮你编译好，如通用的页面模板，后端传回的页面参数等。提前预感到这次完全分离可能会遇到一些困难，但是项目上线要紧，也不能深入搞架构，于是打算就用jQuery+handlebars，jQuery来完成页面逻辑和DOM操作，用handlebars来完成页面渲染，这个方案是如此的简单粗暴，但好处能最稳妥的保证项目按期完成。其实前后端分离并不是一件容易的工作，这么做会有诸多不完善之处，后面再谈。
浅谈前后端分离
所谓的前后端分离，到底是分离什么呢？其实就是页面的渲染工作，之前是后端渲染好页面，交给前端来显示，分离后前端需要自己拼装html代码，然后再显示。前端来管理页面的渲染有很多好处，比如减少网络请求量，制作单页面应用等。事情听起来简单，但这么一分离又会牵扯到很多问题，比如：
以上每一个问题都够棘手，要处理好需要有设计精良又符合实际项目的方案。现在已经有很多框架可以帮我们做这些事情，Backbone, EmberJS, KnockoutJS, AngularJS, React, avalon等等，利用它们可以架构起一个富前端。但框架毕竟是框架，要利用到实际项目中，还是需要有自己的设计，框架并不能解决所有的问题。
之前也有看过淘宝团队的实践，利用nodejs做一个中间层，处理页面渲染、路由控制、SEO等事情，将前后端的分界线进行了重新定义。个人感觉这应该是一个正确的方向，有点颠覆的感觉，前端走向工程化，将变成真正的全栈式大前端。不知现在这种架构是否在淘宝全面铺开，真有点期待看看效果。
以上的框架，还有淘宝的实践，毕竟都是大牛之作，我这个小辈也只是参考学习过，未能在实际项目中使用。低头看看自己现在手头的项目，1个前端，2周时间，要完成一个完整的web项目，还是用最稳妥最低级的方式来搞吧~
基本结构
项目整体并不是一个单页应用，但有些模块需要做成局部的单页操作，像这种需要分步完成的操作，只需局部加载子页面即可。
因此，一个模块有一个主html页面，初始只有一些基本的骨架，有一个名字相同的js文件，该模块逻辑都在此js文件中，有一个名字相同的css文件，该模块的所有样式都定义在此css文件中。
需要异步加载的子页面，像上图中每个步骤的页面，我都使用jQuery的$.load()方法来加载，此方法能在页面某个容器中加载内容，并可指定回调函数，使用起来很方便。被异步加载的子页面我都用_开头，如_step1.html，用于做区分。
为了确保浏览器的前进后退按钮可用，我使用了hash来做路由标记，页面地址如：publish.html#step2。有个缺陷是hash并不会发送给服务器，所以SEO就废了。事实上使用history API也可以更优雅的解决问题，但需要考虑兼容性，还有额外工作要做，考虑时间因素，退而求其次，况且本项目也无需做SEO。或者像淘宝的方案那样，nodejs层与浏览器层统一路由，SEO问题可以迎刃而解。但又明显不在本人的实力范围之内，汗--！
除了用$.load异步加载的子页面，剩余的局部页面就是用handlebars提供的模板渲染了，我使用了handlebars的预编译功能，不得不说很强大，一来节约了页面加载阶段所需的编译时间（编译handlebars模板），二来编译后的模板（js文件）方便复用。
接下来就是前端逻辑如何组织，因为没有用mv*框架，所以只能靠自己来写一个便于开发的结构。如上面所述，每个模块有一个主js文件，文件内容结构如下：
var publish={
//该模块初始化入口
init : function(){
this.renderData(param);
this.initListeners();
},
//内部所用的函数
renderData : function(param){
//渲染数据。。
},
//统一绑定监听器
initListeners : function(){
$(document.body).delegates({
'.btn' : function(){
//点击事件
},
'.btn2' : function(){
//点击事件2
},
'.checkbox' : {
'change' : function(){
//change事件
}
}
});
}
}
每个模块给一个命名空间，所有的方法都挂在上面，js文件中只做函数的定义，不立即执行任何东西，然后在html文件中调用入口方法:publish.init()。业务逻辑都封装到函数中，如上面的renderData，然后供其他地方调用。页面的事件监听器统一都注册在body元素上，用事件代理来完成，为了避免写太多的on、click之类代码，为jQuery扩展了一个delegates方法，用来以配置的方式统一绑定监听器，用法如上所示。把delegates定义的代码也放出来吧：
//以配置的方式代理事件
$.fn.delegates=function(configs) {
el=$(this[0]);
for (var name in configs) {
var value=configs[name];
if (typeof value=='function') {
var obj={};
obj.click=value;
value=obj;
};
for (var type in value) {
el.delegate(name, type, value[type]);
}
}
return this;
}
基本的结构就是这样，没有什么新技术，只是把现有的东西做了一下组合。但工作到此还远远没有结束，在实际应用中还会有一些东西需要处理，下面来详细说说：
公共头部底部的引用
这是一个比较棘手的问题，一般通用的头部和底部会放一些公共的代码，如页面外层结构html代码，站点使用的库如jQuery、handlebars，站点通用js和css文件。在传统的开发中，通常是写一个单独的文件如head.html，在其他页面中用后端代码如include语句引入，由此来进行复用。
现在前后端分离后，无法依靠后端来给你渲染，所以得在前端做了。既然用了handlebars，很容易想到把公用部分写成一个模板，然后预编译出来，生成一个header.js文件，然后在其他页面引用。然而在实际操作中发现了一个问题，handlebars是静态模板，编译后生成的字符串通过innerHTML的方式插入到页面，在一般的模板中这样是没问题的。现在有个问题是header中有一些<script>标签，外链着要使用的库，通过innerHTML插入<scirpt>标签，浏览器并不会发送请求加载对应的js文件，所以就出问题了。
搜索、尝试了多种方法后，最终的方案定为：用document.write()将编译结果写到页面，这样<script>标签能够正常加载。所以每个页面使用头部的代码就变成这样：
<script src="static/js/tpl/head.js"></script> <div id="header"> <script src="static/js/includeHead.js"></script> </div>
includeHead.js中的代码如下：
function includeHead(){
var header=document.getElementById('header');
var compileHead=Handlebars.templates['head'];
var head=compileHead({});
document.write(head);
}
includeHead();
看着是有点别扭，不过为了实现功能，目前也就只能这样了。
虽然用原生的innerHTML无法加载<script>标签中的内容，但是jQuery的$().html()方法进行了优化，可以查找到<script>标签并且执行里面的代码，所以用$().html()是可以完成上面的工作的。
这么一看，这个蹩脚的方案就可以替换了。
路由控制
如上面所述，jQuery的$.load()方法可以满足加载子页面的需求，现在需要解决的问题是，不管用户刷新页面还是前进后退，我们都得根据hash值来渲染对应的视图，其实就是路由控制。这个时候就需要监听hashchange事件了，我定义了一个loadPage方法用来加载子页面，然后绑定监听器如下：
window.onhashchange=this.loadPage;
在loadPage方法中，根据hash的值来调用$.load()方法，子页面的初始化工作，在$.load()的回调函数中指定。
这样做还有一个便捷之处，我们切换视图不必手动调loadPage方法，只需要修改页面的hash就可以了，hash发生变化被监听到，自动加载对应的子页面。例如，点击下一步进入步骤二：
'.next' : function(){
location.href='#step2';
}
如此便实现了一个简单的路由控制，由于不是整站单页面，也没有多级路由，这样完全可以满足需求。至于SEO，就只能呵呵了，正好项目也不需要做SEO，否则此方法得作罢。
另外想说的一点就是页面的缓存，异步加载来的内容可以存在localStorage中，也可以放在页面上进行显隐控制，这样用户在频繁切换视图的时候无需再次请求，回到上一步的时候之前填好的表单数据也不会消失，体验会非常好。
页面间参数传递
有时候我们需要给访问的页面传参数，比如访问一个设备的详细信息页，要把设备id给传过去，detail.html?id=1，这样detail页面可以根据id去请求对应的数据。传统由后端渲染的页面，url中的参数会发送到服务端，服务端接收后可以再渲染到页面上供js使用。我们现在不行了，请求页面压根不跟后端打交道，但这个参数是必不可少的，所以需要前端有一套传递参数的机制。
其实非常简单，通过location.href可以拿到当前的url地址，然后进行字符串匹配，把参数提取出来就可以了。看上去挺土鳖的，但工作起来良好，另外也有考虑过用cookie来传递，感觉有点麻烦。
由于这些参数通常是写在<a>标签上的，而<a>标签又是根据动态数据渲染出来的（因为是动态参数），我们不可能在页面渲染完后，用js修改所有<a>标签的href值，给它追加一个参数。怎么办呢？这时候handlebars就派上用场了，我们可以使用handlebars万能的helper，在渲染页面的时候直接查询url中的参数，然后输出在编译好的代码中。我在handlebars中注册了一个helper，如下：
Handlebars.registerHelper('param', function(key, options){
var url=location.href.replace(/^[^?=]*\?/ig, '').split('#')[0];
var json={};
url.replace(/(^|&)([^&=]+)=([^&]*)/g, function (a, b, key , value){
try {
key=decodeURIComponent(key);
} catch(e) {}
try {
value=decodeURIComponent(value);
} catch(e) {}
if (!(key in json)) {
json[key]=/\[\]$/.test(key) ? [value] : value;
}
else if (json[key] instanceof Array) {
json[key].push(value);
}
else {
json[key]=[json[key], value];
}
});
return key ? json[key] : json;
});
这个名为param的helper可以输出你所要查询的参数值，然后可以直接写在模板中，如：
<a href="detail.html?id={{param id}}">设备详细信息</a>
这样就方便多了！但是这么做有没有问题呢？其实是有些不完美的，如果你考虑“性能”二字的话。一个url中参数的值是固定的，而你每次使用这个helper都会计算一遍，白白做了多余的事情。如果handlebars可以在模板中定义常量就好了，可惜我找遍文档没发现有这个功能。只能为了方便牺牲性能了，也正印证了我标题中所说的“简单粗暴”，呵呵。
数据的校验和处理
由于数据是由后端传来的，有很多不确定性，数据可能不合法，或者结构有错，或者直接是空的。因此前端有必要对数据做一个合法性的校验。借助handlebars，可以很方便的进行数据校验。没错，就是利用helper。handlebars内置的helper如if、each都支持else语句，出错信息可以在else中输出。如果需要个性化的校验，我们可以自己定义helper来完成，关于如何自定义helper，我之前研究了下，写过一篇文章：http://www.cnblogs.com/lvdabao/p/handlebars_helper.html。总之自定义helper很强大，可以完成你所需的任何逻辑。
数据的格式化，如日期、数字等，也可以通过helper来完成。
另外一方面，前端还应对数据进行html转义，避免xss，由于handlebars已经给做了html转义，所以我们可以直接忽略此项了。
总结
本文是我刚刚参加完一个项目后所写，记录一下整个过程遇到的问题及处理方式，其他的一些细碎点如表单异步提交什么的，不是本文重点，不写了。这是我第一次实践前后端完全分离的项目，整个前端全由我来设计、开发。2周时间，凭着这套方案，项目按期开发完成，而且还提前完成了，预留出一天多的时间测试了一遍。
虽然开发任务是完成了，但是回头看一下整个方案，并不是很优雅也没有什么技术含量，文章开头提到的几个问题都没有解决。所以命题为简单粗暴的方案，都是为了赶工期啊。
最后，如果给我再来一次的机会，并且时间充足，我一定要尝试用mv*方案来搞一下，或angular，或avalon。
*请认真填写需求信息，我们会在24小时内与您取得联系。
