/ Gists / JavaScript-OOP

Gists - JavaScript-OOP

On gists

JS OOP ways - Zdrojak.cz

•
JavaScript-OOP JavaScript

1.js #

/// 1. Jediná globální proměnná /// 

var myApplication =  (function(){
        function(){
            /*...*/
        },
        return{
            /*...*/
        }
})();
On gists

Private members and prototypes

JavaScript-OOP JavaScript

example.js #

function Dog(name, color) {
    //private members
    var name = name,
        color = color;

    //public method
    this.getColor = function () {
        return color;
    }
    //public method
    this.getName = function () {
        return name;
    }
}
Dog.prototype = (function () {
    //private member
    var breed = 'French Bulldog',
    
    //private method
    getBreed = function () {
        return breed;
    };
    
    //public interface
    return {
        getBreed: function () {
            return breed;
        },
        getMessage: function () {
            return this.getColor() + ' dog, ' + 
                getBreed() + ' breed, named ' + 
                this.getName() + ' is missing';
        }
    }
})();
On gists

Formulář jako objekt - můj výtvor

JavaScript-OOP JavaScript

formjs-object-my.js #


	(function() {
 
		var Form = {
			init: function(config) 
			{
				this.form            = config.form;
				this.mandatoryFields = this.form.find('input[name="name"], input[name="phone"], input[name="email"], input[name="date"], input[name="time"], input[name="persons"]');
				this.url             = this.form.attr('action');
				this.submitButton    = this.form.find('button');
				this.binds();
			},

			binds: function()
			{
				var self = this;
				this.submitButton.on('click', function(e){
					e.preventDefault();
					var formData = self.form.serialize();
					self.dispatch(formData);
				});
			},
			formFieldCleaner(formObject)
			{ 
				$(":input", formObject).not(":button, :submit, :reset, :hidden")
									   .val("")
									   .removeAttr("checked")
									   .removeAttr("selected"); 
			},
			showErrors: function(error)
			{
				var self = this;

				this.mandatoryFields.removeClass('-error');
				$('#form-message-success').html('')
										  .hide();
										  
				$('#form-message-error').show()
										.html(error.msg.join('<br />'));

				$.each(error.missingField, function(){

					self.form.find('input[name="'+this+'"]')
					              .addClass('-error');
				});
			

			},
			showSuccess: function(msg)
			{
				this.mandatoryFields.removeClass('-error');	
				this.formFieldCleaner(this.form);
				$('#form-message-error').html('')
										.hide();
										
				$('#form-message-success').show()
										  .html(msg)
										  .delay(5000)
										  .fadeOut(800);
			},
			dispatch: function(formData) 
			{
		
				
				var self = this;
				var xhr = $.post(this.url, formData);

				xhr.done(function(json){
					
					json = JSON.parse(json);

					// chyba
					if (json.error.state)
					{
						self.showErrors(json.error);
					}
					else
					{
						self.showSuccess(json.success.message);
					}


				});
			}
		};

		Form.init({
			form: $('#reservation-form')
		});

		})();
On gists

JS constructor + init immediately

JavaScript-OOP JavaScript

demo.js #

1)
var Abc = function(aProperty,bProperty){
    this.aProperty = aProperty;
    this.bProperty = bProperty;
    this.init = function(){
        // Do things here.
    }
    this.init();
}; 
var currentAbc = new Abc(obj,obj);


2)
var Abc = function(aProperty,bProperty){
   function privateInit(){ console.log(this.aProperty);}   
   this.aProperty = aProperty;
   this.bProperty = bProperty;

   privateInit.apply(this);
};


3)
var Abc = function(aProperty,bProperty){
    this.aProperty = aProperty;
    this.bProperty = bProperty;

    //init
    (function () {
        // Perform some operation
    }.call(this));
}; 
var currentAbc = new Abc(obj,obj);
On gists

JS -OOP ways - SO + DJPW.cz

•
JavaScript-OOP JavaScript

1.js #

// define the objects:
var objLit = {
  x: 0,
  y: 0,
  z: 0,
  add: function () {
    return this.x + this.y + this.z;
  }
};

var ObjCon = function(_x, _y, _z) {
  var x = _x; // private
  var y = _y; // private
  this.z = _z; // public
  this.add = function () {
    return x + y + this.z; // note x, y doesn't need this.
  };
};

// use the objects:
objLit.x = 3; 
objLit.y = 2; 
objLit.z = 1; 
console.log(objLit.add());    

var objConIntance = new ObjCon(5,4,3); // instantiate an objCon
console.log(objConIntance.add());
console.log((new ObjCon(7,8,9)).add()); // another instance of objCon
console.log(objConIntance.add()); // same result, not affected by previous line
On gists

Capslock.js - example how to write js native plugin

JavaScript-OOP JavaScript Helpers-Filters-Plugins

