BiSheng.js數(shù)據(jù)雙向綁定庫
不推薦繼續(xù)使用,請移步 brix-bisheng
BiSheng.js 是純粹的數(shù)據(jù)雙向綁定庫。
BiSheng.js 的名稱源自活字印刷術(shù)的發(fā)明者“畢昇”。因為單向綁定猶如“刻版印刷”,雙向綁定猶如“活字印刷”,故名 BiSheng.js。
快速開始
-
下載 BiSheng.js
bower install bishengjs
-
引入 BiSheng.js
<script src="./bower_components/bishengjs/dist/bisheng.js"></script>
-
使用
// HTML 模板 var tpl = '{{title}}' // 數(shù)據(jù)對象 var data = { title: 'foo' } // 執(zhí)行雙向綁定 BiSheng.bind(data, tpl, function(content){ // 然后在回調(diào)函數(shù)中將綁定后的 DOM 元素插入文檔中 $('div.container').append(content) }); // 改變數(shù)據(jù) data.title,對應(yīng)的文檔區(qū)域會更新 data.title = 'bar'
目錄
代碼的結(jié)構(gòu)按照職責(zé)來設(shè)計,見下表;打包后的文件在 dist/ 目錄下;API 和文檔在 doc/ 目錄下;測試用例在 test/ 目錄下,基本覆蓋了目前已實現(xiàn)的功能。
| 源文件 | 職責(zé) & 功能 |
|---|---|
| src/ast.js | 修改語法樹,插入定位符。 |
| src/bisheng.js | 雙向綁定的入口。 |
| src/expose.js | 模塊化,適配主流加載器。 |
| src/flush.js | 更新 DOM 元素。 |
| src/html.js | 轉(zhuǎn)換 HTML 字符串為 DOM 元素。 |
| src/locator.js | 生成定位符,解析、更新定位符的屬性。 |
| src/loop.js | 數(shù)據(jù)屬性監(jiān)聽工具。 |
| src/scan.js | 掃描 DOM 元素,解析定位符。 |
評論
圖片
表情
