‘Чистый’ JavaScript: «Продолжение»

Иногда человечество поражает своей тупостью и нежеланием видеть ситуацию так, как она действительно есть… ( Неизвестные )

Возможно, данный эпиграф имеет ко мне большее отношение, чем я думаю, но хочется надеяться на лучшее…

Мой первый пост ^[1] получился, мягко говоря, не очень, но у любого человека должна быть возможность все исправить и сейчас я попробую этим воспользоваться.

Расскажу небольшую историю, которая случилась со мной на работе. Дело было давно, как-то приасанили меня к новому web-проекту, проектированием которого я не имел ни малейшего отношения. Тимлид первым делом залил в svn php и js framework'и.
В качестве JS был выбран Mootools 1.2.2 или 1.2.4, а в дополнение к нему Jx UI Library в виде JxLib. Все шло хорошо, проект подходил к своему завершению, версии браузеров росли и тд. И вот, в один прекрасный момент, придя на работу я увидел баг, в кором говорилось а том что в IE9 (а он только-только вышел) админка не работает вообще. Первым делам начал искать проблему, как оказалось Mootools 1.2.x — не поддерживает IE9, а вот в версиях over 1.3.x — все работает и летает. Ну, долго не думая, качаем последнюю версию сего чуда и ставим. Радоватся пришлось не долго — начали вылазить баги в JxLib. Оказывается, что проект 'заглох', и последняя доступная версия совместима только с Mootools 1.2.x. Много времени прошло с того момента, но тот говнокод, с помощью которого пришлось залатать этот баг, надломал мою веру в Mootools и ему подобные вещи. Теперь, я думаю, стало ясно, откуда такое отношение к JS либам.

А теперь хочется ответить (пояснить почему так, а не иначе) на некоторые комментарии.

1)
Сonsole.log — вот этого я не ожидал, я предлогал многое но только не это. Я в курсе того что он (console.log) поддерживает форматирование и передачу нескольких параметров, но я не могу вспомнить, когда последний раз я этим пользовался. Мне вполне хватает одной переменной, а усложнять _d() ради того чтобы использовать всю мощь сonsole.log раз в месяц, — нецелесообразно (проще написать заветные 11 символов `сonsole.log`).

2)

Функция addEvent продолжит выполняться после обработки ошибки с помощью функции _d.

— я в курсе этого, это сделано специально, ибо проверку на существование DOM объекта, а предпочитаю делать в основном скрипте, но вы меня меня убедили — добавлю return false.

3)

Загрязнение глобального пространства переменных — очень плохой тон.

— тут вы правы, но кроме readyList = []; я ничего не могу найти глобального :)

