knot.js 這個(gè)項(xiàng)目其實(shí)兩年前就已經(jīng)開始并且成型了，它的***個(gè)版本實(shí)際上已經(jīng)被我應(yīng)用到自己的項(xiàng)目中已經(jīng)一年有余，效果很不錯(cuò)。不過(guò)由于一直忙于工作和小孩，再加上拖延癥爆發(fā)，直到現(xiàn)在才將這個(gè)項(xiàng)目徹底重構(gòu)完成，并架設(shè)了網(wǎng)站和撰寫了詳細(xì)的文檔。

knot.js 英文官方網(wǎng)站在這里：http://www.knotjs.com   很遺憾中文網(wǎng)站還未能有精力完成，如果你有意加入我?guī)椭ㄔO(shè)中文網(wǎng)站，請(qǐng)email knotjs@gmail.com

在中文網(wǎng)站建立之前，我會(huì)在這里用一系列博客向大家介紹knot.js。  

Knot.js并不是簡(jiǎn)單的“另一個(gè)”前端MVVM框架。 比較AngularJS，KnockoutJS等前輩，knot.js有很多創(chuàng)新和突破，下面我簡(jiǎn)單介紹下knot.js的幾大優(yōu)勢(shì)： 

CBS

CBS是一種全新的前端開發(fā)方式。它的名字來(lái)自于“Cascading Binding Sheet”， 看起來(lái)是不是和“CSS”很像？實(shí)際上它的工作方式也和CSS非常相似，熟悉CCS的你幾乎不需要多少額外的成本就能學(xué)會(huì)。

就像CSS把樣式從HTML中提取出來(lái)使得網(wǎng)頁(yè)的可維護(hù)性得以大幅提高， CBS把混雜在HTML中的數(shù)據(jù)綁定邏輯提取出來(lái)，形成獨(dú)立的，結(jié)構(gòu)化的CBS塊或者CBS文件，讓你的HTML和數(shù)據(jù)綁定邏輯清爽易讀。

下圖左邊是AngularJS的數(shù)據(jù)綁定配置實(shí)例片段，右邊是同樣功能的CBS化之后的knot.js配置實(shí)例片段，knot.js明顯清爽很多。 隨著項(xiàng)目的變大和變復(fù)雜，CBS帶來(lái)的優(yōu)勢(shì)將會(huì)十分顯著。事實(shí)上去年讓我冒險(xiǎn)將完全不成熟的knot.js應(yīng)用于項(xiàng)目的主要原因就是我實(shí)在無(wú)法抵擋CBS 帶來(lái)的誘惑。 相信你只要嘗試一下CBS也會(huì)有類似的感受。

自動(dòng)數(shù)據(jù)感知

Knot.js的另一項(xiàng)特色是數(shù)據(jù)自動(dòng)感知功能。 傳統(tǒng)MVVM框架為了實(shí)現(xiàn)數(shù)據(jù)感知（偵測(cè)數(shù)據(jù)變化以修改UI），往往逼迫用戶按它的要求和規(guī)范編寫model/view model，你所熟悉的一切在框架里都變了，甚至一個(gè)簡(jiǎn)單的計(jì)時(shí)器都得重新學(xué)習(xí)，全程學(xué)習(xí)曲線均相當(dāng)陡峭。 

Knot.js則幾乎不對(duì)你的model/view model做任何要求，哪怕是一個(gè)直白的json對(duì)象，knot.js也能自動(dòng)建立雙向綁定。你以前所有的知識(shí)在knot.js中都有效，只需通過(guò)簡(jiǎn)單地熟悉下Knot.js中寥寥的幾個(gè)概念，你就能迅速上手。

下圖左邊是AngularJS的代碼片段，右邊是使用Knot.js后的代碼片段。你應(yīng)該能發(fā)現(xiàn)Knot.js的代碼和你平時(shí)寫的js代碼幾乎沒什么不同。

調(diào)試器

