Posts jQuery functions
Post
Cancel

jQuery functions

snap250

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var TheFramework = function () {
	var test1="alcohol";
	var test2;

    var myBoatUnderTheBridge = function () {
           console.log("myBoatUnderTheBridge -- " + test1);
    }

	return {
		CustomMethod: function (the_name) {
			console.log(test1);
			test1 = "cool";
			myBoatUnderTheBridge();
			console.log("method2"+the_name);
		},

		MyMethod: function () {
			console.log("method1");
		},

		MyMethod_with_RET: function () {
			console.log("method3");
			return ("this is came by MyMethod_with_RET");
		}
	}
}();

var myWork =  {
		MySampleMethod: function () {
			console.log("init2");
		}
}

TheFramework.MyMethod();

myWork.MySampleMethod();

TheFramework.CustomMethod("THIS IS A TEST");

console.log(TheFramework.MyMethod_with_RET());

console.log(TheFramework);

console.log(myWork);


there is no class.create() in jquery, instead use regular JS to code the object up. create a class with associated object and then use $.extend() to work with the object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//https://forum.jquery.com/topic/creating-a-class-object-with-jquery
//http://api.jquery.com/jQuery.extend/
var Circle = function(x, y, r) {
      this.x = x;
      this.y = y;
      this.r = r;
}

$.extend(Circle.prototype, {
      area: function() {
            return Math.PI * this.r * this.r;
      },
      diameter: function() {
            return 2 * this.r;
      }
});

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//https://flydillonfly.wordpress.com/2011/05/06/writing-oo-javascript-using-jquery/

	$(function() {

		// create document
		APP.pageHelper = new APP.PageHelper();
		// need to call init manually with jQuery
		APP.pageHelper.initialize();

	});

	// namespace our code
	window.APP = {};

	// my class (no Class.create in JQuery so code in native JS)
	APP.PageHelper = function() {};

	// add functions to the prototype
	APP.PageHelper.prototype = {

	  // automatically called
	  initialize: function(name, sound) {
		this.myValue = "Foo";
		console.log(this.myValue);

		// attach event handlers, binding to 'this' object
		$("#myButton").click($.proxy(this.displayMessage, this));

	  },

	  displayMessage: function() {
		console.log("My value: " + this.myValue); // 'this' is the object not the clicked button!
	  }

	};

	<button id="myButton">Test</button>


Pure JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	function Animal(name, sound) {
	  this.name = name;
	  this.sound = sound;
	}

	Animal.prototype.speak = function() {
	  result = (this.name + " says: " + this.sound + "!");
	  console.log(result);
	}

	var cat = new Animal('Kitty', 'Meow');
	cat.speak();

A Simple, Powerful, Lightweight Class for jQuery by Justin Meyer

http://blog.bitovi.com/a-simple-powerful-lightweight-class-for-jquery/

origin - http://www.pipiscrew.com/?p=2383 jquery-functions

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags