Постове 1 - 5 от 8 с таг tips

Наскоро се наложи да поработя по един доста стар PHP проект, по който не бях работил от години. И там видях нещо, което ведна опреличих като code smell (Всъщност видях много такива неща, но само на това ще обърна внимание).

$cart = CartManager::getCurrentCart();
$cart->setClientInfo('atype',    $user['account_type']);
$cart->setClientInfo('fname',    $user['fname']);
$cart->setClientInfo('lname',    $user['lname']);
$cart->setClientInfo('street',   $user['street']);
$cart->setClientInfo('postnum',  $user['postcode']);
$cart->setClientInfo('epost',    $user['mail']);
$cart->setClientInfo('city',     $user['city']);
$cart->setClientInfo('company',  $user['company']);
$cart->setClientInfo('orgnum',   $user['orgnum']);
$cart->setClientInfo('phone',    $user['phone']);
$cart->setClientInfo('country',  $user['country']);

Което ако идвате от  Java света може и да ви изглежда нормално, но мен ме дразни.

На първо време направих метода setClientInfo да връща $this зада може да използвам прост method chaining. И кода стана така:

CartManager::getCurrentCart()
    ->setClientInfo('atype',    $user['account_type'])
    ->setClientInfo('fname',    $user['fname'])
    ->setClientInfo('lname',    $user['lname'])
    ->setClientInfo('street',   $user['street'])
    ->setClientInfo('postnum',  $user['postcode'])
    ->setClientInfo('epost',    $user['mail'])
    ->setClientInfo('city',     $user['city'])
    ->setClientInfo('company',  $user['company'])
    ->setClientInfo('orgnum',   $user['orgnum'])
    ->setClientInfo('phone',    $user['phone'])
    ->setClientInfo('country',  $user['country']);

Малко по-добре, но пак ми изглеждаше не естествено. Затова просто добавих възможността да може да се предава масив като аргумент. И така стана доста добре:

CartManager::getCurrentCart()->setClientInfo(array(
    'atype',    => $user['account_type'],
    'fname',    => $user['fname'],
    'lname',    => $user['lname'],
    'street',   => $user['street'],
    'postnum',  => $user['postcode'],
    'epost',    => $user['mail'],
    'city',     => $user['city'],
    'company',  => $user['company'],
    'orgnum',   => $user['orgnum'],
    'phone',    => $user['phone'],
    'country',  => $user['country']
));

За нещастие в този проект, нямаше как да направя кода стане още по-чист, без да се налага пренаписване на голяма част от проекта:

CartManager::getCurrentCart()->setClient($user);

Доста често ми се е налагало да пиша нещо такова

if ($something){
  $a = 1;
  $b = 'a';
} else {
  $a = '2'
  $b = 'c';
}

За което обикновено ми трябват 5-6 и повече реда, което ме дразни. Но вече на 2-3 места ползвам следния синтаксис:

list($a, $b) = $something ? array(1, 'a') : array(2, 'b');

Може и да не е по-бързо и за някои хора да е “леко” не четимо, но аз си го харесвам. От една страна веднага се вижда, че от операцията $a, $b излизат със нови стойности. Две, вижда се кои са тези стойности. Три доста по-кратко и cбито е.

По принцип list e доста подценявана функционалност в php и доста често грешно използвана. Преди много време я използвах за router в моите проекти и се държеше много добре:

list($controller, $action, $id) = explode('/', $url);

Друг доста малко известен факт, е че всъщност list може да се използва и с ArrayAccess обекти. Още малко трикове има тук.

Надявам сe някои да намери това за полезно.

В един от последните ми проекти ми се налагаше да генерирам много html елементи с javascript. Като за това основно използвах new Element() и Element#insert от Prototype. Като въпреки че като цяло двата метода са много изчистени и правят кода доста добре четим, винаги може и по-добре.

В началото написах един прост builder, но като малко го поизползвах тук и там, се оказа , че като код е доста по-малко, но не и като четимост. Затова написах и тези две малки добавки към Element#insert които ми спестиха доста писане и направиха кода още по-четим и добър. И същевременно показаха (за пореден път) няколко от добрите страни на Prototype.

Element.insert(element, { into: content });
Element.insert(element, [content, content, content]);

Element#insert(element, { into: content });