capslock.js #

/*

CapsLock.js

An object allowing the status of the caps lock key to be determined

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the CapsLock object
var CapsLock = (function(){

  // initialise the status of the caps lock key
  var capsLock = false;

  // initialise the list of listeners
  var listeners = [];

  // store whether we are running on a Mac
  var isMac = /Mac/.test(navigator.platform);

  // Returns whether caps lock currently appears to be on.
  function isOn(){
    return capsLock;
  }

  /* Adds a listener. When a change is detected in the status of the caps lock
   * key the listener will be called, with a parameter of true if caps lock is
   * now on and false if caps lock is now off. The parameter is:
   *
   * listener - the listener
   */
  function addListener(listener){

    // add the listener to the list
    listeners.push(listener);

  }

  /* Handles a key press event. The parameter is:
   *
   * e - the event
   */
  function handleKeyPress(e){

    // ensure the event object is defined
    if (!e) e = window.event;

    // store the prior status of the caps lock key
    var priorCapsLock = capsLock;

    // determine the character code
    var charCode = (e.charCode ? e.charCode : e.keyCode);

    // store whether the caps lock key is down
    if (charCode >= 97 && charCode <= 122){
      capsLock = e.shiftKey;
    }else if (charCode >= 65 && charCode <= 90 && !(e.shiftKey && isMac)){
      capsLock = !e.shiftKey;
    }

    // call the listeners if the caps lock key status has changed
    if (capsLock != priorCapsLock){
      for (var index = 0; index < listeners.length; index ++){
        listeners[index](capsLock);
      }
    }

  }

  // listen for key press events
  if (window.addEventListener){
    window.addEventListener('keypress', handleKeyPress, false);
  }else{
    document.documentElement.attachEvent('onkeypress', handleKeyPress);
  }

  // return the public API
  return {
    isOn        : isOn,
    addListener : addListener
  };

})();
On gists

Self invoke function with public and private methods

JavaScript-OOP

sif.js #

	var log = {

		target: $("#message"),

		 pridej: function(text){

			this.target.append(text + "<br />");
		},
		clear: function()
		{
			this.target.empty()
		}

	};

	
	var pozdrav = (function(){

		var target = $("#message");

		var pridej = function(text){

			target.append(text + "<br />");
		};

		var clear = function()
		{
			target.empty();
		};


		return {

			x: pridej,
			clear: clear

		};

	})();
On gists

js-object-examples.js

•
JavaScript-OOP jQuery-plugins

js-object-hamburger.js #

    /* Mobile version, MENU
    ---------------------------------------------------------------------------------------------------- */
    var hamburger = {

        init: function(el) {
            this.elements             = {};
            this.elements.el          =  $(el);
            this.elements.header      =  $('#header-mobile');
            this.elements.closeButton =  $('.hamburger-close');
        },

        open: function(e) {
            this.elements.header.fadeIn();
            e.preventDefault();
        },

        close: function(e) {
            this.elements.header.fadeOut();
            e.preventDefault();
        },

        getElement: function(el)
        {
            return this.elements[el];
        }
    };


    // init
    hamburger.init('.hamburger');

    // open
    hamburger.getElement('el').click(function(e){
        hamburger.open(e);
        $('#bg-overlay').show();
        
    });

    // close
    hamburger.getElement('closeButton').click(function(e){
        hamburger.close(e);
        $('#bg-overlay').hide();
    });



    $(document).click(function(e){


        var $hamburgerLink = $('a.hamburger .icon-11');
        var $mobileNav = $('.navigation--mobile');
        
        if ($hamburgerLink.is(e.target))
        {
            // nic
        }

        else if (!$mobileNav.is(e.target) 
            && $mobileNav.has(e.target).length === 0)
        {
            
            if ($('#bg-overlay').is(':visible') && $('#header-mobile').is(':visible'))
            {

                $('#bg-overlay').hide();
                hamburger.close(e);
            }
            
        }




    });
On gists

JavaScript: string fns prototypes

•
JavaScript-OOP JavaScript Helpers-Filters-Plugins

js-fns-prototypes.js #

// stripslashes    
String.prototype.stripslashes = function(){
    return this.replace(/<.*?>/g, '');
    };
    String.prototype.htmlspecialchars = function(){
    var str = this.replace(/&/g, '&amp;');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quot;');
    return str;
    };

// htmlspecialchars
    var str = '<b>my personal website:</b> ';
    str += '<a href="http://www.jonasjohn.de/">jonasjohn.de</a>';
    document.write("Original string (html): '" + str + "'<br/><br/>");
    var str_no_html = str.stripslashes();
    document.write("- String without HTML tags: '" + str_no_html + "'<br/>");
    var str_hsc = str.htmlspecialchars();
    document.write("- String with converted HTML tags: '" + str_hsc + "'");