knot.js 這個項目其實兩年前就已經開始并且成型了，它的第一個版本實際上已經被我應用到自己的項目中已經一年有餘，效果很不錯。不過由于一直忙于工作和小孩，再加上拖延症爆發，直到現在才将這個項目徹底重構完成，并架設了網站和撰寫了詳細的文檔。
在中文網站建立之前，我會在這裡用一系列部落格向大家介紹knot.js。
knot.js并不是簡單的“另一個”前端mvvm架構。 比較angularjs，knockoutjs等前輩，knot.js有很多創新和突破，下面我簡單介紹下knot.js的幾大優勢：
cbs
cbs是一種全新的前端開發方式。它的名字來自于“cascading binding sheet”， 看起來是不是和“css”很像？實際上它的工作方式也和css非常相似，熟悉ccs的你幾乎不需要多少額外的成本就能學會。
就像css把樣式從html中提取出來使得網頁的可維護性得以大幅提高， cbs把混雜在html中的資料綁定邏輯提取出來，形成獨立的，結構化的cbs塊或者cbs檔案，讓你的html和資料綁定邏輯清爽易讀。
下圖左邊是angularjs的資料綁定配置執行個體片段，右邊是同樣功能的cbs化之後的knot.js配置執行個體片段，knot.js明顯清爽很多。
随着項目的變大和變複雜，cbs帶來的優勢将會十分顯著。事實上去年讓我冒險将完全不成熟的knot.js應用于項目的主要原因就是我實在無法抵擋cbs
帶來的誘惑。 相信你隻要嘗試一下cbs也會有類似的感受。
自動資料感覺
knot.js的另一項特色是資料自動感覺功能。
傳統mvvm架構為了實作資料感覺（偵測資料變化以修改ui），往往逼迫使用者按它的要求和規範編寫model/view
model，你所熟悉的一切在架構裡都變了，甚至一個簡單的計時器都得重新學習，全程學習曲線均相當陡峭。
knot.js則幾乎不對你的model/view model做任何要求，哪怕是一個直白的json對象，knot.js也能自動建立雙向綁定。你以前所有的知識在knot.js中都有效，隻需通過簡單地熟悉下knot.js中寥寥的幾個概念，你就能迅速上手。
下圖左邊是angularjs的代碼片段，右邊是使用knot.js後的代碼片段。你應該能發現knot.js的代碼和你平時寫的js代碼幾乎沒什麼不同。
調試器
相信任何一個用過架構的程式猿都有過和架構搏鬥的痛苦經曆。一個小小的配置錯誤，就能殺掉你一個下午的時間。
knot.js希望改變這個現狀。是以我模仿了常見的css調試器開發了knot.js
cbs調試器，使你能夠實時監控整個系統内各個html元素上的綁定狀态。knot.js調試器甚至還提供了css調試器常見的滑鼠選取元素/元素高亮功
能，讓你輕易定位自己想要監控的html元素。
knot.js調試器基本上把整個系統變成了一個白盒系統，所有的工作細節均能一覽無遺。你開發過程中的絕大多數問題都能通過調試器解決。
knot.js還有這些優點
檔案很小。壓縮後不過45k（不含debugger）。
knot.js功能齊全。雖然檔案微小，但這是因為整個系統設計頗為簡潔。你需要的各種功能基本上knot.js都已經提供。
自由。knot.js在整個設計過程中十分注意程式員對系統的控制性。你幾乎可以在任何一個步驟介入，增加自己想要的邏輯。使用這個架構，你不會比直接使用jquery多感受到多少限制。
免費。基于mit license。
一些提示
knot.js 支援所有的主流浏覽器，但不支援ie8及更早版本
這是knot.js的第一個正式釋出版本
雖然我會持續發表部落格介紹knot.js的方方面面，但在中文網站建立起來之前，你可能需要閱讀英文文檔獲得幫助。
一個例子
html
<div class="knot_example">
<!-- 清晰幹淨的html，維護便利 -->
<h3>greeting from knot.js</h3>
<p>
<label>input your name here: </label>
<input type="text">
</p>
<b id="hellostring"></b>
</div>
<a>/* </a>
<a> 這段cbs吧文本框的value屬性綁定到#hellostring的text屬性 </a>
<a> 文本框的輸出将被加上"hello" 再輸出到 #hellostring.text </a>
<a> "[immediately:1]" 這個選項告訴knot.js每一次擊鍵都要更新資料。 </a>
<a> */ </a>
<a>.knot_example input{ </a>
<a> value[immediately:1] > {return value? ("hello " + value + " !"): ""} </a>
<a> : #hellostring.text; </a>
<a>} </a>
如果你對knot.js感興趣，請關注我以擷取後續更新提醒。同時請點選推薦此文，knot.js需要足夠的注意力來吸引開發者和建立自己的社群。
knot.js感謝你的支援。
作者：knot.js
來源：51cto