今天看了《從jQuery 平滑過渡到 vue》的瀏覽量對於我個人是個驚喜。先感謝大家的支持！ 真的沒想到，有點哽咽，同時感覺自己責任也大了。所以也想好好地把這篇文章寫好。計劃今天介紹一下項目，在下集將 jquery 轉換爲 vue。
用 jquery 開發單頁應用套路 1. 渲染視圖 2 獲取數據 3 綁定事件 4 更新視圖，5 設計路由。在高級點就是設計一個 state 狀態機持有頁面的狀態，然後將交互解釋爲 action 動作，動作更新狀態，按鈕點擊也會根據頁面狀態觸發不同動作。今天這裏的代碼我是 github 上找到，很有代表性，我就以此基礎進行修改了。這是應用運行起來的效果，自己漢化了一下，其他基本沒動，感謝作者的代碼。
項目我是用 npm 管理的，配置好 package.json 運行一下 npm install 讀取 package.json 安裝所有的依賴。
然後再 index.html 中引用一下，需要在一個服務啓動項目，這裏我用 visual studio code ，一個非常不錯做的 IDE 輕量級的，很好用推薦。
頁面設計爲三部分，首先是 header 部分，包含一個標題，還有創建一個任務的輸入框。然後就是中間的任務列表，列表可以checkbox 表示任務結束，可以點擊 x 來刪除任務，底部爲導航，可以切換顯示全部任務，顯示未完成和已完成任務列表。然後顯示未完成任務列表。
這裏介紹一下 handlerbars 這個庫，在我剛剛入行時，接受一個任務來基於混合模式來開發 android 應用，基本思路是自己寫一個 webview ，然後用 webview 來訪問一個遠端的單頁應用。接受到這個任務我就開始搭建我們的單頁應用，首先需要設計我的路由，而且視圖需要模塊化，也可以叫做組件化。所以需要模板來根據不同 json 來渲染視圖。當時我就選中了 handlerbars 來實現這個需求。
說到 handlerbars ，我們需要懂得其實現原理，在這我們就簡單地說了 complie 出一個模板，然後將一個上下文(也就是和這個模板綁定數據)傳入創建生產一個 html 字符串。
工具類我就不說了，uuid 產生一個隨機的 id,pluralize 不用考慮了處理英文單複數的，store 簡單地對 localstorage 封裝了來存儲數據的
init 是初始化啓動我們應用的方法，入口。這裏做的都是初始化的工作，我們一一來看看，首先初始化數據庫，然後就是初始化模板，綁定事件注意是事件而不是數據。最後就是路由，這裏:filter 是一個參數，可以讀取參數來賦值給 filter,我們的路由主要控制顯示篩選過的任務。然後初始化路由爲 all
這裏路由管理用到了一個 director.js 庫，通過路由來控制視圖切換，讀取路由信息來判斷頁面。
jQuery 是基於事件的，所以綁定事件顯得至關重要。bind（this）
渲染方法，先獲取數據，然後將數據傳入模板中渲染出 html
渲染底部同樣調用我們的在 init 創建好的 handlebar 模板。
切換所有的任務的狀態，先獲取 check 然後根據狀態來切換每條任務的完成狀態。
我們獲取各種狀態的列表，getFilteredTodos 獲取篩選後的任務列表。
刪除所有已完成的任務，也就是讓 todos 列表篩選出所有未完成任務。
根據任務的 id 來獲取該條任務的在列表的位置，這裏先從 li 的 data-id 屬性獲取任務的 id 然後用 id 來查找 todo 這樣我們就能操作這條任務。是刪除還是更新呀。
創建一條任務，先清空新任務輸入框，如果輸入框有內容，將現有的任務添加到任務列表。
通過該方法來切換該任務的狀態。
編輯模式，我們爲任務條目添加編輯樣式，讓他成爲焦點。
編輯的快捷鍵，如果輸入是回車鍵表示退出編輯模式，如果輸入 ESC 鍵在退出之前爲記錄添加 abort 屬性。
更新條目，先獲取任務的 dom ,如果任務記錄中包含 abort 屬性，將屬性賦值 false , 如果沒有任務沒有內容就清楚該任務。如果有任務有內容就更新 todos 列表中該任務的內容。
刪除一條任務，將該任務從 todos .中移出讓後開始渲染界面。