Question

EDIT: I’ve taken jQuery and prototype libs out of the equation, but the problem still remains.

Simplified Test Case 1 – Without Concatenation
The $ function is decalared using window.$ in a.js, and is declared in function notation in b.js. b.js is loaded second, and overwrites a.js $ function

Simplified Test Case 2 – WIth Concatenation
Combined a.js and b.js, with a first, and b second. the function declaration

---

I found something strange when trying to concatenate prototype and jQuery. It seems as though when concatenated, the $ jquery reference doesn’t get overwritten by prototype. I’ve built two test cases to single this out, and it’s failing in Chrome8 and FF 3.6.

Test Case 1 – Without Concatenation
jQuery and Prototype are loaded separately with different script tags. jQuery is loaded first, Prototype second.

Test Case 2 – With Concatenation
jQuery and Prototype are concatenated into a single file, and loaded with a single script tag. jQuery is first in the script, and prototype is added second.

These should act identically, but the second test is throwing errors because the $ function in prototype doesn’t overwrite the $ jquery reference.

Did I set these up wrong, or are browsers rendering javascript differently when it’s all in the same file?

Answer 1

The $ function in Prototype is instantiated with a function declaration:

function $(element) {

Since the Prototype library is not in a closure, the assumed scope is the window. Variable and function declarations are hoisted to the top of the scope, so “function $” is declared, and then the $ variable is overwritten by jQuery.

Here’s a fiddle: http://jsfiddle.net/psC7s/