BiuJS[v1.0]說明文檔(1)：總體結(jié)構(gòu)

崔曉明發(fā)布于2019-08-22 11:21 / 3411人閱讀

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

BiuJS

BiuJS是一個輕巧的mvvm框架
它實現(xiàn)了數(shù)據(jù)的雙向綁定
并提供一些基本的指令幫助你提升效率，比如$for，$model，$if，$click，$style
是的，如你所見，以$開頭的指令是它的獨(dú)特標(biāo)識
1000行左右的代碼量，讓應(yīng)用的開發(fā)和加載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樹內(nèi)起作用，并且它只能識別id選擇器

data是BiuJS的數(shù)據(jù)模型，頁面就是通過綁定這里的數(shù)據(jù)實現(xiàn)自動更新的

action是BiuJS的方法集合，借此實現(xiàn)行為邏輯

劫持

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

也就是說，被劫持過的數(shù)據(jù)，如果值發(fā)生了變化，就會觸發(fā)setter

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

假如我們在setter里加個回調(diào)函數(shù)，在回調(diào)函數(shù)中把新值寫進(jìn)DOM里，數(shù)據(jù)變化與頁面變化同步不就實現(xiàn)自動化了么？

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

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

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

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

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

我們把DOM元素與回調(diào)函數(shù)打包在一起，依次扔進(jìn)一個數(shù)組里，當(dāng)數(shù)據(jù)觸發(fā)setter的時候，再用一個函數(shù)遍歷這個數(shù)組，依次調(diào)用回調(diào)函數(shù)，一對多的同步自動化也被我們實現(xiàn)了

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);
    }
}

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

訂閱器

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

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

所以我們要遠(yuǎn)程訂閱

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

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

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

所以我們只要訪問一下數(shù)據(jù)的值，然后在getter里把訂閱者push進(jìn)數(shù)組里，遠(yuǎn)程訂閱就做到了

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

編譯

最后一個問題，DOM元素是如何與數(shù)據(jù)對應(yīng)起來的？

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

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

舉個簡單的例子

{{name}}

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

認(rèn)出了name，我們才可以到對應(yīng)數(shù)據(jù)的數(shù)組里添加訂閱

否則，上錯花轎可保不準(zhǔn)嫁對郎哦

流程

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

首先，劫持所有的數(shù)據(jù)

然后，編譯模板，找到對應(yīng)的數(shù)據(jù)

通過訪問這個數(shù)據(jù)，觸發(fā)getter，在對方的數(shù)組里添加一個訂閱位

坐等數(shù)據(jù)更新，觸發(fā)setter，遍歷數(shù)組，調(diào)用數(shù)組里的所有回調(diào)

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

有了這一套自動化系統(tǒng)，你只要把數(shù)據(jù)綁在模板里，接下來頁面就活了

雙向綁定

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

你仔細(xì)想一想，把數(shù)據(jù)與頁面綁定在一起，這是毫無疑問能夠?qū)崿F(xiàn)的

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

還真有辦法，就是輸入框。頁面能產(chǎn)生數(shù)據(jù)的地方也只有輸入框了

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

這里沒有數(shù)據(jù)的參與，但也能產(chǎn)生一個反向綁定的假象

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

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

接口

對了，我們還需要提供一個統(tǒng)一的對外接口

當(dāng)仁不讓，就叫Biu吧

用一個立即執(zhí)行函數(shù)包裹，再把統(tǒng)一接口掛載到window上，就可以在外部使用了

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

寫在后面

以上就是BiuJS大體的結(jié)構(gòu)

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

更歡迎Star和Fork

GPU云服務(wù)器云服務(wù)器 linux全能運(yùn)行環(huán)境 v1.0 云服務(wù)器管理系統(tǒng)v1.0 接口說明文檔 webrtc 說明文檔

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92244.html

發(fā)表評論

登陸后可評論

0條評論

崔曉明

男|高級講師

我要關(guān)注我要私信

TA的文章

ZJI：香港華為云線路服務(wù)器月減300元,E3服務(wù)器月付450元起

閱讀 2550·2021-09-26 10:18
中秋福利鴨

閱讀 3418·2021-09-22 10:02
前端硬核面試專題之 CSS 55 問

閱讀 3236·2019-08-30 15:44
徹底理清前端單頁面應(yīng)用（SPA）的實現(xiàn)原理【精讀源碼】

閱讀 3362·2019-08-30 15:44
用 :focus-within 實現(xiàn)純 CSS 下拉框組件

閱讀 1864·2019-08-29 15:25
手摸手教你用canvas實現(xiàn)給圖片添加平鋪水印

閱讀 2609·2019-08-26 14:04
關(guān)于跨域以及跨域的實現(xiàn)方式

閱讀 2079·2019-08-26 12:15
一篇文章帶你學(xué)習(xí)js數(shù)據(jù)類型

閱讀 2465·2019-08-26 11:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

BiuJS[v1.0]說明文檔(1)：總體結(jié)構(gòu)

相關(guān)文章

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

BiuJS[v1.0]說明文檔(3)：文本編譯

BiuJS[v1.0]說明文檔(2)：數(shù)據(jù)劫持

Java對象和Excel轉(zhuǎn)換工具XXL-EXCEL

面向?qū)ο蟮姆植际脚老x框架XXL-CRAWLER

發(fā)表評論

0條評論

崔曉明

男|高級講師

TA的文章

ZJI：香港華為云線路服務(wù)器月減300元,E3服務(wù)器月付450元起

中秋福利鴨

前端硬核面試專題之 CSS 55 問

徹底理清前端單頁面應(yīng)用（SPA）的實現(xiàn)原理【精讀源碼】

用 :focus-within 實現(xiàn)純 CSS 下拉框組件

手摸手教你用canvas實現(xiàn)給圖片添加平鋪水印

關(guān)于跨域以及跨域的實現(xiàn)方式

一篇文章帶你學(xué)習(xí)js數(shù)據(jù)類型

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

BiuJS[v1.0]說明文檔(1)：總體結(jié)構(gòu)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！