BiuJS[v1.0]說明文檔(1)：總體結構

崔曉明發布于2019-08-22 11:21 / 3382人閱讀

摘要：是一個輕巧的框架它實現了數據的雙向綁定并提供一些基本的指令幫助你提升效率，比如，，，，是的，如你所見，以開頭的指令是它的獨特標識行左右的代碼量，讓應用的開發和加載的一瞬完成倉庫啟動首先我們來看一下是如何啟動的是的掛載點，它決定在多大范圍的樹

BiuJS

BiuJS是一個輕巧的mvvm框架
它實現了數據的雙向綁定
并提供一些基本的指令幫助你提升效率，比如$for，$model，$if，$click，$style
是的，如你所見，以$開頭的指令是它的獨特標識
1000行左右的代碼量，讓應用的開發和加載biu的一瞬完成
BiuJS倉庫: https://github.com/veedrin/biu

啟動

首先我們來看一下BiuJS是如何啟動的

let app = new Biu({
    mount: "#app",
    data: {
        me: "BiuJS"
    },
    action: {
        change: function() {
            console.log("changed");
        }
    }
});

mount是BiuJS的掛載點，它決定BiuJS在多大范圍的DOM樹內起作用，并且它只能識別id選擇器

data是BiuJS的數據模型，頁面就是通過綁定這里的數據實現自動更新的

action是BiuJS的方法集合，借此實現行為邏輯

劫持

JavaScript提供了一個強大的接口Object.defineProperty，通過它我們可以劫持對象的getter和setter

也就是說，被劫持過的數據，如果值發生了變化，就會觸發setter

Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
        return value;
    },
    set: function(newValue) {
        console.log("changed");
    }
});

假如我們在setter里加個回調函數，在回調函數中把新值寫進DOM里，數據變化與頁面變化同步不就實現自動化了么？

Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
        return value;
    },
    set: function(newValue) {
        callback(newValue);
    }
});

function callback(newValue) {
    node.innerHTML = newValue;
}

對，這就是BiuJS的命脈所在，很簡單吧！

不過，為了進一步提升效率，我們還有大量工作要做。接著往下看

如果數據變化要與多處頁面的變化同步，這時候就需要一個工具來統一接收更新了

我們把DOM元素與回調函數打包在一起，依次扔進一個數組里，當數據觸發setter的時候，再用一個函數遍歷這個數組，依次調用回調函數，一對多的同步自動化也被我們實現了

Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
        return value;
    },
    set: function(newValue) {
        notify(newValue);
    }
});

function notify(newValue) {
    for (let i = 0; i < array.length; i++) {
        array.update(newValue);
    }
}

這個行為有點像送報紙，所以我們稱之為訂閱，訂閱的人再多，都不會手忙腳亂

訂閱器

看起來很有道理，可是訂閱這個行為到底是怎么實現的呢？

首先要明確一點，那個數組(訂閱清單)在數據那里，否則setter怎么觸發數組呢！

所以我們要遠程訂閱

還記得我們有一個getter嗎？它可不是吃干飯的。只要我們訪問數據的值，就會觸發getter

那我們是不是可以給getter打個電話，讓它幫我們訂閱呢？

getter是個寂寞的老人，時不時的看望它一下，它什么都會答應你

所以我們只要訪問一下數據的值，然后在getter里把訂閱者push進數組里，遠程訂閱就做到了

Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
        array.push(subscriber);
        return value;
    },
    set: function(newValue) {
        console.log("changed");
    }
});

編譯

最后一個問題，DOM元素是如何與數據對應起來的？

它們倆是無法溝通的，需要找個翻譯

把DOM元素里的模板分析一下，找出里面的變量和特定語法，這個過程叫模板編譯

舉個簡單的例子

{{name}}

我們一眼就看出來，胡子模板里的name是一個變量，程序可看不出來，除非你給它一套邏輯，這套邏輯就是編譯器

認出了name，我們才可以到對應數據的數組里添加訂閱

否則，上錯花轎可保不準嫁對郎哦

流程

到這里，整個流程才算跑起來了

首先，劫持所有的數據

然后，編譯模板，找到對應的數據

通過訪問這個數據，觸發getter，在對方的數組里添加一個訂閱位

坐等數據更新，觸發setter，遍歷數組，調用數組里的所有回調

