本篇文章給大家分享的是有關開源框架knot.js的優(yōu)勢都有哪些，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯自成立以來，一直致力于為企業(yè)提供從網站策劃、網站設計、網站設計制作、成都做網站、電子商務、網站推廣、網站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯網的全面整合營銷服務。公司擁有豐富的網站建設和互聯網應用系統(tǒng)開發(fā)管理經驗、成熟的應用系統(tǒng)解決方案、優(yōu)秀的網站開發(fā)工程師團隊及專業(yè)的網站設計師團隊。

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

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

CBS

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

就像CSS把樣式從HTML中提取出來使得網頁的可維護性得以大幅提高， CBS把混雜在HTML中的數據綁定邏輯提取出來，形成獨立的，結構化的CBS塊或者CBS文件，讓你的HTML和數據綁定邏輯清爽易讀。

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

自動數據感知

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

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

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

調試器

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

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

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

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

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

3. Knot.js功能齊全。雖然文件微小，但這是因為整個系統(tǒng)設計頗為簡潔。你需要的各種功能基本上knot.js都已經提供。

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

5. 免費。基于MIT License。

一些提示

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

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

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

一個例子

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

你可以立即訪問 http://www.knotjs.com/tutorial/ 開始學習使用knot.js。

HTML

<div class="knot_example">      <!-- 清晰干凈的HTML，維護便利　-->      <h4>Greeting from knot.js</h4>     <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]" 這個選項告訴knot.js每一次擊鍵都要更新數據。  */ .knot_example input{     value[immediately:1] > {return value? ("Hello " + value + " !"): ""}         : #helloString.text; }

以上就是開源框架knot.js的優(yōu)勢都有哪些，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯行業(yè)資訊頻道。

本文題目：開源框架knot.js的優(yōu)勢都有哪些
鏈接分享：http://vcdvsql.cn/article18/pcohgp.html

成都網站建設公司_創(chuàng)新互聯，為您提供網站維護、App開發(fā)、網站策劃、品牌網站制作、企業(yè)建站、云服務器

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