YII 的SPA 写法

'use strict';

var findToolbar = function () {
            return document.querySelector('#yii-debug-toolbar');
        },
        ajax = function (url, settings) {
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
            settings = settings || {};
            xhr.open(settings.method || 'GET', url, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.setRequestHeader('Accept', 'text/html');
            xhr.onreadystatechange = function (state) {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200 && settings.success) {
                        settings.success(xhr);
                    } else if (xhr.status != 200 && settings.error) {
                        settings.error(xhr);
                    }
                }
            };
            xhr.send(settings.data || '');
        },
        url,
        div,
        toolbarEl = findToolbar(),
        toolbarAnimatingClass = 'yii-debug-toolbar_animating',
        barSelector = '.yii-debug-toolbar__bar',
        viewSelector = '.yii-debug-toolbar__view',
        blockSelector = '.yii-debug-toolbar__block',
        toggleSelector = '.yii-debug-toolbar__toggle',
        externalSelector = '.yii-debug-toolbar__external',

        CACHE_KEY = 'yii-debug-toolbar',
        ACTIVE_STATE = 'active',

        animationTime = 300,

        activeClass = 'yii-debug-toolbar_active',
        iframeActiveClass = 'yii-debug-toolbar_iframe_active',
        iframeAnimatingClass = 'yii-debug-toolbar_iframe_animating',
        titleClass = 'yii-debug-toolbar__title',
        blockClass = 'yii-debug-toolbar__block',
        blockActiveClass = 'yii-debug-toolbar__block_active',
        requestStack = [];

if (toolbarEl) {
    url = toolbarEl.getAttribute('data-url');

    ajax(url, {
        success: function (xhr) {
            div = document.createElement('div');
            div.innerHTML = xhr.responseText;

            toolbarEl.parentNode && toolbarEl.parentNode.replaceChild(div, toolbarEl);

            showToolbar(findToolbar());
        },
        error: function (xhr) {
            toolbarEl.innerText = xhr.responseText;
        }
    });
}

function showToolbar(toolbarEl) {
    var barEl = toolbarEl.querySelector(barSelector),
            viewEl = toolbarEl.querySelector(viewSelector),
            toggleEl = toolbarEl.querySelector(toggleSelector),
            externalEl = toolbarEl.querySelector(externalSelector),
            blockEls = barEl.querySelectorAll(blockSelector),
            iframeEl = viewEl.querySelector('iframe'),
            iframeHeight = function () {
                return (window.innerHeight * 0.7) + 'px';
            },
            isIframeActive = function () {
                return toolbarEl.classList.contains(iframeActiveClass);
            },
            showIframe = function (href) {
                toolbarEl.classList.add(iframeAnimatingClass);
                toolbarEl.classList.add(iframeActiveClass);

                iframeEl.src = externalEl.href = href;
                viewEl.style.height = iframeHeight();
                setTimeout(function () {
                    toolbarEl.classList.remove(iframeAnimatingClass);
                }, animationTime);
            },
            hideIframe = function () {
                toolbarEl.classList.add(iframeAnimatingClass);
                toolbarEl.classList.remove(iframeActiveClass);
                removeActiveBlocksCls();

                externalEl.href = '#';
                viewEl.style.height = '';
                setTimeout(function () {
                    toolbarEl.classList.remove(iframeAnimatingClass);
                }, animationTime);
            },
            removeActiveBlocksCls = function () {
                [].forEach.call(blockEls, function (el) {
                    el.classList.remove(blockActiveClass);
                });
            },
            toggleToolbarClass = function (className) {
                toolbarEl.classList.add(toolbarAnimatingClass);
                if (toolbarEl.classList.contains(className)) {
                    toolbarEl.classList.remove(className);
                } else {
                    toolbarEl.classList.add(className);
                }
                setTimeout(function () {
                    toolbarEl.classList.remove(toolbarAnimatingClass);
                }, animationTime);
            },
            toggleStorageState = function (key, value) {
                if (window.localStorage) {
                    var item = localStorage.getItem(key);

                    if (item) {
                        localStorage.removeItem(key);
                    } else {
                        localStorage.setItem(key, value);
                    }
                }
            },
            restoreStorageState = function (key) {
                if (window.localStorage) {
                    return localStorage.getItem(key);
                }
            },
            togglePosition = function () {
                if (isIframeActive()) {
                    hideIframe();
                } else {
                    toggleToolbarClass(activeClass);
                    toggleStorageState(CACHE_KEY, ACTIVE_STATE);
                }
            };

    if (restoreStorageState(CACHE_KEY) === ACTIVE_STATE) {
        toolbarEl.classList.add(activeClass);
    }

    toolbarEl.style.display = 'block';

    window.onresize = function () {
        if (toolbarEl.classList.contains(iframeActiveClass)) {
            viewEl.style.height = iframeHeight();
        }
    };

    barEl.onclick = function (e) {
        var target = e.target,
                block = findAncestor(target, blockClass);

        if (block && !block.classList.contains(titleClass)
                && e.which !== 2 && !e.ctrlKey // not mouse wheel and not ctrl+click
        ) {
            while (target !== this) {
                if (target.href) {
                    removeActiveBlocksCls();
                    block.classList.add(blockActiveClass);
                    showIframe(target.href);
                }
                target = target.parentNode;
            }

            e.preventDefault();
        }
    };

    toggleEl.onclick = togglePosition;
}

