Užitečné funkce v js – bez frameworků a nadstaveb

7. 8. 2011 14:10:58

Zdravím všechny,

pár let se věnuji programování v javascriptu a chtěl bych zde uvést užitečné funkce a tipy, které u některých jistě najdou uplatnění a pomohou při programování v tomto jazyce. Vím že spousta funkcí je již navržená a připravená k použití v mnoha a mnoha nadstavbách jako jQuery atd., ale ne pokaždé se tyto knihovny vyplatí použít...Tímto směrem bych ovšem diskuzi nechtěl rozvíjet. Pojďme tedy k věci:

- v knížce javascript programujeme profesionálně je uveden jeden velmi užitečný objekt EventUtil, uplatnění - práce s událostmi.

var EventUtil = {

addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element = handler;
        }
    },
    
    getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
            return event.button;
        } else {
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4: return 1;
            }
        }
    },
    
    getCharCode: function(event){
        if (typeof event.charCode == "number" && event.charCode != 0){
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    
    getClipboardText: function(event){
        var clipboardData =  (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    
    getEvent: function(event){
        return event ? event : window.event;
    },
    
    getRelatedTarget: function(event){
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
    
    },
    
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    
    getWheelDelta: function(event){
        if (event.wheelDelta){
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    
    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element = null;
        }
    },
    
    setClipboardText: function(event, value){
        if (event.clipboardData){
            event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            window.clipboardData.setData("text", value);
        }
    },
    
    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

};

moje výtvory:

- funckce getParentWithClass - použití při hledání nadřazeného prvku s určitou třídou, hodí se v mnoha případech

- trimovací funkce

- funkce pro zjištění absolutní pozice objektu

- obdoba funkce v php inArray

- funkce na bindování dat do kontextu objektu

- pozice myši napříč prohlížeči

- serializace formulářových dat - např. pro posílání přes ajax - z knihy Javascript Programujeme profesionálně

function serialize(form){
   var parts = new Array();
   var field = null;

for (var i=0, len=form.elements.length; i < len; i++){
      field = form.elements<span style="font-style:italic;">;

switch(field.type){
         case "select-one":
         case "select-multiple":
            for (var j=0, optLen = field.options.length; j < optLen; j++){
               var option = field.options;
               if (option.selected){
                  var optValue = "";
                  if (option.hasAttribute){
                     optValue = (option.hasAttribute("value") ? option.value : option.text);
                  } else {
                     optValue = (option.attributes.specified ? option.value : option.text);
                  }
                  parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
               }
            }
            break;

case undefined:     // fieldset
         case "file":        // vstup ze souboru
         case "submit":      // odesílací tlačítko
         case "reset":       // resetovací tlačítko
         case "button":      // vlastní tlačítko
            break;

case "radio":       // přepínač
         case "checkbox":    // zaškrtávací pole
            if (!field.checked){
               break;
            }
         /* projde dále */

default:
            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
      }
   }
   return parts.join("&");
}

- odkaz na diskuzi o stavění js objektů :

http://webtrh.cz/138942-navrhovy-vzor

Doufám, že uvedené funkce najdou uplatnění ať už u začínajících i pokročilých programátorů, či nadšenců.

Přidávejte příspěvky s dalšími užtečnými funkcemi, které často používáte, a pomozte tak ke zlepšení úrovně programování ostatních :))

7. 8. 2011 14:10:58