Тук просто добавих нов insert position, into. Общо взето е ясно какво прави той добавя елемента в друг елемент. Защото поне на 20 места имах нещо такова(или много подобно:

var element = new Element('div', {/* атрибут */});
document.body.appendChild(element);

// като с into това просто става
var element = new Element('div', {/* атрибут */}).insert({into: document.body });

За тези, които са запознати как работи точно от вътре Element#insert, няма да е никак трудно да разберат как съм добавил ‘into’. Prototype използва един object, който да съхранява всички insert функции – before, after, top, bottom. Той е
Element._insertionTranslations, и когато бива извикан Element#insert(element, {position: content}) се вика грубо казано Element._insertionTranslations[position](element, content). Заради това добавянето на нов insert метод е много лесно и става просто така:

Element._insertionTranslations.into = function(element, node){
	node.appendChild(element);
};

Внимание! Element._insertionTranslations не е част от Public Api-то на Prototype и затова може да се промени в бъдещи версии!

Страничен ефект

Element#insert(element, { into: content }) има много интересен ефект, за който не се бях сетил когато го писах. Но когато случайно “открих” бях много доволен.
Element#insert може да приема не само html елементи, но и нормални javascript обекти, които имат метод toElement ( тои трябва да връща html елемент). И така примерно имам клас подобен на Custom Select класа ми от ControlDepo 3 Widgets, който има един контейнер, към когото може да се добавят елементи. Чрез into могат да се правят такива неща:

var list = new (Class.create({
	initialize: function(ul){
		this.element = $(ul);
	},
	toElement: function(){
		return this.element;
	}
}))('some');

Тук, за декларацията на класа, ползвам прост номер описан, по-добре тук.

Element.insert(element, [content, content, content]);

Идеята тук е да може да се предава масив от елементи, които да се добавят в element.

var ul = new Element('ul');
ul.insert(li1);
ul.insert(li2);
ul.insert(li3);
// ... и т.н.

// като това понякога го пиша и така
[li1, li2, li3].each(Element.insert.curry(ul));

// с новата версия става просто
ul.insert([li1, li2, li3]);

Такава функционалност може да стане по 2 начина. Първо като пиша директно в кода на Element#insert ( или си направя мой си fork на Prototype). И втория вариянт е Function#wrap.

Колкото и да се изкушавам от първия вариант реших само да пусна един билен ( ticket ) на Prototype и да се надявам да го добавят като функционалност.  И след това си написах каквото ми трябваше чрез Function#wrap:

Element.addMethods({
    insert: Element.insert.wrap(function(insert, element, insertation){
        if (!Object.isArray(insertation)) return insert(element, insertation);

        element = $(element);
        insertation.each(insert.curry(element));
        return element;
    })
});

Тези двете добавки ги има в git.github – http://gist.github.com/164751. Там ще ги актуализирам ако правя промяна.

Ако някой има предложение или идея как може да се доразвият тези добавки или за други подобни, може да драсне някои коментар

В JavaScript във всяка функция има предефинирана променлива arguments. Тя представлява масиво подобна структура съдържаща аргументите подадени към функцията  и callee . В поста ще се постарая да обясня какво точно е callee и как би било полезно.

Само да поясня за думата “масиво подобна структура”, преди да продължа нататък. Това значи, че arguments изглежда като масив. Т.е може да се достъпват  елементи от него с arguments[n] и има свойството length, което оказва броя на елементите. Но до тук свършват прилики му с масива, в повечето браузъри arguments няма нито един метод. Това е една от главните причина в prototype.js да я има $A функцията.

Така, но да се върнем на arguments.callee, какво точно е това? В callee се записва връзка (или референция, ако това звучи по-добре) към текущата функция, т.е. функция в която е arguments. Това може да се илюстрира със следния пример:

function foo(){
    console.log(arguments.callee == foo);
}

foo(); // true

Защо толкова често foo се ползва в примери, някои знае ли ? Даже страница в wikipedia има – foobar.

Два прости примера

// пример едно:
// функция която брои колко колко пъти е била викана.
function example1(){
    console.log(++arguments.callee.count);
}

example1.count = 0;
example1(); // 1
example1(); // 2
// и така на татък

// пример две:
// функция, която проверява дали броя на подадените аргументи е толкова колкото се очакват
function example2(a, b){
    if (arguments.length == arguments.callee.length){
        // тук може и throw "error" да се хвърли, но за примера и това върши работа
        console.log(
            'expected ' + arguments.callee.length + ' argument(s) given ' + arguments.length
        );
    }
}

example2();          // грешка
example2(1);         // грешка
example2(1, 2);      // работи
example2(1, 2 , 3);  // грешка</pre>

Във втория пример използвам Functon.length, който указва колко аргумента очаква дадената функция.

Два полезни примера

Като цяло с argument.callee може да се правят доста магии. В практиката повечето случаи, в които съм го ползвал е, когато съм имал анонимна функция и искам да направя нещо със самата функция и ми трябва връзка към нея.

Пример1: Имате event  handler при click и искате след първото натискане този handler да се махне.
В допълнение може да се направи при click event handler-ът да се предава от елемент на елемент, но това няма да го пиша, за да не натоварвам примера (ако някои иска може да го напиша допълнително).

// предполагам, че се ползва prototype.js
$('element').observe('click', function(){
    alert('this will be shown only one time');

    this.stopObserving('click', arguments.callee);
});

Пример2: прост ефект – увеличаване на размерите на квадрат. Използва анонимна функция която се само извиква с timeout, докато div-а не достигне максималния си размер. В повечето случаи interval би вършил работа, но принципа е важен в случая.

// тук създавам примерен div
var element = new Element('div').setStyle({
    width: '10px',
    height: '10px',
    backgroundColor: 'red'
});

document.body.appendChild(element);

var step = 10, max = 1000, time = 10;

(function(){
    var width = parseInt(element.style.width) + step,
        height = parseInt(element.style.height) + step;

    element.style.width = width + 'px';
    element.style.height = height + 'px';

    if (max > width && max > height){
        setTimeout(arguments.callee, time);
    }
})();

Малко допълнителна информация за arguments

Оказва се, че някои браузъри дефинират arguments само, когато е необходимо. Т.е. ако в тялото на фунцията не се използва никъде arguments, тя въобще не се дефинира.  Което спестява време и ускорява самия кода.  Тук има повече информация по този въпрос. Този факт е интересен и си мисля, че повече javascript интерпретатори ще използват подобен похват в бъдеще.

Доста често напоследък ми се налага да правя динамични страници изцяло задвижвани от javascript, като при тях постоянно се добавят и махат dom елементи. Което значи непрекъснато да се добавят и махат event хандлъри, което е меко казано досадно и води до много грешки. Но с вградените в CD3.Behaviors event delegation функции (за тях специално ще има поне един цял пост) тази работа е много лесна, просто делегирам всички действия към елементи които няма да се променят.

До тук всичко звучи много добре, но както винаги IE се появява на сцената с бъг, който е, че submit действието няма bubbling (т.е. не се делегира към родителските елементи на формата). Което е в пълен разрез със спецификация, но какво да се прави свикнали сме.

Този проблем го знам от много време и винаги го заобикалях по един или друг начин. Но наскоро на колега му трябваше бързо решение, което да може да ползва на 2 – 3 места затова за няколко минути написах това за Prototype.js:

Element.addMethods({
    delegateSubmit: function(element, callback){
        return $(element)
            .observe('click', function(e){
                if (e.findElement('form') && e.findElement('input[type=submit],input[type=image]'))
                    callback.call(this, e);
            })
            .observe('keyup', function(e){
                if (e.keyCode  == Event.KEY_RETURN && e.findElement('input') && e.findElement('form'))
                    callback.call(this, e);
            })
        }
});

Като цяло това, което прави тази функция е, че наблюдава за натискане на submit или image бутони или за натискане на enter върху някои input. Лошото в случая е, че страдат и нормалните браузъри като Firefox или Safari.

Затова направих нова версия, която засича дали submit се делегира (за начина, по който разбирам пише по-подробно в тази статия – Detecting event support without browser sniffing)

Element.addMethods({
    delegateSubmit: (function(){
        var el = document.createElement('div'), isSupported = 'onsubmit' in el;

        if (!isSupported){
            el.setAttribute('onsubmit', 'return;');
            isSupported = typeof el.onsubmit == 'function';
        }

        return isSupported ? function(element, callback){
            return Event.observe(element, 'submit', callback);
        } : function(element, callback){
            return $(element)
                .observe('click', function(e){
                    if (e.findElement('form') && e.findElement('input[type=submit],input[type=image]'))
                        callback.call(this, e);
                })
                .observe('keyup', function(e){
                    if (e.keyCode  == Event.KEY_RETURN && e.findElement('input') && e.findElement('form'))
                        callback.call(this, e);
                    })
        };
    })()
});

Това е доста по-добро решение което оправя проблема със submit само, когато има такъв проблем.

Тук бих могъл примерно да използвам Function.wrap върху Event.observe, но нещо не съм фен такива monkey patching неща. А и по-скоро това и хака за делегиране на focus/blur под IE ще са част от моята Event.delegate, която ако имам късмет ще е част от Prototype.js.

Ако някой има по-елегантно решение, няма да му се разсърдя ако го сподели.