angularjs的双向绑定原理实现

angularjs的双向绑定用js代码来实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>双向绑定的js实现</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
    <input type="text" id="txt1" />

    <input type="text" id="txt2" />



    <script type="text/javascript">
        window.onload = function () {
            let a = '';
            let oTxt = document.getElementById('txt1');
            let oTxt2 = document.getElementById("txt2");


            function $interval(fn, time) {
                setInterval(function () {
                    fn();
                    apply();
                }, time
                );
            }

            function $http(url, success, error) {
                $.ajax({
                    url,
                    dataType: 'json',
                    success(result) {
                        success(result);
                        apply();
                    },
                    error
                });

            }

            //数据->input

            function apply() {
                oTxt.value = a;
                oTxt2.value = a;
            }

            //$interval(function () {
            //    a +='|';
            //}, 100);



            //$.ajax({
            //    url: 'Data/1.txt',
            //    dataType: 'json',
            //    success(res) {
            //        a = res;
            //        apply();

            //    },
            //    error() {
            //        alert("错了");
            //    }
            //});


            //$http('Data/1.txt', function (arr) {
            //    a = arr;
            //}, function () {
            //    alert('错了');
            //});



            //setInterval(function () {
            //    a += '|';
            //    apply();
            //}, 100);




            //input->数据

            oTxt.oninput = function () {
                a = this.value;
                apply();
            }

            oTxt2.oninput = function () {
                a = this.value;
                apply();
            }
            setInterval(function () {
                console.log(a);
            }, 100);
        }
    </script>

</body>
</html>

升级版的(封装了一下)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjs的双向绑定实现</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

    <input type="text" ng-model="a" />
    <input type="text" ng-model="a" />

    <select ng-model="a">

        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>

    </select>

    <br />
    <br />
    <br />
    <br />   <br />
    <br />   <br />
    <br />


    <input type="text" ng-model="b" />


    <select ng-model="b">

        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>

    </select>

    <script type="text/javascript">
        window.onload = function () {
            let $scope = {};
            let aEle = document.getElementsByTagName('*');


            //数据->input
            function apply() {
                Array.from(aEle).forEach(ele => {
                    let model = ele.getAttribute('ng-model');
                    if (model) {
                        if ($scope[model]) {
                            ele.value = $scope[model];
                        }
                        else {
                            ele.value = '';
                        }
                    }
                });
            }


            //input->数据

            Array.from(aEle).forEach(ele => {
                let model = ele.getAttribute('ng-model');
                if (model) {
                    ele.oninput = function () {
                        $scope[model] = this.value;
                        apply();
                    }
                }
            });

        }

    </script>
</body>
</html>

angularjs的双向绑定原理实现

猜你喜欢