BiuJS[v1.0]说明文档(1)：总体结构

崔晓明发布于2019-08-22 11:21 / 3366人阅读

摘要：是一个轻巧的框架它实现了数据的双向绑定并提供一些基本的指令帮助你提升效率，比如，，，，是的，如你所见，以开头的指令是它的独特标识行左右的代码量，让应用的开发和加载的一瞬完成仓库启动首先我们来看一下是如何启动的是的挂载点，它决定在多大范围的树

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 说明文档

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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