Rails spinoffs - Jul 2005 - Integrating script.aculo.us into existing javascript codebase

Hi,

I''m new to this mailing list, so first off, a big THANK YOU for the  
script.aculo.us and prototype.js libraries.

I''m trying to integrate script.aculo.us into an existing pretty large  
Javascript codebase (see http://openrecord.org). I''m running into a  
problem with prototype.js and the existing codebase''s use of for/in  
loops over an Array.

prototype.js defines Object.prototype.extend as a function. I believe  
this causes a problem when I do a "for/in" loop on an array e.g.

var anArray = [1,2,3]
  for (var key in anArray) {/*do some stuff */}

Above code snippet doesn''t quite work, because var key gets set to  
"0", "1", "2" and then "extend" in one
of the loop traversal. I
believe that''s because prototype.js defines object.prototype.extend  
as a function.

Is this a known problem? Are there workarounds?

Is the use of for/in loop traversal over an Array considered verboten?

Also, looking at prototype.js. In the Object.extend() function,  
should the variable "prototype" be declared as a local variable  
rather than a global?

Thanks a lot!
Chao Lam

Changeset http://dev.rubyonrails.com/changeset/1770 adds the  
capability to run Sortable.create multiple times (the previously  
created draggables/droppables will be ''destroyed'' (destroying
objects
in JavaScript is not possible, but references and events are removed).

A additional test file for this is added to the trunk. This stuff  
needs testing *hint-hint* (I''ve tested it succesfully with Safari and  
FF Mac, but not in IE).

--
Thomas

With prototype is probably a bad idea to iterate through an Array  
with for/in.

for(var i=0;i<anArray.length;i++) {
     /* do something with anArray[i]  */
}

should do fine. There might be addtional additions (whew) to Object  
(and thus Array) and to other basic js object itself
in the future, i guess. sam stephenson, the author of prototype.js,  
is currently working on some nice stuff, i hear.

One example is a .inspect() function:

Object.prototype.inspect = function(){
   var info = [];
   for(property in this)
     if(typeof this[property]!="function")
       info.push(property + '' => "'' + this[property] +
''"'');
   return ("''" + this + "'' #" + typeof
this +
     ": {" + info.join(", ") + "}");
}

will allow you to get info on any js object by doing something like  
alert(myObject.inspect())

Currently prototype adds functions to Array (push), Function  
(apply,bind,bindAsEventListener) and String (stripTags, escapeHTML,  
unescapeHTML) to make life easier and cut down on code size and  
repetitions.

--
Thomas

Am 08.07.2005 um 21:39 schrieb Chih-Chao Lam:
> Hi,
>
> I''m new to this mailing list, so first off, a big THANK YOU for
the
> script.aculo.us and prototype.js libraries.
>
> I''m trying to integrate script.aculo.us into an existing pretty  
> large Javascript codebase (see http://openrecord.org). I''m running
> into a problem with prototype.js and the existing codebase''s use
of
> for/in loops over an Array.
>
> prototype.js defines Object.prototype.extend as a function. I  
> believe this causes a problem when I do a "for/in" loop on an
array
> e.g.
>
> var anArray = [1,2,3]
>  for (var key in anArray) {/*do some stuff */}
>
> Above code snippet doesn''t quite work, because var key gets set to
> "0", "1", "2" and then "extend" in
one of the loop traversal. I
> believe that''s because prototype.js defines
object.prototype.extend
> as a function.
>
> Is this a known problem? Are there workarounds?
>
> Is the use of for/in loop traversal over an Array considered verboten?
>
> Also, looking at prototype.js. In the Object.extend() function,  
> should the variable "prototype" be declared as a local variable  
> rather than a global?
>
> Thanks a lot!
> Chao Lam
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

> Also, looking at prototype.js. In the Object.extend() function,  
> should the variable "prototype" be declared as a local variable  
> rather than a global?
>
>
Oops, I meant variable "property" is a global variable in  
Object.extend().

chao

Hi Thomas,

Thanks for your informative response.

I think the way prototype.js extends (no pun intended) the Object  
class is way cool, but I''m worried about existing and future  
compatibility, especially since prototype.js is meant to be a library  
used by many apps, and thus need to co-exist with many other code bases.

The real problem lies in the fact that Javascript doesn''t allow for  
non-enumerable user-defined properties. But by extending Object, this  
not only causes a problem with the for/in loop for Arrays, but it  
also causes unexpected behavior for Objects used as associated arrays  
or HashMaps. We use this quite extensively in our Javascript code.  
It''s kind of weird that the extend function copies the extend  
property, every-time the Object.extend() function is invoked.

Can you think of ways we could continue to use Object''s as HashMaps  
while still co-existing with prototype.js?

Alternatively, do you think Sam and others would mind if we modified  
prototype.js to better co-exist with existing Javascript code?

Thanks a lot!
chao

On Jul 8, 2005, at 2:13 PM, Thomas Fuchs wrote:
> With prototype is probably a bad idea to iterate through an Array  
> with for/in.
>
> for(var i=0;i<anArray.length;i++) {
>     /* do something with anArray[i]  */
> }
>
> should do fine. There might be addtional additions (whew) to Object  
> (and thus Array) and to other basic js object itself
> in the future, i guess. sam stephenson, the author of prototype.js,  
> is currently working on some nice stuff, i hear.
>
> One example is a .inspect() function:
>
> Object.prototype.inspect = function(){
>   var info = [];
>   for(property in this)
>     if(typeof this[property]!="function")
>       info.push(property + '' => "'' +
this[property] + ''"'');
>   return ("''" + this + "'' #" + typeof
this +
>     ": {" + info.join(", ") + "}");
> }
>
> will allow you to get info on any js object by doing something like  
> alert(myObject.inspect())
>
> Currently prototype adds functions to Array (push), Function  
> (apply,bind,bindAsEventListener) and String (stripTags, escapeHTML,  
> unescapeHTML) to make life easier and cut down on code size and  
> repetitions.
>
> --
> Thomas
>
> Am 08.07.2005 um 21:39 schrieb Chih-Chao Lam:
>
>
>> Hi,
>>
>> I''m new to this mailing list, so first off, a big THANK YOU
for
>> the script.aculo.us and prototype.js libraries.
>>
>> I''m trying to integrate script.aculo.us into an existing
pretty
>> large Javascript codebase (see http://openrecord.org). I''m
running
>> into a problem with prototype.js and the existing codebase''s
use
>> of for/in loops over an Array.
>>
>> prototype.js defines Object.prototype.extend as a function. I  
>> believe this causes a problem when I do a "for/in" loop on an
>> array e.g.
>>
>> var anArray = [1,2,3]
>>  for (var key in anArray) {/*do some stuff */}
>>
>> Above code snippet doesn''t quite work, because var key gets
set to
>> "0", "1", "2" and then "extend"
in one of the loop traversal. I
>> believe that''s because prototype.js defines  
>> object.prototype.extend as a function.
>>
>> Is this a known problem? Are there workarounds?
>>
>> Is the use of for/in loop traversal over an Array considered  
>> verboten?
>>
>> Also, looking at prototype.js. In the Object.extend() function,  
>> should the variable "prototype" be declared as a local
variable
>> rather than a global?
>>
>> Thanks a lot!
>> Chao Lam
>>
>> _______________________________________________
>> Rails-spinoffs mailing list
>> Rails-spinoffs@lists.rubyonrails.org
>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>
>>
>
>

Chih-Chao Lam wrote:
>
>
> Can you think of ways we could continue to use Object''s as
HashMaps
> while still co-existing with prototype.js?
>
Hi I''m certainly a javascript lightweight but....could you create your 
own classes that extended the prototype class and then overwrite the 
required function in your new class?

Rob

Hi,

There some additional discussion on this going on here:
http://sourceforge.net/forum/forum.php?thread_id=1315559&forum_id=379297

I think it''s all working towards more compatibility.

Thomas

Am 09.07.2005 um 03:26 schrieb Chih-Chao Lam:
> Hi Thomas,
>
> Thanks for your informative response.
>
> I think the way prototype.js extends (no pun intended) the Object  
> class is way cool, but I''m worried about existing and future  
> compatibility, especially since prototype.js is meant to be a  
> library used by many apps, and thus need to co-exist with many  
> other code bases.
>
> The real problem lies in the fact that Javascript doesn''t allow
for
> non-enumerable user-defined properties. But by extending Object,  
> this not only causes a problem with the for/in loop for Arrays, but  
> it also causes unexpected behavior for Objects used as associated  
> arrays or HashMaps. We use this quite extensively in our Javascript  
> code. It''s kind of weird that the extend function copies the
extend
> property, every-time the Object.extend() function is invoked.
>
> Can you think of ways we could continue to use Object''s as
HashMaps
> while still co-existing with prototype.js?
>
> Alternatively, do you think Sam and others would mind if we  
> modified prototype.js to better co-exist with existing Javascript  
> code?
>
> Thanks a lot!
> chao
>
> On Jul 8, 2005, at 2:13 PM, Thomas Fuchs wrote:
>
>
>> With prototype is probably a bad idea to iterate through an Array  
>> with for/in.
>>
>> for(var i=0;i<anArray.length;i++) {
>>     /* do something with anArray[i]  */
>> }
>>
>> should do fine. There might be addtional additions (whew) to  
>> Object (and thus Array) and to other basic js object itself
>> in the future, i guess. sam stephenson, the author of  
>> prototype.js, is currently working on some nice stuff, i hear.
>>
>> One example is a .inspect() function:
>>
>> Object.prototype.inspect = function(){
>>   var info = [];
>>   for(property in this)
>>     if(typeof this[property]!="function")
>>       info.push(property + '' => "'' +
this[property] + ''"'');
>>   return ("''" + this + "'' #" +
typeof this +
>>     ": {" + info.join(", ") + "}");
>> }
>>
>> will allow you to get info on any js object by doing something  
>> like alert(myObject.inspect())
>>
>> Currently prototype adds functions to Array (push), Function  
>> (apply,bind,bindAsEventListener) and String (stripTags,  
>> escapeHTML, unescapeHTML) to make life easier and cut down on code  
>> size and repetitions.
>>
>> --
>> Thomas
>>
>> Am 08.07.2005 um 21:39 schrieb Chih-Chao Lam:
>>
>>
>>
>>> Hi,
>>>
>>> I''m new to this mailing list, so first off, a big THANK
YOU for
>>> the script.aculo.us and prototype.js libraries.
>>>
>>> I''m trying to integrate script.aculo.us into an existing
pretty
>>> large Javascript codebase (see http://openrecord.org). I''m
>>> running into a problem with prototype.js and the existing  
>>> codebase''s use of for/in loops over an Array.
>>>
>>> prototype.js defines Object.prototype.extend as a function. I  
>>> believe this causes a problem when I do a "for/in" loop
on an
>>> array e.g.
>>>
>>> var anArray = [1,2,3]
>>>  for (var key in anArray) {/*do some stuff */}
>>>
>>> Above code snippet doesn''t quite work, because var key
gets set
>>> to "0", "1", "2" and then
"extend" in one of the loop traversal.
>>> I believe that''s because prototype.js defines  
>>> object.prototype.extend as a function.
>>>
>>> Is this a known problem? Are there workarounds?
>>>
>>> Is the use of for/in loop traversal over an Array considered  
>>> verboten?
>>>
>>> Also, looking at prototype.js. In the Object.extend() function,  
>>> should the variable "prototype" be declared as a local
variable
>>> rather than a global?
>>>
>>> Thanks a lot!
>>> Chao Lam
>>>
>>> _______________________________________________
>>> Rails-spinoffs mailing list
>>> Rails-spinoffs@lists.rubyonrails.org
>>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>>
>>>
>>>
>>
>>
>>
>
>

Hi Thomas,

Thanks for the link. Glad to know other people are encountering the  
issue and we''re working towards more compatbility.

I''m going to try to use Object.extend() instead of  
Object.prototype.extend() in the prototype.js and script.aculo.us  
libraries and see if I can get script.aculo.us up and running on  
OpenRecord, just as an experiment to see how to integrate the two  
projects.

I''ll let you know how it goes.

Thanks,
chao


On Jul 9, 2005, at 1:08 AM, Thomas Fuchs wrote:
>
> Hi,
>
> There some additional discussion on this going on here:
> http://sourceforge.net/forum/forum.php? 
> thread_id=1315559&forum_id=379297
>
> I think it''s all working towards more compatibility.
>
> Thomas
>
> Am 09.07.2005 um 03:26 schrieb Chih-Chao Lam:
>
>
>> Hi Thomas,
>>
>> Thanks for your informative response.
>>
>> I think the way prototype.js extends (no pun intended) the Object  
>> class is way cool, but I''m worried about existing and future  
>> compatibility, especially since prototype.js is meant to be a  
>> library used by many apps, and thus need to co-exist with many  
>> other code bases.
>>
>> The real problem lies in the fact that Javascript doesn''t
allow
>> for non-enumerable user-defined properties. But by extending  
>> Object, this not only causes a problem with the for/in loop for  
>> Arrays, but it also causes unexpected behavior for Objects used as  
>> associated arrays or HashMaps. We use this quite extensively in  
>> our Javascript code. It''s kind of weird that the extend
function
>> copies the extend property, every-time the Object.extend()  
>> function is invoked.
>>
>> Can you think of ways we could continue to use Object''s as  
>> HashMaps while still co-existing with prototype.js?
>>
>> Alternatively, do you think Sam and others would mind if we  
>> modified prototype.js to better co-exist with existing Javascript  
>> code?
>>
>> Thanks a lot!
>> chao
>>
>> On Jul 8, 2005, at 2:13 PM, Thomas Fuchs wrote:
>>
>>
>>
>>> With prototype is probably a bad idea to iterate through an Array  
>>> with for/in.
>>>
>>> for(var i=0;i<anArray.length;i++) {
>>>     /* do something with anArray[i]  */
>>> }
>>>
>>> should do fine. There might be addtional additions (whew) to  
>>> Object (and thus Array) and to other basic js object itself
>>> in the future, i guess. sam stephenson, the author of  
>>> prototype.js, is currently working on some nice stuff, i hear.
>>>
>>> One example is a .inspect() function:
>>>
>>> Object.prototype.inspect = function(){
>>>   var info = [];
>>>   for(property in this)
>>>     if(typeof this[property]!="function")
>>>       info.push(property + '' => "'' +
this[property] + ''"'');
>>>   return ("''" + this + "'' #"
+ typeof this +
>>>     ": {" + info.join(", ") + "}");
>>> }
>>>
>>> will allow you to get info on any js object by doing something  
>>> like alert(myObject.inspect())
>>>
>>> Currently prototype adds functions to Array (push), Function  
>>> (apply,bind,bindAsEventListener) and String (stripTags,  
>>> escapeHTML, unescapeHTML) to make life easier and cut down on  
>>> code size and repetitions.
>>>
>>> --
>>> Thomas
>>>
>>> Am 08.07.2005 um 21:39 schrieb Chih-Chao Lam:
>>>
>>>
>>>
>>>
>>>> Hi,
>>>>
>>>> I''m new to this mailing list, so first off, a big
THANK YOU for
>>>> the script.aculo.us and prototype.js libraries.
>>>>
>>>> I''m trying to integrate script.aculo.us into an
existing pretty
>>>> large Javascript codebase (see http://openrecord.org).
I''m
>>>> running into a problem with prototype.js and the existing  
>>>> codebase''s use of for/in loops over an Array.
>>>>
>>>> prototype.js defines Object.prototype.extend as a function. I  
>>>> believe this causes a problem when I do a "for/in"
loop on an
>>>> array e.g.
>>>>
>>>> var anArray = [1,2,3]
>>>>  for (var key in anArray) {/*do some stuff */}
>>>>
>>>> Above code snippet doesn''t quite work, because var key
gets set
>>>> to "0", "1", "2" and then
"extend" in one of the loop traversal.
>>>> I believe that''s because prototype.js defines  
>>>> object.prototype.extend as a function.
>>>>
>>>> Is this a known problem? Are there workarounds?
>>>>
>>>> Is the use of for/in loop traversal over an Array considered  
>>>> verboten?
>>>>
>>>> Also, looking at prototype.js. In the Object.extend() function,
>>>> should the variable "prototype" be declared as a
local variable
>>>> rather than a global?
>>>>
>>>> Thanks a lot!
>>>> Chao Lam
>>>>
>>>> _______________________________________________
>>>> Rails-spinoffs mailing list
>>>> Rails-spinoffs@lists.rubyonrails.org
>>>> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>>>>
>>>>
>>>>
>>>>
>>>
>>>
>>>
>>>
>>
>>
>>
>
>

> Also, looking at prototype.js. In the Object.extend() function,  
> should the variable "prototype" be declared as a local variable  
> rather than a global?
>
Oops, I meant variable "property" is a global variable in  
Object.extend().

chao