相信任何一個(gè)用過(guò)框架的程序猿都有過(guò)和框架搏斗的痛苦經(jīng)歷。一個(gè)小小的配置錯(cuò)誤，就能殺掉你一個(gè)下午的時(shí)間。 Knot.js希望改變這個(gè)現(xiàn)狀。所以我模仿了常見的CSS調(diào)試器開發(fā)了knot.js CBS調(diào)試器，使你能夠?qū)崟r(shí)監(jiān)控整個(gè)系統(tǒng)內(nèi)各個(gè)HTML元素上的綁定狀態(tài)。knot.js調(diào)試器甚至還提供了CSS調(diào)試器常見的鼠標(biāo)選取元素/元素高亮功 能，讓你輕易定位自己想要監(jiān)控的HTML元素。

knot.js調(diào)試器基本上把整個(gè)系統(tǒng)變成了一個(gè)白盒系統(tǒng)，所有的工作細(xì)節(jié)均能一覽無(wú)遺。你開發(fā)過(guò)程中的絕大多數(shù)問(wèn)題都能通過(guò)調(diào)試器解決。

Knot.js還有這些優(yōu)點(diǎn)

1. 文件很小。壓縮后不過(guò)45k（不含debugger）。

2. 快速。根據(jù)我的初步測(cè)試，knot.js僅略慢于直接使用jQuery操作DOM Tree，快過(guò)AngularJS。http://www.knotjs.com/performance/

3. Knot.js功能齊全。雖然文件微小，但這是因?yàn)檎麄€(gè)系統(tǒng)設(shè)計(jì)頗為簡(jiǎn)潔。你需要的各種功能基本上knot.js都已經(jīng)提供。

4. 自由。knot.js在整個(gè)設(shè)計(jì)過(guò)程中十分注意程序員對(duì)系統(tǒng)的控制性。你幾乎可以在任何一個(gè)步驟介入，增加自己想要的邏輯。使用這個(gè)框架，你不會(huì)比直接使用jQuery多感受到多少限制。

5. 免費(fèi)?；贛IT License。

一些提示

1. Knot.js 支持所有的主流瀏覽器，但不支持ie8及更早版本

2. 這是Knot.js的***個(gè)正式發(fā)布版本

3. 雖然我會(huì)持續(xù)發(fā)表博客介紹Knot.js的方方面面，但在中文網(wǎng)站建立起來(lái)之前，你可能需要閱讀英文文檔獲得幫助。

一個(gè)例子

下面是一個(gè)簡(jiǎn)單的例子，以期給你一個(gè)初步的直觀感受。 這個(gè)例子顯示一個(gè)文本框，輸入姓名，就能得到來(lái)自knot.js的問(wèn)候。你可以訪問(wèn)knot.js主頁(yè)試用: http://www.knotjs.com

你可以立即訪問(wèn) http://www.knotjs.com/tutorial/ 開始學(xué)習(xí)使用knot.js。

HTML

<div class="knot_example"> 
 
    <!-- 清晰干凈的HTML，維護(hù)便利　--> 
 
    <h3>Greeting from knot.js</h3> 
    <p> 
        <label>Input your name here: </label> 
        <input type="text"> 
    </p> 
    <p> 
        <b id="helloString"></b> 
    </p> 
</div> 

CBS

/* 
    這段CBS吧文本框的value屬性綁定到#helloString的text屬性 
    文本框的輸出將被加上"Hello" 再輸出到 #helloString.text 
    "[immediately:1]" 這個(gè)選項(xiàng)告訴knot.js每一次擊鍵都要更新數(shù)據(jù)。 
 */ 
.knot_example input{ 
    value[immediately:1] > {return value? ("Hello " + value + " !"): ""} 
        : #helloString.text; 
} 

如果你對(duì)knot.js感興趣，請(qǐng)關(guān)注我以獲取后續(xù)更新提醒。同時(shí)請(qǐng)點(diǎn)擊推薦此文，knot.js需要足夠的注意力來(lái)吸引開發(fā)者和建立自己的社區(qū)。

knot.js感謝你的支持。