/jsget

Just a good way to get and use querystrings, including with .js files

Primary LanguageJavaScriptMIT LicenseMIT

Jsget

A simple way to enable querystring in javascript files. It can also be used with typed url strings or current page url.

How it works

Jsget was created to add a feature that doesn't exists natively in javascript, but could help webdevelopers offering a common serverside script functionality.

First of all, when a new object is created, jsget will search the last <script> tag of the partial DOM loaded. The last <script> tag is the script that jsget is working at moment, then the querystring from src attr is loaded and each key=>val element is placed inside an object local variable. After that, you need to call get() method with a string as parameter. This string should be one of querystring loaded keys (see How to use section for examples).

How to use

You've 3 ways to implement jsget in your page.

1st - Inside a js file

<script src="file.js?foo=bar&key=value"></script>

file.js?foo=bar&key=value

<script>
	var g = new Jsget;
	document.write(g.get('foo')); // returns 'bar'
	document.write(g.get('key')); // returns 'value'
	document.write(g.get('anything')); // returns false
</script>

2nd - A typed url

<script src="file.js?foo=bar"></script>

file.js?foo=bar

<script>
	var g = new Jsget('http://example.com/page?out=side');
	document.write(g.get('out')); // returns 'side'
	document.write(g.get('foo')); // returns false
</script>

3rd - Directly inside a <script> tag in HTML document

file.html?foo=bar&new=one&two=whatever

<script>
	var g = new Jsget;
	document.write(g.get('two')); // returns 'whatever'
	// ... (you get it)	
</script>

Working with js types

Jsget get(param) will always return false or a string. In some situations you could need a primitive or complex js type that was the really intention for a GET value (i.e in ?foo=12.3 get('foo') should return 12.3 as number type)

To get a value as it "should be" type, just use the second parameter with get(). Jsget'll try to change the original type (string) to the defined one.

file.js?foo=12.3

<script>
	var r = new Jsget;
	document.write(r.get('foo', 'float')); // returns 12.3 as a numeric type
</script>

Also, if you want a strict type validation (i.e I need foo to receive an integer type, any other type should be an error), validType could help. This function will validate the type you defined with the true type jsget will retrieve.

file.js?foo=12

<script>
	var r = new Jsget;

	// Jsget will first transform (string)12 to (number)12 and next validate with 'integer' type. Any type incompatibility will return false. If types are ok, just return 12 (as number object).
	document.write(r.validType('foo', 'integer')); // returns 12, because (string)12 changed to (number)12 and is a valid integer
</script>

The second param from get() and validType() share the same configuration. Jsget support these:

  • null To empty strings like ?foo=
  • float Floating point numbers like ?foo=12.3
  • integer Integer numbers ?foo=12
  • object You can also use strings to represent objects (like JSON) ?foo={a:'b',c:'d'}
  • array Arrays are like objects, but more simple ?foo=['one','two','three']

Undefined type is useless here because all functions need to verify the existence of all keys called.

There is another function toString(). This one returns the querystring as string.

Limitations

Javascript files can't know their own filename, only the page which loaded them. This is a language limitation, so like explained at How it works section, jsget needs to walk with DOM construction and read the last <script> tag loaded (which is the DOM pointer position).

What is this about? You can't use jsget inside ready or load statements. Look:

file.js?foo=bar

<script>
	var r = new Jsget;
	document.write(r.get('foo')); // returns 'bar'
</script>

file.js?good=day

<script>
	window.onload = function() {
		var r = new Jsget;
		document.write(r.get('good')); // Wrong! It probably should not return what you expect...
	};
</script>

file.js?jquery=iscool

<script>
	$(document).ready(function(){
		var r = new Jsget;
		document.write(r.get('jquery')); // Wrong! Same as above
	});
</script>

file.js?use=jquery

<script>
	var r = new Jsget;
	$(document).ready(function(){
		document.write(r.get('use')); // Ok! Class instance is outside ready/load statement
	});
</script>

In window.load example above it should not return what I expect. What write() method will return then? Simple. When using ready/load statements, you tell the script to wait until full DOM (or even more, like images) is loaded. If DOM is loaded and jsget is called inside a ready/load statement, it will get the latest <script> written in your HTML document. Maybe this ready/load script could be your last <script> tag inside document. Avoid it.