util.js

Deze library is flexibel inzetbaar als helperclass

Download

Voorbeeld van gebruik :

$(document).ready(function(){
	$.extend(Util);//tools object
	$.extend(RequestManager);//xhr object
	$.logInit();//logger
	
});
			

Jquery wordt uitgebreid met de twee libraries, vervolgens wordt de logger gestart

			PUBLIC METHODS :

getVal 		: 
   * @description gets value of a form element ,
   * @method getVal
   * @public
   * @static
   * @param {string || object}  form element, name or id
   * @return {string} value  
setVal 		: 
   * @description sets value of a form element ,
   * @method setVal
   * @public
   * @static
   * @param {string || object}  form element, name or id
   * @param {string}  value
		
setHTML		:
   * @description sets html in specified element ,
   * @method setHTML
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @return void   
		
getHTML		:
   * @description gets html content of specified element ,
   * @method getHTML
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @return void   
		
getRef 		:
   * @description returns an object with reference to an element ,
   * @method getRef
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @return void   

setStyle	:
   * @description sets the css-style properties of specified element ,
   * @method setStyle
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @param {string}  css property
   * @return {string} css value 
					  
getStyle	:
   * @description returns the css-style propertie of specified element ,
   * @method getStyle
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @param {string}  css property
   * @param {string}  css value
   * @return void  
		
doShow		: 
   * @description sets the display or visibility property of a specified element to visible,
   * @method doShow
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @param {int}  time, if specified the displayed element will disappear after the time-value im ms
   * @return void
   
doHide		:
   * @description sets the display or visibility property of a specified element to hide,
   * @method doHide
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @return void
doShowHide	:
   * @description toggles the display or visibility property of a specified element ,
   * @method doShowHide
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @return void
					  
addClass	: 
   * @description adds a specified css-class to an element ,
   * @method addClass
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @param {string}  classname, specified in HTML-document or linked css-document
   * @return void
   
addStylesheet	: 
   * @description adds a specified css-stylesheet to document ,
   * @method addStylesheet
   * @public
   * @static
   * @param {string}  stylesheet url
   * @return void
					  
setFocus 	:
   * @description sets focus to a specified element ,
   * @method setFocus
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name
   * @return void

URIencode 	:
   * @description URIencodes [utf-8] a string  with parameters
   * @method URIencode
   * @public
   * @static
   * @param {string}  URI string
   * @return {string} encoded string
   
selectText 	:
   * @description selects a range of text in input-element
   * @method selectText
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name of textbox
   * @param {int}  startIndex
   * @param {int}  stopIndex
   * @return void
   
posX 	:
   * @description calculates left coordinates dom-element
   * @method posX
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name of element
   * @return {int}  left position
   
posY 	:
   * @description calculates top coordinates dom-element
   * @method posY
   * @public
   * @static
   * @param {string || object}  document element , id, tag, name of element
   * @return {int}  top position

getViewport : function(key){
   * @description calculates viewport size, scrolLeft, scrollTop, center of viewport
   * @method getViewport
   * @public
   * @static
   * @param {string}  key. Name of the key to be returned. optional, if omitted an object
        containing all the values is returned
            "width"     : frameWidth,
            "height"    : frameHeight,
            "scrleft"   : scroll_left,
            "scrtop"    : scroll_top,
            "centX"     : centerX,
            "centY"     : centerY
   * @return {number || object}  viewport data
URIencode 	: 
   * @description URIencodes [utf-8] an escaped string  with parameters
   * @method URIencode
   * @public
   * @static
   * @param {string} decoded string
   * @return {string} URI string
URIdecode 	: 
   * @description URIdecodes [utf-8] an unescaped string
   * @method URIdecode
   * @public
   * @static
   * @param {string}  URI string
   * @return {string} decoded string
encode_utf8 	: 
   * @description encodes [utf-8] a string
   * @method encode_utf8
   * @public
   * @static
   * @param {string}  string
   * @return {string} encoded string
   
decode_utf8 	: 
   * @description decodes [utf-8] a string
   * @method decode_utf8
   * @public
   * @static
   * @param {string}  string
   * @return {string} decoded string
   
base64encode 	: 
   * @description base64encodes  a string
   * @method base64encode
   * @public
   * @static
   * @param {string}  string
   * @return {string} encoded string  
   
base64decode 	: 
   * @description base64decodes  a string
   * @method base64decode
   * @public
   * @static
   * @param {string}  string
   * @return {string} decoded string 

safeHTML		:
   * @description encodes html for posting as url
   * @method safeHTML
   * @public
   * @static
   * @param {string}  HTML
   * @return void
   
safeURI 		: 
   * @description encodes uri-component to base64 decoded JSON-string for sending as url
   * @method safeURI
   * @public
   * @static
   * @param {string}  uri
   * @return {string} decoded string
   
safeObjToURI 		: 
   * @description encodes JSON object to base64 decoded JSON-string for sending as url
   * @method safeObjToURI
   * @public
   * @static
   * @param {string}  obj
   * @return {string} decoded string
   ==========================================
   USE PHP FUNCTION :
   function uri2json($data,$b_JSON=false){
		$data=base64_decode($data);
		$data=urldecode($data);
		if(!$b_JSON){
			return $data;
		}
		else {
			return json_decode($data);
		}
	}
   =========================================
isArray		:
   * @description returns true if typeof object is array
   * @method isArray
   * @public
   * @static
   * @param {obj}  array
   * @return {boolean} true or false

isNumber		:
   * @description returns true if typeof object is number
   * @method isNumber
   * @public
   * @static
   * @param {obj}  number
   * @return {boolean} true or false
   
inStr		:
   * @description returns true if needle is in haystack
   * @method inStr
   * @public
   * @static
   * @param {string} needle
   * @param {string} haystack   
   * @return {boolean} true or false

objToArray
   * @description returns an array with the keys and an array with the values 
   * @method objToArray
   * @public
   * @static
   * @param {object} object to be splitted  
   * @return {object} : {"key" : keys{array} , "val" : values{array}}
   
getExacType		:
   * @description returns  type of parameter
   * @method getExactType
   * @public
   * @static
   * @param {obj}  inputobject
   * @return {string} type
   
removeHTMLTags	:
   * @description removes all html tags from parameter
   * @method removeHTMLTags
   * @public
   * @static
   * @param {string}  html
   * @return {string} text, no tags
   
intOnly 	:
   * @description returns true if argument is integer
   * @method intOnly
   * @public
   * @static
   * @param {string}  testvalue from field
   * @return {boolean} true or false
   
goTo 	:
   * @description redirection to url
   * @method goTo
   * @public
   * @static
   * @param {string}  url  , if only filename (no slashes)then root is added
   * @param {string}  get  , if specified get is added as parameter {root}{url}?d={get}
   * @param {string}  d    , if true get is added as uri component
   * @return void

objToKey 	:
   * @description returns array with objectkeys
   * @method objToKey
   * @public
   * @static
   * @param {object}  object
   * @return {array} array with keys

winOpen :
   * @description creates new browserwindow
   * @method winOpen
   * @public
   * @static
   * @param {object}    root        : {string}, [if not specified then root 
		is determined from server-info]
						url         : {string},
						name        : 'win_'+Math.floor(Math.random()
		*10000),[random name]
						options     : 'menubar=1,resizable=1,
		scrollbars=1,width=600,height=850'
   * @return {object}	window
   
getLocation :
   * @description returns a extended location object
   * @method getLocation
   * @public
   * @static
   * @param {string}  href
   * @param {string}  param
   * @return {obj}  locationobject :		
				
	d.protocol
	d.host
	d.hostname
	d.pathname
	d.port
	d.reload
	d.place
	d.assign
	d.hash
	d.search
	//base object
	d.root
    d.base
	d.hashobject
	d.searchobject
   *
			
objToKey : 
   * @description returns an array with the object keys
   * @method objToKey
   * @public
   * @static
   * @param {object}  object to be converted
   * @return {array}  array with numeric keys, values are object keys
		
objFlip :
   * @description returns an object with keys and values switched
   * @method objFlip
   * @public
   * @static
   * @param {object}   object to be converted
   * @return {object}  object with oldvalues=>oldkeys
		
objToURL :
   * @description returns a uri-component string
   * @method objToURL
   * @public
   * @static
   * @param {object}   object to be converted to URI
   * @return {string}  URI string

URLtoObj :
   * @description returns an object derived from an URI, seperators are ? and #
   * @method URLtoObj
   * @public
   * @static
   * @param {string}   URI to be converted
   * @param {string}   seperator 1
   * @param {string}   separator 2
   * @return {object}  object name=>value pairs 

//see also Dough Crockford's JSON page www.json.org  
JSONparse :
   * @description parses a JSON string into an object
   * @method JSONparse
   * @public
   * @static
   * @param {string}   string to be converted
   * @param {boolean}  revive
   * @return {object}  object		
		
JSONtoString :
   * @description converst a JSON object into a JSON string
   * @method JSONtoString
   * @public
   * @static
   * @param {object}   object to be converted
   * @return {string}  JSON string		
		
		
/*		
 * cookies, no need for explanation i guess ;-)
 
 * setCookie : function(name, value, expires, path, domain, secure)

 * getCookie : function(name)
		
 * unsetCookie : function(name, path, domain, secure)
		
/* subcookies utilities
		
 * setSubcookie : function(name, subName, value, expires, path, domain, secure)
		
 * setallSubcookie : function(name, subcookies, expires, path, domain, secure)
	
 * getSubcookie : function(name, subName)
		
 * getallSubcookie : function(name)
		
 * unsetSubcookie : function(name, subName, path, domain, secure)
		
 * unsetallSubcookie : function(name, path, domain, secure)
 
getGlobals	:
   * @description    maps global interface object to local variabeles  ,
   * @method getGlobals
   * @public
   * @static
   * @param {object} | object with variabele names to map
   *                 | ['local var01', 'local var02', '>>' , 'local var03'] {array}
   *                 | '>>' skips one global var for mapping
   * @return {object} mapped local object
   
numberToCurrency 		: 
   * @description format string to currency ,
   * @method numberToCurrency
   * @public
   * @static
   * @param {number}  number
   * @return {string}  formatted string	

mailTo 		: 
   * @description javascript mailto link  ,
   * @method mailTo
   * @public
   * @static
   * @param {object}  	object with maildata
						{ 	"email":{emailadress},
							"subject":{subject},
							"body":{message text}
						}
   * @return {void}	   
   
objXHR 		: 
   * @description returns a crossbrowser XML HTTP Request object,
   * @method objXHR
   * @public
   * @static
   * @return {object}  XML HTTP Request object		

XHRsubmit 		: 
   * @description straightforward XML HTTP Request connection,
   * @method XHRsubmit
   * @public
   * @static
   * @param {string}	url
   * @param {string}	data  post data UIR component
   * @param {string}	mode  post or get
   * @return {object}  XML HTTP Request Result object	    
   
//loggerfuncties---------------------------------------
		
assert :
   * @description sets loggermessage according to passed condition
   * @method assert
   * @public
   * @static
   * @param {object}  condition,  usually a function to evaluate
   * @return {string} message to be displayed
		
echo :
   * @description displays message to loggerwindow  example : 
		Util.echo(oResponse, false, 'form.js saveSuccessResult regel 105');
   * loggerwindow can be closed onclick
   * @method echo
   * @public
   * @static
   * @param {string}  item to be displayed
   * @return {boolean} obligated : add,  if argument = true then 
		items will be added to loggerwindow content
   * @param {string}  sender, format document, function, 
		linenumber (eg : 'form.js saveSuccessResult regel 105')
   * @return void

logInit :
   * @description starts logging , generates loggerwindow
   * @method logInit
   * @public
   * @static
   * @param {boolean} || {string} if true then position = relative, 
		loggerwindow is added after normal content. if false or omitted 
		then loggerwindow is draggable,
		if 'console' then logger output to firebug console, 
		if 'popup' then logger output to ajax popup window.
   * @return void

*/

//object functies------------------------------------------------
/*
extend :
   * @description extends an object with the properties and methods of another object
   * @method extend
   * @public
   * @static
   * @param {obj}  input
   * @param {obj}  extended object
   * @return {obj} extended object
   
inspect :
   * @description inspect an object by looping  inspect : function(obj, maxLevels, level)
   * @method inspect
   * @public
   * @static
   * @param {obj}  object to be inspected
   * @param {int}  maxLevels, depth of iteration
   * @param {int}  level  startlevel
   * @return {string} html with objectstructure as unordered list  
   
inheritprototype :
   * @description attaches an objects protoype to another, 
		restoring the constructor, useful for constuctor stealing inherit pattern
   * @method inheritprototype
   * @public
   * @static
   * @param {obj}  subtype object
   * @param {obj}  supertype object
   * @return {void} 
   
length :
   * @description returns length of object [number of properties and methods]
   * @method length
   * @public
   * @static
   * @param {obj}  object
   * @return {number}  objectlength			
   

request.js

request.js is een library met functionaliteit voor XHR dataverkeer, polling en formverwerking.
Gebaseerd op YAHOO.UTIL, verder uitgewerkt :

  • Gerefactored naar OOP javascript class
  • Lazy loading bij genereren XHR-object
  • Polling functionaliteit ingebouwd
  • Form serialisation uitgebreid met query-functie

Voorbeeld van gebruik :

/* REQUEST OBJECT, oForm bevat een DOM-referentie naar een formulier	, 
 * o is het public interface object van de hoofdmodule
 */		
var XHR = {
	//req 01-----------------------------------------
	doSubmit : function(obj){
		
		$.getForm(oForm,obj);//serialize form voor submit
		$.submit({
			type 			: "post",
			url 			: oForm.action,
			onsuccess 		: this.submitSuccessResult,
			onfailure 		: this.submitFailureResult,
			scope			: o //callbackscope
			
		});
	},
		
	submitSuccessResult : function(oResponse) {
		this.fireEvent( {//fireEvent event met custom object
			type		: 'frm_submit',
			sender		: oForm.id,
			results		: oResponse	
		});
		output.setResult(oResponse, MSG_SUCCESS);
	},

	submitFailureResult : function(oResponse) {
		//doError(); //acties onerror
		output.setResult(oResponse, MSG_ERROR);
	},
	
	//req 02 ------------------------------------------
	doSave:function(t) {
		
		var elemId=t.getAttribute('rel');
		bRequestActive=true;
		$.getForm(oForm,elemId);//sla element op voor submit
		$.submit({
			type 			: "post",
			url 			: 'xhr/element_save.php',
			onsuccess 		: this.saveSuccessResult,
			onfailure 		: this.saveFailureResult,
			scope			: o //callbackscope
	
		});
	},
	
	saveSuccessResult : function(oResponse) {
		this.fireEvent( {//fireEvent event met custom object
			type		: 'frmfield_save',
			sender		: oForm.id,
			results		: oResponse					
		});
		output.setResult(oResponse, MSG_SUCCESS);
		$.echo(oResponse, true,'form.js saveSuccessResult regel 105',10);//logger
	},
	
	saveFailureResult : function(oResponse) {
		//doError(); //acties onerror
		output.setResult(oResponse, MSG_ERROR);
	},
	
	//req 03 ----------------------------------------------
	addPollUpdater:function() {
		
		$.getForm(oForm);//sla formulier op voor submit
		$.addPoll({
			type 			: "post",
			url 			: 'xhr/getpolldata.php',
			onsuccess 		: this.pollSuccessResult,
			onfailure 		: this.pollFailureResult,
			scope			: o //callbackscope
	
		});
	},
	
	pollSuccessResult : function(oResponse) {
		this.fireEvent( {//fireEvent event met custom object
			type		: 'poll_update',
			sender		: oForm.id,
			results		: oResponse,
			success		: true
		});
	},
		
	pollFailureResult : function(oResponse) {
		this.fireEvent( {//fireEvent event met custom object
			type		: 'poll_update',
			sender		: oForm.id,
			results		: oResponse,
			success		: false
		});
	}
};
			

Download

Voorbeeld van initialisatie :

$(document).ready(function(){
	$.extend(Util);//tools object
	$.extend(RequestManager);//xhr object
	$.logInit();//logger
	
});
			

Jquery wordt uitgebreid met de twee libraries, vervolgens wordt de logger gestart

FORMAT :

RequestManager.submit({
				type 			: {string}, get of post
				url 			: {string} url vb:'validate.php?id='+t.id+
				'&value='+t.value+'&sid='+Math.random(),
				scope			: {string}[optioneel]
				data			: {string}postdata url-encoded
				onsuccess 		: {object} callback
				onfailure 		: {object} callback
				
			});

PROPERTIES oResponse object :

				oResponse.tId
				oResponse.status
				oResponse.statusText
				oResponse.getResponseHeader
				oResponse.getAllResponseHeaders
				oResponse.responseText
				oResponse.responseXML
				oResponse.data = oResponse.responseText  
				onsucces en oResponse.statusText onfailure
				
				
PUBLIC METHODS :

abort(o, callback, isTimeout)
 * @description Method to terminate a transaction, if it has not reached readyState 4.
   * @method abort
   * @public
   * @static
   * @param {object} o The connection object returned by asyncRequest.
   * @param {object} callback  User-defined callback object.
   * @param {string} isTimeout boolean to indicate if abort was a timeout.
   * @return {boolean}
   
getRefForm(FormId)
 * @description This method returns a reference to the indicated form
   * @method getRefForm
   * @public
   * @static
   * @param {string || object} form id or name attribute, or form object.


getFormElements(formId)
 * @description This method returns an object with references to all formelements
   * referenced by name
   * @method getFormElements
   * @public
   * @static
   * @param {string || object} form id or name attribute, or form object.

initHeader(label,value)
  * @description Public method that stores the custom HTTP headers for each transaction.
   * @method initHeader
   * @public
   * @static
   * @param {string} label The HTTP header label
   * @param {string} value The HTTP header value
   * @return {void}
   
isCallInProgress(o)
  * Public method to check if the transaction is still being processed.
   *
   * @method isCallInProgress
   * @public
   * @static
   * @param {object} o The connection object returned by asyncRequest
   * @return {boolean}
   
setDefaultPostHeader(b)
  * @description Member to enable or disable the default POST header.
   * @method setDefaultPostHeader
   * @public
   * @static
   * @param {boolean} b Set and use default header - true or false .
   * @return void
   
getForm(formId,query)
 * @description This method assembles the form label and value pairs and
   * constructs an encoded string.
   * submit() will automatically initialize the
   * transaction with a HTTP header Content-Type of
   * application/x-www-form-urlencoded.
   * @method getForm
   * @public
   * @static
   * @param {string || object} form id or name attribute, or form object.
   * @param {string} {object} optional , 
	if string => returns a single field as name/value pair.
	if objectliteral: 1=> filters out the fieldnames in the objectliteral eg.
	{'name01':false,'name02':false}
	2=> selects the fieldnames in the objectliteral eg. 
	{'inclusion':true,'name01':true,'name02':true}


setField(name,value,oForm)
 * @description This method sets the value of a given formelement.
   * @method setField
   * @public
   * @static
   * @param {string || object} field id  or field object.
   * @param {string || object} optional , the desired value of the field.
   * @param {string} optional , if omitted, the default form is used
   
setPollingInterval(i)
   * @description Member to modify the default polling interval.
   * @method setPollingInterval
   * @public
   * @static
   * @param {int} i The polling interval in milliseconds.
   * @return void

setProgId(id)
  * @description Member to add an ActiveX id to the existing xml_progid array.
   * In the event(unlikely) a new ActiveX id is introduced, it can be added
   * without internal code modifications.
   * @method setProgId
   * @public
   * @static
   * @param {string} id The ActiveX id to be added to initialize the XHR object.
   * @return void
   
submit()
   * @description Method for initiating an asynchronous request via the XHR object.
   * @method asyncRequest
   * @public
   * @static
   * @param {object} request object : 
   {		type 			: {string}, get of post
		url 			: {string} url
		scope			: {string}[optioneel]
		data			: {string}postdata url-encoded
		onsuccess 		: {object} callback
		onfailure 		: {object} callback}
   
   
setReadyStateCheckinterval()
   * @description sets interval in wich the readystate property is checked.
   * @method setReadyStateCheckinterval
   * @public
   * @static
   * @param {integer} interval value.
   * @return void
		
addPoll(poll):
   * @description adds a request-object to the polling-list,
   * requests are submitted with interval iPollingInterval   
   * @method addPoll
   * @public
   * @static
   * @param {boolean} if true than polling start on calling the function.
   * @return void 
   
clearPoll:
   * @description clears the polling list ,
   * @method clearPoll
   * @public
   * @static
   * @param 
   * @return void 
   
sendPoll(oRequest):
   * @description submits the polling-objects to the server by ,
   * passing them one by one to submit()  
   * @method sendPoll
   * @public
   * @static
   * @param {object} request object.
   * @return void 
		
startPolling:
   * @description starts the polling sequence ,
   * @method startPolling
   * @public
   * @static
   * @param 
   * @return void  

stopPolling:
   * @description stops the polling sequence ,
   * @method stopPolling
   * @public
   * @static
   * @param 
   * @return void  

setPollingInterval(interval):
   * @description sets interval in which the polling requests are made ,
   * @method setPollingInterval
   * @public
   * @static
   * @param {integer}  pollinginterval
   * @return void   

*/
				



De Code:

client.js

client.js is een uitgebreide class om de client te detecteren. Geschreven door :

  • Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett
  • Professional Ajax, 2nd Edition
  • ISBN: 978-0-470-10949-6
  • WROX
  • GPL-licence


Resultaat :

return {
        engine:     engine,
        browser:    browser,
        system:     system        
};
				

Download


De Code

event.js

event.js is een uitgebreide class om events te handlen.
Inclusief custom event object en controller events.

Geschreven door :

  • Nicholas C. Zakas, Jeremy McPeak, Joe Fawcett
  • Professional Ajax, 2nd Edition
  • ISBN: 978-0-470-10949-6
  • WROX
  • GPL-licence

Ik heb de functies aangepast en gerefactored naar OOP javascript.



Een voorbeeld hoe ik de library gebruik :


var dummy = (function(){
	//PRIVATE CONSTANTS HIER
	
	//PRIVATE VARS HIER
	var oConnect = new objEventTarget();//event-interface object
	
	//PRIVATE METHODS HIER
	
	//PUBLIC INTERFACE HIER--------------------------------
	var o = {
		identifier : 'dummy',
		
		shoot : function(event){
		
			var elem=event.target;
			
			this.fireEvent({//fireEvent event met custom object
						type		: 'testevent',
						sender		: 'shoot '+elem.name,
						results		: {data : 'some data'},
						success		: true
					});
					
			//een testje		
			$('body').append('
'+elem.value+'
'); var oCss={ 'background-color':'red', 'height':'80px', 'width':'120px', 'display':'none' }; $('#test').css(oCss).slideDown('slow').click(function(){ $(this).fadeOut('slow',function(){ $(this).detach(); }); }); } }; $.extend(o,oConnect);//custom events connector return o; })(); //MODULES======================================================= var DataProcessor = (function(){ var o = { receiver : 'DATAPROCESSOR', handler : function(event){ //pickup event event.receiver=o.receiver; customAlert(event);//test } }; return o; })(); //EVENTBUS======================================================== var EventBus = (function(){ var o = { create : function(){ dummy.connectEvent('testevent', DataProcessor.handler); } //MORE INITIAL EVENTBUS METHODS HIER }; return o; })(); //START=========================================================== $(document).ready(function(){ $.extend(Util);//tools object $.extend(RequestManager);//xhr object //koppeling view-controller, testbutton in html-document $('#testbutton').click(function(event){ dummy.shoot(event); }); //interface tussen modules EventBus.create(); //MEER INTERFACES HIER }); //================================================================

Download


De Code

md5.js

md5.js is een class om de md5 hash te berekenen van een string.
A JavaScript implementation of the RSA Data Security, Inc. MD5 Message Digest Algorithm, as defined in RFC 1321.

  • * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
  • * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
  • * Distributed under the BSD License
  • * See http://pajhome.org.uk/crypt/md5 for more info.

Ik heb de class gerefactored naar OOP javascript

Een voorbeeld :

		
$(document).ready(function(){

	$.extend(Util);//tools object
	$.logInit();//logger
	$.extend(RequestManager);//XHR object
	$.extend(MD5);//md5 hash object
	
	
	tester.init();
});
		

Een hashberekening kan dan zijn :

	hash=$.hex_md5(t);
		
Download


De Code

logger / debugger

util.js bevat een door mij ontwikkelde loggerfunctie waar ik al veel plezier van heb gehad, vooral bij het werken met jquery en andere OOP gerelateerde zaken.

Features :

  • Debuggen van scripts
  • Loggen van script events
  • Testvoorwaarden inbouwen en uitkomst loggen
  • Output naar screen, firebug console of browser popupwindow

Een initieer voorbeeld :

		
$(document).ready(function(){

	$.extend(Util);//tools object
	$.logInit();//logger
	
	whatever.init();
});
		

De logger heeft drie methods :

  • assert : function(oCondition, sMelding)
  • echo : function(sMelding, bAdd, sSender, iLevels)
  • logInit : function(sMode)

assert :
   * @description sets loggermessage according to passed condition
   * @method assert
   * @public
   * @static
   * @param {object}  condition,  usually a function to evaluate
   * @return {string} message to be displayed
		
echo :
   * @description displays message to loggerwindow  
        example : Util.echo(oResponse, false, 'form.js saveSuccessResult regel 105');
   * loggerwindow can be closed onclick
   * @method echo
   * @public
   * @static
   * @param {string}  item to be displayed
   * @return {boolean} obligated : add,  if argument = true then items 
        will be added to loggerwindow content
   * @param {string}  sender, format document, function, 
        linenumber (eg : 'form.js saveSuccessResult regel 105')
   * @param {integer}  iteration depth of objects, 
        be careful with DOM-nodes , advice depth<3! 
   * @param {array}  array with DOMnode or object properties to be collapsed.
        eg ['style', 'self', 'controller']
        default collapsed properties are :
        LOGGERDEFAULTCOLLAPSE :[
                'parentNode',
                'childNodes',
                'classList',
                'attributes',
                'offsetParent',
                'children',
                'style',
                'ownerDocument',
                'lastChild',
                'firstChild',
                'previousSibling',
                'firstElementChild',
                'lastElementChild',
                'previousElementSibling',
                'nextSibling',
                '0','1','2','3','4','5','6','7','8','9'
            ],
   * @return void

logInit :
   * @description starts logging , generates loggerwindow
   * @method logInit
   * @public
   * @static
   * @param {boolean} || {string} if true then position = relative, 
        loggerwindow is added after normal content. 
        if false or omitted then loggerwindow is draggable,
        if 'console' then logger output to firebug console,  
        if 'popup' then logger output to ajax popup window.
   * @return void
		

Een voorbeeld :

$.echo(eenVariabele); 
$.echo(eenVariabele,true); //message is added to logger
$.echo(eenObject,true,'testpage line 2585',2);
$.echo(eenObject,false,'testpage line 2585',3,['style','controller']);
		

De tweede parameter 'add' {boolean} bpaalt of de logger de vorige informatie wist voordat er een nieuwe message geschreven wordt. If true dan kan de geschiedenis gewist worden door op de trashcan te klikken.

Download


De Code