Jump to content

skaterdav85

Members
  • Content Count

    874
  • Joined

  • Last visited

Everything 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. 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. I figured out what I needed to change, but I dont understand why. Anyone have any idea? if (this.window == window) { return new myLib(selector);}
  8. 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>
  9. read this tutorial. it uses jquery and makes it pretty straightforward.http://net.tutsplus.com/tutorials/javascri...om-an-xml-file/
  10. 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.
  11. Thanks! that video was useful in understanding the basics of SSH and networking protocols.My guess is that GitHub allows users to have more than one SSH key so that I can connect to the same GitHub account from multiple computers.
  12. 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?
  13. 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?
  14. 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 =)
  15. 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,{}))
  16. 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.
  17. interesting approach Inglome. I haven't really studied the differences of the event object for IE and modern browsers since I rarely use them. Using this does sound easier though once you normalize its scope through feature detection.
  18. true. the DOM level 2 event model is just more flexible once you get past the browser inconsistencies.
  19. 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
  20. ok thanks! i just found an article on quirksmode that states what you just said as well:http://www.quirksmode.org/js/events_advanced.html
  21. 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); }; }} ());
  22. 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> JavaScript 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'); } });};
  23. 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!
  24. 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.
  25. nevermind. i take that back. it can. it just gets a little weird because I have to do some funky OGNL expressions since this application is using a JSP/Struts framework, and I'm not very familiar with it
×
×
  • Create New...