Question

在尝试了解有关JavaScript模式的更多信息时，我创建了以下2＆＃34; Meters＆＃34;根据我发现的一个例子。 Meter1是否更好，因为它使用了Observable Property（或者我认为）模式？由于所有可用的框架，这种模式是否会被真实世界使用？

//Meter1 - Observable Property Pattern
var Meter1 = function (count) {
    var countChanging = [],
        countChanged = [];

    this.count = function (val) {
        if (val !== undefined && val !== count) {
            for (var i = 0; i < countChanging.length; i++) {
                if (!countChanging[i](this, val)) {
                    return count;
                }
            }
            count = val;
            for (var i = 0; i < countChanged.length; i++) {
                countChanged[i](this);
            }
        }
        return count;
    };

    this.increment = function () {
        return count = count + 1;
    }

    this.onCountChanging = function (callback) {
        countChanging.push(callback);
    };

    this.onCountChanged = function (callback) {
        countChanged.push(callback);
    };
};

var meter = new Meter1(5);
var btnClick = document.getElementById('btnClick');

btnClick.addEventListener('click', function () {    
    meter.count(meter.count() + 1);
}, false);

meter.onCountChanging(function (b, count) {
    if (count > 10) {
        document.getElementById('numClicks').innerHTML = "Enough already!!!!!";
        return false;
    }
    return true;
});

meter.onCountChanged(function () {
    document.getElementById('numClicks').innerHTML = "Test " + meter.count();
});


//Meter2 - Does the same thing, is Observable Property pattern better?
var Meter2 = function (count) {
    this.count = 0;
};

var meter2 = new Meter2(5);
var btnClick2 = document.getElementById('btnClick2');

btnClick2.addEventListener('click', function () {    
    meter2.count = meter2.count + 1;
    if (meter2.count > 10) {
        document.getElementById('numClicks2').innerHTML = "Enough already!!!!!";
    } else {
        document.getElementById('numClicks2').innerHTML = "Test " + meter2.count;
    }
}, false);


<body>

<div id="numClicks">Test</div>
<div id="numClicks2">Test</div>

<button id="btnClick">Click - Meter</button>
<button id="btnClick2">Click - Meter 2</button>

</body>
</html>
<script src="../js/generalTesting.js"></script>

JavaScript Observable Property

0 个答案: