整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
分享成果，隨喜正能量】人可以無知，但不可以無趣。在自己的心上種一顆快樂的種子，堅定、快樂的做自己的事，更讓大家不那么無趣。
《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小時內與您取得聯系。
