方法性能分析器--装饰者模式应用

<!DOCTYPE html>

<html>

<head>

    <title>方法性能分析器</title>

    <meta charset="utf-8">

</head>

<body>

<div id="list-container"></div>

 

<script>

    function $(id){

        return document.getElementById(id);

    }

</script>

<script>

    // ListBuilder class.

    var ListBuilder = function (parent, listLength) {

        this.parent = $(parent);

        this.listLength = listLength;

    };

    ListBuilder.prototype = {

        buildList: function (container) {

            var list = document.createElement('ul');

            list.setAttribute('id', container);

            this.parent.appendChild(list);

            var len = this.listLength;

 

            while (len) {

                var item = document.createElement('li');

                list.appendChild(item);

                --len;

            }

        },

        removeLists: function(id){

            var ele = $(id);

            ele.parentNode.removeChild(ele);

        }

    };

 

    // SimpleProfiler class.

    var SimpleProfiler = function (component) {

        this.component = component;

    };

    SimpleProfiler.prototype = {

        buildList: function () {

            var startTime = (new Date()).getTime();

            this.component.buildList();

            var elapsedTime = (new Date()).getTime() - startTime;

            console.log('buildList:' + elapsedTime + ' ms');

        }

    };

/*

    var list = new ListBuilder('list-container', 5000);

    list = new SimpleProfiler(list);

    list.buildList();

*/

    // 通用化改造

    // MethodProfiler class.

    var MethodProfiler = function (component) {

        this.component = component;

        this.timers = {};

 

        for (var key in this.component) {

            // Ensure that the property is a function

            if (typeof this.component[key] !== 'function') {

                continue;

            }

 

            // Add the method

            var that = this;

            (function (methodName) {

                that[methodName] = function () {

                    that.startTimer(methodName);

                    var returnValue = that.component[methodName].apply(that.component, arguments);

                    that.displayTime(methodName, that.getElapsedTime(methodName));

                    return returnValue;

                };

            })(key);

        }

    };

    MethodProfiler.prototype = {

        startTimer: function (methodName) {

            this.timers[methodName] = (new Date()).getTime();

        },

        getElapsedTime: function (methodName) {

            return (new Date()).getTime() - this.timers[methodName];

        },

        displayTime: function (methodName, time) {

            console.log(methodName + ': ' + time + ' ms');

        }

    };

 

    var list = new ListBuilder('list-container', 5000);

    list = new MethodProfiler(list);

    list.buildList('ol');

    list.buildList('ul');

    list.removeLists('ul');

    list.removeLists('ol');

</script>

</body>

</html>

 

 

 

你可能感兴趣的:(装饰者模式)