回調里愛干嘛干嘛，不過別忘了我們的初衷：頁面同步更新

有了這一套自動化系統，你只要把數據綁在模板里，接下來頁面就活了

雙向綁定

誒，不是說好了雙向綁定嗎？怎么，是個瘸子呀？

你仔細想一想，把數據與頁面綁定在一起，這是毫無疑問能夠實現的

但是把頁面與數據綁定在一起，這是啥意思呢？

還真有辦法，就是輸入框。頁面能產生數據的地方也只有輸入框了

而且這個綁定也不稀奇，輸入框都有輸入事件，把獲取到的新值賦給數據就好了

這里沒有數據的參與，但也能產生一個反向綁定的假象

雙向綁定就好像說，你看你美國挺強大，但我阿根廷足球也不賴呀，我們結成對等的戰略合作伙伴吧！

所以恕我直言，雙向綁定其實是個噱頭，重要的是訂閱

接口

對了，我們還需要提供一個統一的對外接口

當仁不讓，就叫Biu吧

用一個立即執行函數包裹，再把統一接口掛載到window上，就可以在外部使用了

(function(root) {
    function Biu(options) {
        this.mount = options.mount;
        this.data = options.data;
        this.action = options.action;
    }
    root.Biu = Biu;
})(window);

寫在后面

以上就是BiuJS大體的結構

歡迎到BiuJS倉庫: https://github.com/veedrin/biu了解詳情

更歡迎Star和Fork

云服務器 GPU云服務器 linux全能運行環境 v1.0 云服務器管理系統v1.0 接口說明文檔 webrtc 說明文檔

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92244.html

BiuJS[v1.0]說明文檔(4)：$if 指令

摘要：是一個輕巧的框架它實現了數據的雙向綁定并提供一些基本的指令幫助你提升效率，比如，，，，是的，如你所見，以開頭的指令是它的獨特標識行左右的代碼量，讓應用的開發和加載的一瞬完成倉庫指令往下看之前，請大家沐浴更衣，因為我要講的指令了中的已經被占用 showImg(https://segmentfault.com/img/remote/1460000012478667?w=1920&h=926...

_ang 2019-08-21 18:18 評論0 收藏0
BiuJS[v1.0]說明文檔(3)：文本編譯

摘要：如此循環，直到結束如果循環結束之后，比字符串的長度要小，那說明后面還有文本匹配失敗了。 showImg(https://segmentfault.com/img/remote/1460000012478667?w=1920&h=926); BiuJS BiuJS是一個輕巧的mvvm框架它實現了數據的雙向綁定并提供一些基本的指令幫助你提升效率，比如$for，$model，$if，$cli...

lucas 2019-08-22 11:22 評論0 收藏0
BiuJS[v1.0]說明文檔(2)：數據劫持

摘要：是一個輕巧的框架它實現了數據的雙向綁定并提供一些基本的指令幫助你提升效率，比如，，，，是的，如你所見，以開頭的指令是它的獨特標識行左右的代碼量，讓應用的開發和加載的一瞬完成倉庫訂閱清單前文說到提供了一個強大的接口我們就用它來劫持數據不過在此 showImg(https://segmentfault.com/img/remote/1460000012478667?w=1920&h=926...

Terry_Tai 2019-08-22 11:22 評論0 收藏0
Java對象和Excel轉換工具XXL-EXCEL

摘要：一行代碼完成對象和之間的轉換。說明屬性列名稱四版本更新日志版本，新特性導出支持對象裝換為，并且支持字節數組等多種導出方式導入支持轉換為對象，并且支持文件路徑等多種導入方式版本，新特性字段支持類型。《Java對象和Excel轉換工具XXL-EXCEL》 showImg(https://segmentfault.com/img/remote/1460000012470335);showI...

mj 2019-08-16 10:59 評論0 收藏0
面向對象的分布式爬蟲框架XXL-CRAWLER

摘要：面向對象的分布式爬蟲框架一簡介概述是一個面向對象的分布式爬蟲框架。分布式集群集群方式維護爬蟲爬蟲運行數據，可通過或定制實現。《面向對象的分布式爬蟲框架XXL-CRAWLER》 showImg(https://segmentfault.com/img/remote/1460000011842697);showImg(https://segmentfault.com/img/remote...

anquan 2019-08-15 12:27 評論0 收藏0