Ну что ж, я думаю пора заканчивать эти холивары и начать рассмотрение новой партии JS кода.

    // Учитывая какие гуру сидят на хабре - первые 3 функции (тем более что их названия сами за себя говорят) я оставлю без комментариев
    /**
     * Function insert DOM element before some element
     *
     * @version 2012-11-06
     * @param   Object  new_element
     * @param   Object  targetElement
     * @return  void
     */
    function insertBefore(new_element, targetElement)
    {
        targetElement.parentNode.insertBefore(new_element, targetElement);
    }


    /**
     * Function insert DOM element after some element
     *
     * @version 2012-11-06
     * @param   Object  new_element
     * @param   Object  targetElement
     * @return  void
     */
    function insertAfter(new_element, targetElement)
    {
        var parent = targetElement.parentNode;

        //if the parents lastchild is the targetElement...
        if(parent.lastchild == targetElement)
            parent.appendChild(new_element);
        else
            parent.insertBefore(new_element, targetElement.nextSibling);
    }


    /**
     * Function make clone of income object
     *
     * @version 2012-11-07
     * @param   Object  obj
     * @return  Object
     */
    function clone(obj)
    {
        if(obj == null || typeof(obj) != 'object')
            return obj;

        var temp = {};
        for(var key in obj)
            temp[key] = clone(obj[key]);

        return temp;
    }


    // Функция вернет следующий DOM объект в узле, если такой существует
    /**
     * Function return next element in dom object
     *
     * @version 2013-01-08
     * @param   Object  obj
     * @return  Object
     */
    function getNext(obj)
    {
        obj = obj.nextSibling;

        if(!obj)
            return false;

        while(obj.nodeType != 1){
            obj = obj.nextSibling;

            if(!obj)
                return false;
        }

        return obj;
    }


    // Функция вернет предыдущий DOM объект в узле, если такой существует
    /**
     * Function return previous element in dom object
     *
     * @version 2013-02-13
     * @param   Object  obj
     * @return  Object
     */
    function getPrevious(obj)
    {
        obj = obj.previousSibling;

        if(!obj)
            return false;

        while(obj.nodeType != 1){
            obj = obj.previousSibling;

            if(!obj)
                return false;
        }

        return obj;
    }



    // Следующие 2 функции - это установка и чтение Cookies. C ними, я думаю, проблем не будет
    /**
     * Function new Cookies
     *
     * @version 2013-03-26
     * @param   string name
     * @param   string value
     * @param   string expires
     * @param   string path
     * @return  void
     */
    function setCookies(name, value, expires, path)
    {
        if(!name || !value)
            return 0;

        if(!expires){
            expires =  new Date();
            expires.setTime(expires.getTime() + (1000 * 86400 * 365)); //save 1 year
        }

        if(!path)
            path = '/';

        // set Cookies
        document.cookie = name+'='+escape(value)+'; expires='+expires.toGMTString()+'; path='+path;
    }


    /**
     * Function return Cookies value by name
     *
     * @version 2013-03-26
     * @param   string name
     * @return  void
     */
    function getCookies(name)
    {
        var results = document.cookie.match ( '(^|;) ?' + name + '=([^;]*)(;|$)' );

        if ( results )
            return ( unescape ( results[2] ) );
        else
            return null;
    }




    // А вот здесь придется задержатся
    // Вначале создаем функцию Ajax(params), а потом прикручиваем к ней prototype
    /**
     * Ajax object
     *
     * Send request by post/get to some url
     *
     * @version 2013-02-13
     * @param   Object  params
     * @return  Object
     */
    window.Ajax = function(params)
    {
        // параметры по умолчанию
        this.options = {
            // default url
            url: '',

            // default method
            method: 'get',

            // Is synchronous request?
            async: true,

            // in seconds 
            timeout: 10000,

            // callback function, in default - empty function
            onComplete: function(){}
        };

        // set config params
        this.setConfig(params);

        // создаем и подготавливаем кроссбраузерный XMLHttpRequest для дальнейшей работы
        // initialize
        this.init(params);
    };

    /**
     * Pablic methods
     */
    window.Ajax.prototype = {

        /**
         * some internal params
         */
        xml_http_request: null,
        timeout: null,
        // json|xml|text
        response:'json',

        // устанавливаем параметры ajax запроса, если таковы были переданы
        /**
         * configure functionality
         */
        setConfig: function(opt)
        {
            // set url
            if(opt.url != undefined)
                this.options.url = opt.url;

            // set method
            if(opt.method != undefined)
                this.options.method = opt.method;

            // set asynchronus param
            if(opt.async != undefined)
                this.options.async = opt.async;

            // set timeout
            if(opt.timeout != undefined)
                this.options.timeout = opt.timeout;

            // set callback functions
            if((opt.onComplete != undefined) && (typeof(opt.onComplete) == 'function'))
                this.options.onComplete = opt.onComplete;
        },

        /**
         * Initialize XMLHTTPRequest
         */
        init: function()
        {
            // кроссбраузерное создание XMLHttpRequest
            // Cross-browser compatibility for browsers
            if (typeof XMLHttpRequest != 'undefined') {
                this.xml_http_request = new XMLHttpRequest();
            }
            else{
                try {
                    this.xml_http_request = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        this.xml_http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (E) {
                        alert('Your brouser don't support Ajax technology. Please download real browser :)');
                    }
                }
            }

            var self_ = this;

            // устанавливаем метод (post/get), url, синхронный/несинхронный запрос
            // open XMLHttpRequest
            this.xml_http_request.open(self_.options.method, self_.options.url, self_.options.async);


            /** Вешаем callback в случае успешного
             *
             *   Список состояний readyState такой: 
             *   0 - Unitialized
             *   1 - Loading
             *   2 - Loaded
             *   3 - Interactive
             *   4 - Complete
             *   Состояния 0-2 вообще не используются.
             *
             * self_.xml_http_request.status - код ответа сервера (200, 404 и тд)
             */
            // set callback function for XMLHttpRequest
            this.xml_http_request.onreadystatechange = function(){
                if((self_.xml_http_request.readyState == 4) && (self_.xml_http_request.status > 0)){


                    // отмена принудительного разрыва Ajax запроса (ниже будут пояснения)
                    // delete timeout
                    clearTimeout(self_.timeout);

                    // в завивимости от того, что вы ожидаете формируем ответ сервера
                    // JSON.parse - встроеный парсер JSON  (старые браузеры - bye-bye)
                    if(self_.response == 'json')
                        var response = JSON.parse(self_.xml_http_request.responseText);
                    else{
                        if(self_.response == 'xml')
                            var response = self_.xml_http_request.responseXML;
                        else
                            var response = self_.xml_http_request.responseText;
                    }
                    // вызываем обработчик результатов
                    self_.options.onComplete(response);
                }
            }
        },


        // Данный метод нужен в очень специфических задачах, когда необходимо играться с заголовками для сервера
        /**
         * Set some headers if need
         */
        setRequestHeader: function(name, value)
        {
            this.xml_http_request.setRequestHeader(name, value);
        },


        // Отсылаем Ajax на сервер
        /**
         * Send request
         */
        send: function(params)
        {
            this.xml_http_request.send(params);

            var self_ = this;

            // про это я говорил ранее, если вас запрос повис или на серваке проблемы - обрываем его принудительно
            // по умолчанию - 10 секунд ждем, хотя можно и больше
            // set timeout need for abort request
            this.timeout = setTimeout( function(){ self_.xml_http_request.abort(); }, this.options.timeout);
        },


        // Данная фишка для того, что бы вы могли в любое время прервать запрос, например при живом поиске (как у хабра или гугла :) )
        /**
         * Abort request
         */
        abort: function()
        {
            this.xml_http_request.abort();
        }
    }



    Пример использования Ajax():

    new Ajax({
        url: '/index.php',
        timeout: 20000,
        method: 'post',
        onComplete: function(data){ alert(data);}
    }).send('qwerty=123');

PS. Как и обещал, исходники ^[2]. Статья написана для того, что бы люди не забывали истинный JavaScript и переходила на светлую сторону силы (печеньки тут тоже имеются :) ).

Автор: mamchyts

Источник ^[3]