JS实现数据双向绑定
博客专区 > marjey 的博客 > 博客详情
JS实现数据双向绑定
marjey 发表于12个月前
JS实现数据双向绑定
  • 发表于 12个月前
  • 阅读 17
  • 收藏 1
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

/**
 * input标签的包装类。
 * */
if (typeof priv == "undefined") {
    var priv = {};
}
if (typeof  priv.lee == "undefined") {
    priv.lee = {};
}
/**
 * input标签的包装对象,可对input对象进行一系列操作。
 * 返回inputbox对象为具体操作对象。
 *
 * */
priv.lee.inputbox = function (boxName, boxNameCode) {
    var inputbox = {};
    inputbox.dataBinding = {value: '', watcher: {}};

    /**
     * 新建一个div,div里面存放input名和输入框。
     * */
    var getInputDiv = function () {
        inputbox.div = $('<div></div>');
        inputbox.text = $('<label>' + boxName + '</label>');
        inputbox.inputBox = $('<input type="text" name="' + boxNameCode + '" />');
        inputbox.div.append(inputbox.text);
        inputbox.div.append(inputbox.inputBox);
    };
    getInputDiv();
    /**
     * input标签change的绑定事件。首先获取change事件。
     * */
    var bindingChangeEvent = function () {
        inputbox.inputBox.change(function () {
            watcher.getNotify(inputbox.getContent());
        })
    };
    bindingChangeEvent();
    /**
     * 获取输入框内的值。
     * */
    inputbox.getContent = function () {
        return inputbox.inputBox.val();
    };
    /**
     *给输入框内赋值。
     * */
    inputbox.setContent = function (value) {
        inputbox.inputBox.val(value);
    };
    /**
     * 刷新输入框,传入什么数据就在输入框显示什么数据。
     * */
    var renovateContent = function (data) {
        inputbox.setContent(data);
    };
    /**
     *获取数据绑定对象。
     * 该对象为每个input标签对象专门用于数据绑定操作的对象。
     * */
    inputbox.getDataBindingObj = function () {
        return inputbox.dataBinding;
    };

    /**
     * 数据绑定对象获取监听器。当有任何操作的时候会通知监听器
     * */
    inputbox.dataBinding.setWatcher = function (watcher) {
        inputbox.dataBinding.watcher = watcher;
    };
    /**
     *外界传入数据给数据绑定的对象。
     * 调用设置值之后,会触发刷新输入框的方法。
     * */
    inputbox.dataBinding.setValue = function (val) {k
        inputbox.dataBinding.value = val;
        renovateContent(val);

    };
    /**
     * 外界获取数据绑定的对象。
     * 首先从输入框中获取值到数据绑定的value属性中保存,然后返回绑定对象的value。
     * */
    inputbox.dataBinding.getValue = function () {
        inputbox.dataBinding.value = inputbox.inputBox.val();
        return inputbox.dataBinding.value;
    };
    /**
     * 数据绑定法神变化的时候
     * */
    /**
     * 将数据绑定的对象dataBinding和input标签中的内容向关联。
     * 在一次操作中,实现标签中的值赋给dataBinding或者将dataBinding中的值传到标签显示。
     * */
    inputbox.dataBinding.bindingContent = function () {

    };
    return inputbox;
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../js/priv.lee.inputbox.js"></script>
    <script src="../js/priv.lee.databinding.js"></script>
</head>
<body>
<script>
    var one = priv.lee.inputbox("第一个", 'one');
    var two = priv.lee.inputbox('第二个', 'two');
    $(document.body).append(one.div);
    $(document.body).append($('<br/>'));
    $(document.body).append(two.div);

    var watcher = priv.lee.databinding();
    var onesBinding = one.getDataBindingObj();
    var twosBinding = two.getDataBindingObj();
    onesBinding.setWatcher(watcher);
    twosBinding.setWatcher(watcher);
    watcher.setFirstBindingData(onesBinding);
    watcher.setSecondBindingData(twosBinding);
</script>
</body>
</html>
/**
 *数据绑定,获取两个数据,绑定之后任意一个数据变化,另一个随之改变。
 * 此时是针对两个数据进行操作。现在暂时做一个绑定两个字符串的对象,输入两个对象的引用,任一个对象都跟随另一个改变。
 * */
if (typeof priv == "undefined") {
    var priv = {};
}
if (typeof  priv.lee == "undefined") {
    priv.lee = {};
}
/**
 * 定义一个监听器,用与监听事件,
 * 这个监听器需要嵌入到待监听的事件、数据或方法中。
 * */
priv.lee.databinding = function () {
    var watcher = {};
    var dataBinding = {FirstParam: {value: ''}, SecondParam: {value: ''}};
    /**
     * 通过其他对象调用监听器的通知方法。刷新dataBinding中的数据。
     * */
    watcher.getNotify = function (value) {
        dataBinding.FirstParam.setValue(value);
        dataBinding.SecondParam.setValue(value);

    };
    /**
     * 获取待绑定的第一个数据引用。
     * */
    watcher.setFirstBindingData = function (value) {
        dataBinding.FirstParam = value;
    };
    /**
     * 获取待绑定的第二个数据引用。
     * */
    watcher.setSecondBindingData = function (value) {
        dataBinding.SecondParam = value;
    };

    /**
     * 刷新绑
     * */
    return watcher;

};
共有 人打赏支持
粉丝 3
博文 139
码字总数 130230
×
marjey
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: