Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>YUI2 and YUI3 are really very different. As different as plain javascript vs jQuery.</p> <p>Here's an example of setting the background color of all elements of a given class to red to illustrate the difference.</p> <h2>First in YUI2:</h2> <pre><code>&lt;script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-min.js"&gt;&lt;/script&gt; &lt;script src="http://yui.yahooapis.com/2.8.2r1/build/dom/dom-min.js"&gt;&lt;/script&gt; &lt;script&gt; var YDom = YAHOO.util.Dom; YDom.setStyle(YDom.getElementsByClassName('test'),'background-color','red'); &lt;/script&gt; </code></pre> <h2>Now in YUI3:</h2> <pre><code>&lt;script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"&gt;&lt;/script&gt; &lt;script&gt; YUI().use('node',function(Y){ Y.all('.test').setStyle('background-color','red'); }); &lt;/script&gt; </code></pre> <p>Notice the main differences:</p> <ul> <li><p>In YUI2 you include the needed modules yourself using the <code>&lt;script&gt;</code> tag. In YUI3 you only include one script file with the <code>&lt;script&gt;</code> tag and load all the rest using <code>YUI().use</code>. In the example above we use the <code>node</code> module in YUI3. YUI2 does have a module that can do the auto loading but it is a separate module itself and not built-in to the YAHOO global object.</p></li> <li><p>YUI2 is traditional imperative programming: <code>foo(bar())</code> while YUI3 uses chaining.</p></li> <li><p>YUI3 forces you to write all YUI related code inside a function therefore running in its own scope and exposes only the <code>YUI</code> object to the global scope. This is basically ninja mode in other libraries.</p></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload