[Proto-Scripty] Re: Alternatives to Protosafe?
You cannot safely add Prototype to the target pages. Prototype changes javascript in general, not just jQuery. It adds methods to native objects. If the target pages are already running jQuery in noConflict() mode then you won't interfere, but if you put their pages in noConflict() mode then you will mess up their javascript that relies on it. There could also be custom code that relies on for (each in obj) that will break if you add prototype, and there is no way to check for that. You will also be breaking pages that use mootools, which does not have a noConflict() mode. Prototype does not have a noConflict() mode because the theory behind it prevents that from happening, once native objects are extended there is no way to unextend them. You are going to have to use jQuery or Dojo for this project if you want to add a library to their pages. Probably jQuery as it only adds the jQuery variable to the global namespace, and even then you should use noConflict() mode and return the $ to its previous state before exiting your code, so in case they are using jQuery you give them back use of $ before you are done. If you want to do the least potential damage by adding Prototype to others pages, then check to make sure it doesn't already exist, and then check to make sure $ doesn't already exist, and if it does disable any special effects or give a warning saying that this feature cannot be used because it will interfere with the existing code. Good luck! On Jul 9, 12:10 pm, Diodeus diod...@gmail.com wrote: I am working on a content delivery solution. This would allow people to include some content on their page by adding a script tag. I would like to add some slickness to the content, so I would like to use Prototype. I'm looking for some suggestions to safely add Prototype to the target pages (I'm inserting a script tag dynamically) without interfering with an existing copy of Prototype, jQuery or other libraries. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Alternatives to Protosafe?
If other libraries or js code extend the native objects with the same methods, the one included last wins. In this case, it will almost always be prototype because he is loading it dynamically. On Jul 10, 1:04 pm, Matt Foster mattfoste...@gmail.com wrote: Besides the $ function and using for(var in ) for iteration over an array. I can't think of other conflicts prototype would cause with existing code. -- http://positionabsolute.net On Jul 10, 2:41 pm, Josh Powell seas...@gmail.com wrote: You cannot safely add Prototype to the target pages. Prototype changes javascript in general, not just jQuery. It adds methods to native objects. If the target pages are already running jQuery in noConflict() mode then you won't interfere, but if you put their pages in noConflict() mode then you will mess up their javascript that relies on it. There could also be custom code that relies on for (each in obj) that will break if you add prototype, and there is no way to check for that. You will also be breaking pages that use mootools, which does not have a noConflict() mode. Prototype does not have a noConflict() mode because the theory behind it prevents that from happening, once native objects are extended there is no way to unextend them. You are going to have to use jQuery or Dojo for this project if you want to add a library to their pages. Probably jQuery as it only adds the jQuery variable to the global namespace, and even then you should use noConflict() mode and return the $ to its previous state before exiting your code, so in case they are using jQuery you give them back use of $ before you are done. If you want to do the least potential damage by adding Prototype to others pages, then check to make sure it doesn't already exist, and then check to make sure $ doesn't already exist, and if it does disable any special effects or give a warning saying that this feature cannot be used because it will interfere with the existing code. Good luck! On Jul 9, 12:10 pm, Diodeus diod...@gmail.com wrote: I am working on a content delivery solution. This would allow people to include some content on their page by adding a script tag. I would like to add some slickness to the content, so I would like to use Prototype. I'm looking for some suggestions to safely add Prototype to the target pages (I'm inserting a script tag dynamically) without interfering with an existing copy of Prototype, jQuery or other libraries. --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: DOM building methods
It's a very common development pattern/problem that comes up.
Creating a bunch of repetitive DOM elements and inserting them into
the page.
It comes down to:
1) Native for loops will always be faster then calling a function
that then does the loop
2) Native inserts are faster then library inserts, but library inserts
are cross browser and may handle other niceties
3) inserting after a loop is faster then inserting in a loop:
var arr = //some long array
for (var a=0, length = arr.length; a length; a++) {
// create string
}
// insert string
is faster then
var arr = //some long array
for (var a = 0; a arr.length; a++) {
// create string
// insert string
}
4) Joining arrays is usually faster then concatenating strings, but
not as easy to read. I only try this if I really need the speed.
Sometimes += strings are faster.
var arr = //some long array
var data = [];
for (var a = 0; a arr.length; a++) {
data.push(a);
}
insert data.join('')
5) DOM node vs appending strings speed is browser dependent. Chrome
and nightly safari are slightly faster creating DOM nodes, appending
them all to a doc fragment and then appending the doc fragment to the
document then at doing innerHTML. They are so fast at doing either,
just code to your preferred method for them. It won't even matter for
really long arrays. Current gen browsers are much faster at inserting
a string.
6) innerHTML = 'string' does not work in IE 6, 7, 8 for inside table
tbody and other tags.
7) watch out for IE memory leaks when using innerHTML or prototypes
remove or similar methods, clear events on your DOM first. This isn't
built in because it is very slow to traverse the DOM and remove every
event automatically and is unnecessary overhead on many occasions.
Cheers,
Josh Powell
On May 13, 8:20 am, Romek Szwarc kee...@gmail.com wrote:
Thanks T.J. for this long answer.
Maybe not many people will face such a performance problem, but this could
be written in documentation, so we can avoid such issues at the beginning.
This could be also good topic for PimpMyCode series at Prototype's blog.
Greetings
Romek
2009/5/13 T.J. Crowder t...@crowdersoftware.com
Hi,
As you can see third method is 4 times faster than first one.
Yes. The third method largely evaluates to setting the innerHTML
property of the list element, which uses the browser's built-in HTML
processing. Reading HTML strings and quickly turning those into the
displayed result is fundamentally what browsers *do*, and they're
highly optimized to do it as quickly as possible (people are endlessly
comparing browsers' page rendering times). They can do it working
directly on their internal structures, whereas if you create and
append elements via DOM methods, you're working through a third-party
API layered on top of the browser's internals. No surprise, then,
that the browser does it faster when you let it use its native
implementations of things. :-)
I did a similar exercise a while back (here[1]), comparing DOM methods
vs. Prototype's wrappers for DOM methods vs. concatenating a string
and setting innerHTML. The last method, innerHTML, wins on every
browser I tried, hands down, usually by at least one order of
magnitude. (Prototype's wrappers aren't very costly, but going
through the DOM methods is, and so they inherit that cost.) The
smallest discrepancy, IIRC, is on Chrome (only about four times
faster) -- but then, Chrome is freakishly fast at nearly
everything. :-)
[1]http://pastie.org/476791
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On May 13, 9:12 am, keemor kee...@gmail.com wrote:
Hi,
I'd like to present 3 ways of building ul list and compare the speed
of them.
I used firebug's profiler on FF3
html:
body
a href=# id=gogo/a
ul id=list/ul
/body
$('go').observe('click',go);
First method:
Time to build (2122.406ms, 84055 wywołań)
function go(e){
e.stop();
$('list').update();
var tpl = new Template ('li class=#{class} id=#{id}#{id}/
li');
$R(1, 1000).each(function(i){
$('list').insert(tpl.evaluate({
class: 'klasa',
id: i
}));
})
}
Second:
Time to build (1754.548ms, 57053 wywołań)
function go(e){
e.stop();
$('list').update();
$R(1, 1000).each(function(i){
var li = new Element('li', {
class: 'klasa',
id: i
}).update(i);
$('list').insert(li);
})
}
Third:
Time to build (513.747ms, 30054 wywołań)
function go(e){
e.stop();
var tpl = new Template ('li class=#{class} id=#{id}#{id}/
li');
var list = new String
[Proto-Scripty] Re: Classes vs Objects - Best Practice?
If I only need one of something, I go with an object, otherwise if I
need more then one I go with a class-like structure.. though I don't
use Prototypes Class method, so I'll let someone that does answer that
part of the question.
Josh Powell
On May 11, 1:44 pm, louis w louiswa...@gmail.com wrote:
I have always set up my Javascript using objects like below:
if (!FooBar_Old) var FooBar_Old = {};
FooBar_Old.UI = {
test_str : 'it works'
, test: function() {
console.log(this.test_str);
}
};
// FooBar_Old.UI.test();
However recently I have been wanting to convert these to real classes
to take advantage of the initialize constructor. I took a first pass
at this, and can't get it working.
This post is two questions:
#1 Which method do you use in your javascript programming Objects or
Classes?
#2 What am I doing wrong with my class declaration below?
// Class Based (Doesn't work)
if (!FooBar) var FooBar = {};
FooBar.UI = new Class.create({
test_str : 'it works'
, initialize: function(options) {
// Whatever
}
, test: function() {
console.log(this.test_str);
}
});
// FooBar.UI.test();
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Classes vs Objects - Best Practice?
I do this:
var MyClass = function () {
this.foo = 'bar'
}
MyClass.prototype = {
'baz': function() {
alert('blitz');
}
}
//Which lets me:
var myObj = new MyClass();
myObj.foo; // 'bar'
myObj.baz(); // alerts 'blitz'
//And even:
for (attr in myObj) {
alert(attr); // foo, baz
if (myObj.hasOwnProperty(attr)){
alert(attr); // foo
} else {
alert(attr); // baz
}
}
Quick, simple. Uses native javascript. No custom functions to mimic
the class behavior. Haven't decided how to handle inheritance yet
though.
On May 11, 3:26 pm, louis w louiswa...@gmail.com wrote:
Josh could you post an example of how you do it? I am interested in
all of the different approaches.
Thanks.
On May 11, 6:12 pm, Josh Powell seas...@gmail.com wrote:
If I only need one of something, I go with an object, otherwise if I
need more then one I go with a class-like structure.. though I don't
use Prototypes Class method, so I'll let someone that does answer that
part of the question.
Josh Powell
On May 11, 1:44 pm, louis w louiswa...@gmail.com wrote:
I have always set up my Javascript using objects like below:
if (!FooBar_Old) var FooBar_Old = {};
FooBar_Old.UI = {
test_str : 'it works'
, test: function() {
console.log(this.test_str);
}
};
// FooBar_Old.UI.test();
However recently I have been wanting to convert these to real classes
to take advantage of the initialize constructor. I took a first pass
at this, and can't get it working.
This post is two questions:
#1 Which method do you use in your javascript programming Objects or
Classes?
#2 What am I doing wrong with my class declaration below?
// Class Based (Doesn't work)
if (!FooBar) var FooBar = {};
FooBar.UI = new Class.create({
test_str : 'it works'
, initialize: function(options) {
// Whatever
}
, test: function() {
console.log(this.test_str);
}
});
// FooBar.UI.test();
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Need javascript gurus' opinion about good javascript editor/debugger.
I think you're looking for Aptana or the Aptana plugin for Eclipse. Josh Powell On Apr 6, 12:16 pm, Jay jebum@gmail.com wrote: Thanks guys for the suggestions. What about good javascript editor? Is there one that can catch any syntactic errors? --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Associative arrays vs hash
The problem is that:
obj = [];
obj['foo']
is not an associative array, and it is not a hash. It is an empty
array with the property of foo, identical to this notation:
obj.foo
The length property refers to the items in the array, not the
properties associated with it.
for (each in obj)
iterates over all of the properties/methods in an object, and
Prototype adds a bunch of those to the prototypes of arrays. It does
not add any to the prototype of an object, so try:
var ax = {};
ax['aaa'] = 1;
ax['aab'] = 2;
ax['aac'] = 4;
ax['aad'] = 6;
for (each in ax) {
alert(x);
}
Cheers,
Josh Powell
On Apr 2, 8:09 am, Alex Mcauley webmas...@thecarmarketplace.com
wrote:
why not push into the json object ?
- Original Message -
From: Diodeus diod...@gmail.com
To: Prototype script.aculo.us prototype-scriptaculous@googlegroups.com
Sent: Thursday, April 02, 2009 4:04 PM
Subject: [Proto-Scripty] Re: Associative arrays vs hash
The problem is in my case, I'm adding elements to the array as I go,
as opposed to building it as a JSON-type hash up front.
I'd like to be able to do:
ax[newValue] = y
Looping through an associative array should be simple, but I'm missing
something here.
On Apr 2, 10:38 am, Walter Lee Davis wa...@wdstudio.com wrote:
I wasn't aware that JavaScript arrays could be associative like this.
My understanding was that they are always numerically indexed, and if
you want an associative array-like structure that you can iterate
over, you should use a vanilla Object or a Prototype Hash.
var ax = {'aaa':1,'aab':2,'aac':4,'aad',6}
for(i in ax){
alert( i + ': ' + ax[i] );
}
var ax = $H({'aaa':1,'aab':2,'aac':4,'aad',6});
ax.each(function(s){ alert( s ) });
Walter
On Apr 2, 2009, at 10:28 AM, Diodeus wrote:
'm building the following array:
var ax = []
ax['aaa'] = 1
ax['aab'] = 2
ax['aac'] = 4
ax['aad'] = 6
I would like to loop though all of the values in this array.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Chrome, Safari, Konqueror dHTML issue
$('myul') checks for elements with an id of myul, if you are looking
for classname, use:
$$('.myul')
On Mar 25, 1:55 pm, Vladimir Ghetau vladimirghe...@gmail.com wrote:
Hi ,
I was just testing this dynamically built structure...
div
ul id=myulli some more tags here... /li/ul
/div
using code like...
[code]
var li_el = new Element('li');
var ul_el = new Element('ul', {className: 'myul'});
ul_el.appendChild(li_el);
var div_el = new Element('div');
div_el.appendChild(ul_el);
[/code]
Problem is, after attaching this to the xHTML document, I can't access
the UL node using $('myul') in chrome, safari, or konqueror . It seems
I can only access it if I only use the ul_el var that I just
declared above.
In other words, how can I call dynamically generated HTML content
using prototype inside chrome, safari or
Konqueror?
I'm trying to figure out what's missing, it works fine in IE or FF.
Thank you!
Vladimir Ghetau
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Scoping prototype
First, thanks for the reply. This seemed like it should work to
contain Prototype, but it doesn't...
$(function() {
console.log($('mySelect'));
(function() {
$.getScript('/cfgmgr/js/lib/prototype-1.6.0.3.js', function() {
console.log($('mySelect'));
});
})();
console.log($('mySelect'));
setTimeout(console.log($('mySelect')), 1000);
});
Using jQuerys getScript to bring in Prototype, the console.log with
the timeout set returns the same thing as the console.log inside of
the callback from the getScript. In case you don't know jQuery:
$(function() {
});
is shorthand for executing this anonymous function once the page
loads. The first
console.log($('mySelect'));
shows an empty array, which it should because $ is similar to
Prototypes $$ and should have a # in front of it to get by id.
next, the
(function() {
})();
is meant to contain the loading of Prototype.
The console.log inside of the callback executes as expected, and logs
the element with an id of mySelect. The console.log called just
outside of the containing anonymous function returns an empty array,
as expected, as prototype hasn't had time to load just yet but the
console.log inside of the timeout logs the element with the id of
mySelect, using prototype. So, everything that runs after prototype
has loaded by the getScript will have access to Prototype.
I'm not sure if loading the text server side in the (function() {})();
will work either, possibly this doesn't work because Prototype changes
the prototype of objects declared outside of the (function(){})();
which bears further testing.
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: building object orientated javascript libraries - does Prototype support/help here???
Hi Greg, Prototype definitely helps with creating a Class based OO approach. http://prototypejs.org/api/class Javascript, however, is a prototype (little p) based object oriented language, http://en.wikipedia.org/wiki/Prototype-based_programming not a functional language, http://en.wikipedia.org/wiki/Functional_programming_language and not a class based object oriented language. http://en.wikipedia.org/wiki/Class-based_programming Personally, I prefer to stick with the prototype (small p) object oriented programming because I find the class based development too bulky for 99% of my javascript needs. When I do need to work with some classes, I do use the Prototype Class.create. I highly recommend the small but very dense javascript book: Javascript: The Good Parts by Douglas Crawford which has an excellent discussion of this in it along with a ton of good javascript tips. Also, check out jslint.com and click around. Josh Powell On Feb 27, 3:43 pm, greghauptmann greg.hauptm...@gmail.com wrote: Hi all, I confess this is a newbie question in advance: Q1 - If one wants to build a set of higher level library functions in javascript (e.g. to aid in drawing objects say) does Prototype assist here? That is would it provide a framework, or a standard way of building up JavaScript code with an OO like approach? Q2 - What would people recommend here for a set of higher level Javascript functions that themselves may lend themself to being modeled in a OO like fashion? i.e. in the javascript programming world is this something you just would not consider trying to do (i.e. and sticking with functional approach). Thanks --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