function findAncestor(el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

function renderAjaxRequests() {
    var requestCounter = document.getElementsByClassName('yii-debug-toolbar__ajax_counter');
    if (!requestCounter.length) {
        return;
    }
    var ajaxToolbarPanel = document.querySelector('.yii-debug-toolbar__ajax');
    var tbodies = document.getElementsByClassName('yii-debug-toolbar__ajax_requests');
    var state = 'ok';
    if (tbodies.length) {
        var tbody = tbodies[0];
        var rows = document.createDocumentFragment();
        if (requestStack.length) {
            var firstItem = requestStack.length > 20 ? requestStack.length - 20 : 0;
            for (var i = firstItem; i < requestStack.length; i++) {
                var request = requestStack[i];
                var row = document.createElement('tr');
                rows.appendChild(row);

                var methodCell = document.createElement('td');
                methodCell.innerHTML = request.method;
                row.appendChild(methodCell);

                var statusCodeCell = document.createElement('td');
                var statusCode = document.createElement('span');
                if (request.statusCode < 300) {
                    statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_success');
                } else if (request.statusCode < 400) {
                    statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_warning');
                } else {
                    statusCode.setAttribute('class', 'yii-debug-toolbar__ajax_request_status yii-debug-toolbar__label_error');
                }
                statusCode.textContent = request.statusCode || '-';
                statusCodeCell.appendChild(statusCode);
                row.appendChild(statusCodeCell);

                var pathCell = document.createElement('td');
                pathCell.className = 'yii-debug-toolbar__ajax_request_url';
                pathCell.innerHTML = request.url;
                pathCell.setAttribute('title', request.url);
                row.appendChild(pathCell);

                var durationCell = document.createElement('td');
                durationCell.className = 'yii-debug-toolbar__ajax_request_duration';
                if (request.duration) {
                    durationCell.innerText = request.duration + " ms";
                } else {
                    durationCell.innerText = '-';
                }
                row.appendChild(durationCell);
                row.appendChild(document.createTextNode(' '));

                var profilerCell = document.createElement('td');
                if (request.profilerUrl) {
                    var profilerLink = document.createElement('a');
                    profilerLink.setAttribute('href', request.profilerUrl);
                    profilerLink.innerText = request.profile;
                    profilerCell.appendChild(profilerLink);
                } else {
                    profilerCell.innerText = 'n/a';
                }
                row.appendChild(profilerCell);

                if (request.error) {
                    if (state !== "loading" && i > requestStack.length - 4) {
                        state = 'error';
                    }
                } else if (request.loading) {
                    state = 'loading'
                }
                row.className = 'yii-debug-toolbar__ajax_request';
            }
            while (tbody.firstChild) {
                tbody.removeChild(tbody.firstChild);
            }
            tbody.appendChild(rows);
        }
        ajaxToolbarPanel.style.display = 'block';
    }
    requestCounter[0].innerText = requestStack.length;
    var className = 'yii-debug-toolbar__label yii-debug-toolbar__ajax_counter';
    if (state === 'ok') {
        className += ' yii-debug-toolbar__label_success';
    } else if (state === 'error') {
        className += ' yii-debug-toolbar__label_error';
    }
    requestCounter[0].className = className;
};

var proxied = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
    var self = this;
    /* prevent logging AJAX calls to static and inline files, like templates */
    if (url.substr(0, 1) === '/' && !url.match(new RegExp("{{ excluded_ajax_paths }}"))) {
        var stackElement = {
            loading: true,
            error: false,
            url: url,
            method: method,
            start: new Date()
        };
        requestStack.push(stackElement);
        this.addEventListener("readystatechange", function () {
            if (self.readyState == 4) {
                stackElement.duration = self.getResponseHeader("X-Debug-Duration") || new Date() - stackElement.start;
                stackElement.loading = false;
                stackElement.statusCode = self.status;
                stackElement.error = self.status < 200 || self.status >= 400;
                stackElement.profile = self.getResponseHeader("X-Debug-Tag");
                stackElement.profilerUrl = self.getResponseHeader("X-Debug-Link");
                renderAjaxRequests();
            }
        }, false);
        renderAjaxRequests();
    }
    proxied.apply(this, Array.prototype.slice.call(arguments));
};

// catch fetch AJAX requests
if (window.fetch) {
    var originalFetch = window.fetch;

    window.fetch = function (input, init) {
        var method;
        var url;
        if (typeof input === "string") {
            method = (init && init.method) || 'GET';
            url = input;
        } else if (window.Request && input instanceof Request) {
            method = input.method;
            url = input.url;
        }
        var promise = originalFetch(input, init);

        /* prevent logging AJAX calls to static and inline files, like templates */
        if (url.substr(0, 1) === '/' && !url.match(new RegExp("{{ excluded_ajax_paths }}"))) {
            var stackElement = {
                loading: true,
                error: false,
                url: url,
                method: method,
                start: new Date()
            };
            requestStack.push(stackElement);
            promise.then(function (response) {
                stackElement.duration = response.headers.get("X-Debug-Duration") || new Date() - stackElement.start;
                stackElement.loading = false;
                stackElement.statusCode = response.status;
                stackElement.error = response.status < 200 || response.status >= 400;
                stackElement.profile = response.headers.get("X-Debug-Tag");
                stackElement.profilerUrl = response.headers.get("X-Debug-Link");
                renderAjaxRequests();

                return response;
            }).catch(function (error) {
                stackElement.loading = false;
                stackElement.error = true;
                renderAjaxRequests();

                throw error;
            });
            renderAjaxRequests();
        }

        return promise;
    };
}