Jump to content


  • Content Count

  • Joined

  • Last visited

Posts posted by skaterdav85

  1. I recently watched a video in the YUI Theatre called Scalable JavaScript Application Architecture (http://developer.yahoo.com/yui/theater/vid...as-architecture). After watching it and trying this technique on my own for a small example, I started feeling like my code was just long and had too much abstraction from each layer, making it hard to follow. I wanted to see what some of you thought and how you architect your JS when you create an application so that it is easy to maintain and it is scalable. Has anyone else watched this presentation?

  2. One good practice off the top of my head is to only use jQuery when necessary. For example, inside a callback function, this will refer to the DOM element that triggered the event. I.e:

    $('a#mylink').click(function(){	//this refers to the anchor with an ID of mylink});

    To get the ID attribute of the link, i've seen people do things like $(this).attr('id'). You really don't need to do this. Sometimes you may need to wrap this inside the jQuery object to use jQuery methods, but if all you want is the id, why not just use raw JS and get it like: this.id? This saves on processing time.

  3. well you dont need to have a form submit. you can just create the textbox with an input button and when you click the button, you take the contents of the input and place it the div tag all through JS. Something like this:

    <div id="someDiv"></div><textarea id="bumper"></textarea><input type="button" id="button" />document.getElementById('button').onclick = function () {var bumper = document.getElementById('bumper').value;document.getElementById('someDiv').innerHTML = bumper;}

  4. Well I have found the answer. Apparently IE's implementation of window is a bit different than other browsers. Using the firebug lite console in IE, you get the following results for each expression:In IE:

    this === window; //false. True in Chrome's consolethis == window; //false. True in Chrome's consolethis.window == window; //truewindow.window == window; //truewindow.window === window; //false. True in Chrome's console

  5. I revised my code to the following:

    (function(){	var myLib = function (selector) {		console.log(this);		if(this == window) {			return new window.myLib(selector);		}		};	myLib.prototype.wussup = function () {		alert('sup');		};	//expose myLib to the global window object	window.myLib = myLib;})();myLib('.someclass');

    When I invoke myLib in FF, it first logs the Window and then logs an object (an instance of myLib) as you'd expect.When I invoke myLib in IE, it only logs the Window. When I view the properties of Window, myLib is a property, but the Window also has another property called 'window' which also has a property of myLib. Anyone have any insight into this?

  6. automatically scopes to the global scope. i.e. this == global scope.
    ya i do know that this points to the window object when inside a function that is invoked as a regular function. What I don't understand is why I have to say this.window === window instead of this === window in IE to see how the function was invoked and making sure it is called as a function constructor. Any speculation on that?

  7. Im trying to understand jQuery's approach by creating a constructor function (i.e jQuery) within a self executing anonymous function, and exposing it to the global window object. I wrote a constructor function (myLib), but for some reason it it throws an error in IE and I have no idea why. The error says "undefined is null or not an object". It does work in IE if I use the new operator which i wrote in my comment, but when you dont use it, I get the error. I have some scoping issue but I can't figure out how to fix it.Here is my code:

    <script>(function(){var myLib = function (selector) {	if(this == window) {		return new window.myLib(selector);	}	};myLib.prototype.wussup = function () {	alert('sup');	};//expose myLib to the global window objectwindow.myLib = myLib;})();//works fine//(new myLib('.someclass')).wussup();//doesn't work in IEmyLib('.someclass').wussup();</script>

  8. Getting stared with Git wasn't too painful. It did take a few hours watching and reading tutorials on NetTuts and setting up my accounts and repositories, but after that it seemed pretty straightforward. You just have to memorize a few commands. I didn't have much experience with the command line except for using 'cd' and 'ls' commands. I chose Git because it was easy to use with GitHub. I was quite intrigued with GitHub (the social network for coders) because it allows me to share my projects with the public and hopefully i'll eventually get feedback and learn from it. GitHub is also really well integrated into the Cloud 9 IDE, which if you havent heard of it, it is a pretty awesome IDE within a browser, so you can edit your projects from any computer.I have also used Subversion at work, but through a GUI like Tortoise or through the NetBeans IDE.

  9. I just started using Git and GitHub today, and during the process I had to set up an SSH Public key through Terminal on my mac and add it to my GitHub account. However, I'm kind of confused on what an SSH key is. Can anyone explain it? After my research, it seems like it is just a more secure way of authenticating users through the command line.Also, does anyone know why GitHub allows me to have more than one SSH Public Key?

  10. It just decreases the size of the code. I have a 1.2MB Javascript file which gets minified down to around 600KB, and then the server compresses that which results in only 82KB going across the wire. So my 1.2MB of commented, indented code ends up using 82KB to transfer to the user. That's the major benefit of minifying the code. I don't use anything which refactors identifier names though, I just use one which strips whitespace and comments:http://fmarcia.info/jsmin/test.htmlThat takes 1308090 bytes of code and turns it into 670223 bytes, and then the server compresses that with gzip.
    Does the server automatically compress files with gzip, or is this something you have to specify? How do you know the compressed size after the server has served you the file?

  11. That looks similar to the jQuery source code... Now it is making sense! They most use a tool similar to this to compress the jquery.js file. I was thinking it would be impossible to develop jquery using such meaningless variables and function names. I have never looked at the development code, but I imagine it makes much more sense.
    This is a library i started writing just for fun to understand JS better and to get an understanding of JS library development. I was using the same structure as jQuery (using a constructor function) but I called it dQuery lol. This is purely an educational exercise =)

  12. I just came across this site for JS minification, http://www.minifyjavascript.com/, and I was wondering what other people thought. Do you compress your JS? If so, what tool do you use?I put in some JS and and turned No Encoding to Off and it encrypted all my JS into something like this:

    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('b o=6(7){8(3===p){9 r o(7)}8(k 7==="t"){3.4=g.s(7)}f 8(k 7==="u"){3.4=7}3.q=(6(){8(g.n){9 6(d,c){b 4=3.4;4.n(\'y\'+d,6(){c.A(4)});9 3}}f 8(g.h){9 6(d,c){(3.4).h(d,c,v);9 3}}}());3.B=6(5,j){b a;8(5.i(\'-\')!=-1){b e=5.i(\'-\'),l=5.z(e+1).w();a=5.m(0,e)+l+5.m(e+2,5.x)}f{a=5}3.4.C[a]=j;9 3}};',39,39,'|||this|el|CSSprop|function|obj|if|return|JSprop|var|cb|evt|hyphPos|else|document|addEventListener|indexOf|val|typeof|camelChar|substring|attachEvent|dQuery|window|bind|new|getElementById|string|object|false|toUpperCase|length|on|charAt|call|css|style'.split('|'),0,{}))

  13. I don't have access to jQuery on the computer I'm using currently, but I'm wondering if this might help the script run faster? It may end up just being moving the issue from one end to another, though. I don't know how fast JQuery applies the .show(). Just thought I'd throw it out there.
    var collection = $('#divContainer .eachDiv');var search = function ($collection, searchPhrase) {	  $collection.each(function () {	  var divText = this.innerHTML.toLowerCase();		  this.style.display = 'block'; // This line is thrown out for the .show() below		 if (divText.indexOf(searchPhrase.toLowerCase()) === -1) {			 this.style.display = 'none';		 }	});};$('#search-input').bind('keyup', function () {		$('#divContainer .eachDiv').show(); // This would automatically turn all divs on for every keystroke	var searchPhrase = this.value;	search(collection, searchPhrase);});

    Just tried it and it actually makes it slower by about 10-12 milliseconds, which makes sense since it would have to perform 2 iterations. Since i am searching for a user-inputted keyword which can be contained anywhere within the value of each index of the array, i cant really think of any search algorithm that would apply to this. I might have to either paginate the result set or invoke the search() function once the user has stopped typing for a few seconds.

  14. the traditional event model (element.onclick, element.onmouseover, etc) is more consistent across browsers. However there are drawbacks to this approach because it only allows you to assign one function to each event type of an element. If you have a link and you want to fire 2 functions when it is clicked, you would have to refactor your code so that you only assign one function to that event type, and that function would fire the 2 functions. With addEventListener and attachEvent, you can specify more than 1 event handler to an element. Read these 2 posts. They explain it much better.http://www.quirksmode.org/js/introevents.htmlhttp://www.quirksmode.org/js/events_advanced.html

  15. oh ok. I didn't know IE handled scope differently. Do you know of any references that explain this in detail?I modified my bind() method to the following, using call and caching this.el and it worked, but it'd be nice to know what the scoping differences are between IE and modern browsers.

    this.bind = (function () {		if (document.attachEvent) {			return function (evt, cb) {				var el = this.el;				el.attachEvent('on' + evt, function () {					cb.call(el);				});			};		}		else if (document.addEventListener) {			return function (evt, cb) {				var el = this.el;				el.addEventListener(evt, function () {					cb.call(el);				}, false);			};		}} ());

  16. I was having some fun today and trying to create a small JS library like jQuery in the code below. I have a constructor function called dQuery and I pass in one argument. If the argument is a string, it assumes the argument is an ID of an element and sets a property 'this.el' to the element with that ID using getElementById(). If the argument is not a string, it assumes it is an element. What I am having trouble with, is that when you run the code within window.onload in IE and FF or Chrome, this is interpretted differently. In IE, this points to window, whereas in Chrome and FF, this points to the anchor element with an ID of prinkLink. Any idea why?HTML

    <a href="#" id="printLink">Print</a>


    var dQuery = function (obj) {	if (this === window) {		return new dQuery(obj);	}	if (typeof obj === "string") { //assume the supplied argument is an ID		this.el = document.getElementById(obj);	}	else if (typeof obj === "object") { //assume the supplied argument is an element		this.el = obj;	}	this.bind = (function () {		if (document.attachEvent) {			return function (evt, cb) {				(this.el).attachEvent('on' + evt, cb);			};		}		else if (document.addEventListener) {			return function (evt, cb) {				(this.el).addEventListener(evt, cb, false);			};		}	} ());};   //end of constructor function//example using the dQuery objectwindow.onload = function () {		dQuery('printLink').bind('click', function () {			if (this === window) {				alert('this points to window');			}			else if (this.tagName === 'A') {				alert('this points to anchor tag');			}		});};

  17. thanks, i'll try that on monday when i am back at work. my guess it that it will either stay the same or make it longer since i think jquery just loops over the wrapped set and sets the display property when the show() method is called. on another note, i just found out about the console.time() and console.timeEnd() commands in Firefox so I can see how long it takes to run the function on each keyup. pretty neat!

  18. i get the feeling the elements disappear as the search gets narrowed down through each inputed value.
    correct.I set the display to block on each iteration, and then hide it only if the text within that <div> does not contain the searchPhrase that the user inputted. I have to set the display to block on each iteration because if a term is not found on one search and the user presses the delete button to re-search, the hidden divs from the previous search stay hidden. That is why i always change it to 'block' before deciding whether i should hide it or not.
  • Create New...