判断信息是否发生变化决定是否需要保存

最新推荐文章于 2021-03-13 17:09:23 发布

转载最新推荐文章于 2021-03-13 17:09:23 发布 · 269 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008773640

文章标签：

#javascript #ViewUI

本文介绍了一种用于检测网页表单是否发生改变的机制。通过比较新旧表单元素对象集合来判断用户输入是否发生变化，并提供了完整的实现代码。此方法适用于需要监控表单状态的应用场景。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="main">
    <div class="baseInfo">
        <div class="form-item"  data-belong="baseInfo" data-type="input" id="text1">
            <div class="form-item-caption">text1:</div>
            <div class="form-item-control">
                <input type="text" value="text1"/>
            </div>
        </div>
        <div class="form-item"  data-belong="baseInfo" data-type="select" id="select1">
            <div class="form-item-caption">select1:</div>
            <div class="form-item-control">
                <select name="">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
    </div>

    <div class="otherInfo">
        <div class="form-item" data-belong="otherInfo" data-type="input" id="text2">
            <div class="form-item-caption">text2:</div>
            <div class="form-item-control">
                <input type="text" value="text2"/>
            </div>
        </div>
        <div class="form-item" data-belong="otherInfo" data-type="input" id="text3">
            <div class="form-item-caption">text3:</div>
            <div class="form-item-control">
                <input type="text" value="text3"/>
            </div>
        </div>
        <div class="form-item"  data-belong="otherInfo" data-type="select" id="select2">
            <div class="form-item-caption">select2:</div>
            <div class="form-item-control">
                <select name="">
                    <option value="1">1</option>
                    <option value="2" selected>2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>
    </div>
</div>
<button id="submitBtn">提交</button>
<script src="js/jquery.min.js"></script>
<script>
    var globalOldFormItemObjSet =  {
        baseInfo: [],
        otherInfo: []
    };
    $('#submitBtn').click(function(){
        if(!isFormChange(globalOldFormItemObjSet, getFormItemObjList())) {
            alert('没有发生变化');
        } else {
            alert('发生变化了');
        }
        globalOldFormItemObjSet = getFormItemObjList();
    })
    function getFormItemObjList() {
        var formItemObjSet = {
            baseInfo: [],
            otherInfo: []
        };
        var formItemObj = $('.main').find('.form-item');
        formItemObj.each(function(index, item) {
            var formItemObj = getFormItemObj(item);
            var Key = $(item).attr('data-belong');
            formItemObjSet[Key].push(formItemObj);
        });
        return formItemObjSet;
    }
    function getFormItemObj(formItem) {
        var item = $(formItem);
        var control = item.find('.form-item-control');
        var caption = item.find('.form-item-caption');
        var type = item.attr('data-type');
        var id = item.attr('id');
        var text= '';
        switch (type) {
            case 'input':
            {
                text = control.find('input').val().trim();
                break;
            }
            case 'select':
            {
                text = control.find('select').val();
                break;
            }
        }
        return {
            id: id,
            type: type,
            text: text
        };
    }
    function isEqualObj(a,b){
        var aProps = Object.getOwnPropertyNames(a);
        var bProps = Object.getOwnPropertyNames(b);
        if(aProps.length !== bProps.length){
            return false;
        }
        for(var i=0;i<aProps.length;i++){
            if(a[aProps[i]] != b[aProps[i]]) {
                return false;
            }
        }
        return true;
    }
    function isFormChange(oldFormItemObjSet,newFormItemObjSet) {
        var array = Object.keys(newFormItemObjSet);
//        console.log(array); // ["baseInfo", "otherInfo"]
        for(var i=0;i<array.length;i++) {
            var keyArray = array[i];
            var newKeyArray = newFormItemObjSet[keyArray];
            // console.log(newKeyArray); [{},{}]
            for(var j=0;j<newKeyArray.length;j++){
//                console.log(newKeyArray[j]);
               //  console.log(keyArray); // baseInfo
               //  console.log(oldFormItemObjSet[keyArray]) []
                if((oldFormItemObjSet[keyArray].length == 0 && array.length != 0) || (oldFormItemObjSet[keyArray].length != 0 && array.length == 0)) {
                    return true;
                } else {
                    var isSame = isEqualObj(newKeyArray[j], oldFormItemObjSet[keyArray][j]);
                    if (!isSame) {
                       return true;
                    }
                }
            }
        }
        return false;
    }
</script>
</body>
</html>