jbiason
/
Presentations
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

completed the noconflict presentation

master
Julio Biason 10 years ago
parent
1c0f3876e2
commit
5a5b004011
1 changed files with 77 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 114
      noconflict.html

114
noconflict.html
Unescape View File

@ -126,10 +126,7 @@ function getVersion(variable) {
<section> <section>
<div style='font-size:150%'> <div style='font-size:150%'>
<pre><code class='javascript' data-trim> <pre><code class='javascript' data-trim>
<script src='jquery.min.js'></script> $.noConflict();
<script>
$.noConflict();
</script>
</code></pre> </code></pre>
</div> </div>
@ -158,20 +155,20 @@ function getVersion(variable) {
</script> </script>
<pre><code class='javascript' data-trim> <pre><code class='javascript' data-trim>
<p class='first'> &lt;p class='first'&gt;
$.fn.jquery: <span id='ex-1-1'></span> $.fn.jquery: &lt;span id='ex-1-1'&gt;&lt;/span&gt;
</p> &lt;/p&gt;
<p class='second'> &lt;p class='second'&gt;
jQuery.fn.jquery: <span id='ex-1-2'></span> jQuery.fn.jquery: &lt;span id='ex-1-2'&gt;&lt;/span&gt;
</p> &lt;/p&gt;
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script> &lt;script src='http://code.jquery.com/jquery-1.11.1.min.js'&gt;&lt;/script&gt;
<script>$.noConflict();</script> &lt;script&gt;$.noConflict();&lt;/script&gt;
<script> &lt;script&gt;
document.getElementById('ex-1-1').innerHTML = getVersion($); document.getElementById('ex-1-1').innerHTML = getVersion($);
document.getElementById('ex-1-2').innerHTML = getVersion(jQuery); document.getElementById('ex-1-2').innerHTML = getVersion(jQuery);
</script> &lt;/script&gt;
</code></pre> </code></pre>
</section> </section>
@ -217,18 +214,18 @@ function getVersion(variable) {
</script> </script>
<pre><code class='html' data-trim> <pre><code class='html' data-trim>
<p class='first'>$.fn.jquery: <span id='ex-2-1'></span></p> &lt;p class='first'&gt;$.fn.jquery: &lt;span id='ex-2-1'&gt;&lt;/span&gt;&lt;/p&gt;
<p class='second'>jquery.fn.jquery: <span id='ex-2-2'></span></p> &lt;p class='second'&gt;jquery.fn.jquery: &lt;span id='ex-2-2'&gt;&lt;/span&gt;&lt;/p&gt;
<p class='third'>novojQuery.fn.jquery: <span id='ex-2-3'></span></p> &lt;p class='third'&gt;novojQuery.fn.jquery: &lt;span id='ex-2-3'&gt;&lt;/span&gt;&lt;/p&gt;
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script> &lt;script src='http://code.jquery.com/jquery-1.11.1.min.js'&gt;&lt;/script&gt;
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script> &lt;script src='http://code.jquery.com/jquery-2.1.1.min.js'&gt;&lt;/script&gt;
<script> &lt;script&gt;
var novojQuery = $.noConflict(); var novojQuery = $.noConflict();
document.getElementById('ex-2-1').innerHTML = getVersion($); document.getElementById('ex-2-1').innerHTML = getVersion($);
document.getElementById('ex-2-2').innerHTML = getVersion(jQuery); document.getElementById('ex-2-2').innerHTML = getVersion(jQuery);
document.getElementById('ex-2-3').innerHTML = getVersion(novojQuery); document.getElementById('ex-2-3').innerHTML = getVersion(novojQuery);
</script> &lt;/script&gt;
</code></pre> </code></pre>
</section> </section>
@ -236,37 +233,80 @@ function getVersion(variable) {
<section> <section>
<div style='font-size:150%'> <div style='font-size:150%'>
<pre><code class='javascript' data-trim> <pre><code class='javascript' data-trim>
<script src='jquery.min.js'></script> <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script> <script>
$.noConflict(); $.noConflict();
jQuery(document).ready(function ($) { (function ($) {
// jQuery está disponível aqui como "$"; // jQuery está disponível como "$"
}); })(jQuery));
// outra biblioteca disponível como "$" aqui.
</script> </script>
</code></pre> </code></pre>
</div> </div>
<ul> <ul>
<li>jQuery aparece como "<code>$</code>" apenas <li>Na verdade, cria uma função anônima que recebe
dentro da função.</li> o parâmetro "<code>$</code>" e chama esta função
passando o jQuery.</li>
<li>O resultado é que, dentro da função, o jQuery parece
ser o mesmo velho jQuery de sempre.</li>
</ul> </ul>
</section> </section>
<section> <section>
<p class='first'>$.fn.jquery: <span id='ex-3-1'></span></p>
<p class='second'>function ($): <span id='ex-3-2'></span></p>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script> <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/jquery-2.1.1.min.js'></script> <script src='http://code.jquery.com/jquery-2.1.1.min.js'></script>
<script>
$.noConflict();
(function ($) {
document.getElementById('ex-3-2').innerHTML = getVersion($);
})(jQuery);
document.getElementById('ex-3-1').innerHTML = getVersion($);
</script>
<p class='first'> <pre><code class='html' data-trim>
$.fn.jquery: <script>document.write($.fn.jquery);</script> &lt;p class='first'&gt;$.fn.jquery: &lt;span id='ex-3-1'&gt;&lt;/span&gt;&lt;/p&gt;
</p> &lt;p class='second'&gt;function ($): &lt;span id='ex-3-2'&gt;&lt;/span&gt;&lt;/p&gt;
<p class='second'>
</p>
<pre><code class='javascript' data-trim> &lt;script src='http://code.jquery.com/jquery-1.11.1.min.js'&gt;&lt;/script&gt;
&lt;script src='http://code.jquery.com/jquery-2.1.1.min.js'&gt;&lt;/script&gt;
&lt;script&gt;
$.noConflict();
(function ($) {
document.getElementById('ex-3-2').innerHTML = getVersion($);
})(jQuery);
document.getElementById('ex-3-1').innerHTML = getVersion($);
&lt;/script&gt;
</code></pre> </code></pre>
</section> </section>
<section>
<div style='font-size:150%'>
<pre><code class='javascript' data-trim>
&lt;script src='http://code.jquery.com/jquery-1.11.1.min.js'&gt;&lt;/script&gt;
&lt;script src='http://code.jquery.com/jquery-2.1.1.min.js'&gt;&lt;/script&gt;
&lt;script&gt;
$.noConflict();
jQuery(document).ready(function ($) {
// jQuery está disponível aqui como "$";
});
// outra biblioteca disponível como "$" aqui.
&lt;/script&gt;
</code></pre>
</div>
<ul>
<li>jQuery aparece como "<code>$</code>" apenas
dentro da função.</li>
</ul>
</section>
</section>
<section data-background='_images/thats-all-folks.jpg'>
<section></section>
</section> </section>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save