Javascript i bygget

JavaScript Sabotage

(Themes: default beige moon night serif simple sky solarized )

</small>

Problemet

<span class="nt"><html></span>
    <span class="nt"><script </span><span class="na">type=</span><span class="s">".."</span> <span class="na">src=</span><span class="s">"/js/jquery.js"</span><span class="nt">></script></span>
    <span class="nt"><script </span><span class="na">type=</span><span class="s">".."</span> <span class="na">src=</span><span class="s">"/js/underscore.js"</span><span class="nt">></script></span>
    <span class="nt"><script </span><span class="na">type=</span><span class="s">".."</span> <span class="na">src=</span><span class="s">"/js/backbone.js"</span><span class="nt">></script></span>
    <span class="nt"><script </span><span class="na">type=</span><span class="s">".."</span> <span class="na">src=</span><span class="s">"/js/my/cart.js"</span><span class="nt">></script></span>
    <span class="nt"><script </span><span class="na">type=</span><span class="s">".."</span> <span class="na">src=</span><span class="s">"/js/my/inventory.js"</span><span class="nt">></script></span>
    <span class="nt"><script </span><span class="na">type=</span><span class="s">".."</span> <span class="na">src=</span><span class="s">"/js/my/store.js"</span><span class="nt">></script></span>
    ..

Optimalisering

<script type="..." src="/js/backbone.js"></script>
<script type="..." src="/js/my/cart.js"></script>
<script type="..." src="/js/my/inventory.js"></script>
<script type="..." src="/js/my/store.js"></script>
...


Federate + Minify

<script type... src="/js/my.min.js"></script>

Require.js - moduler

define()

// i js/my/store.js
define(["my/cart", "my/inventory"],
    function(Cart, Inventory) {

        var Store = function(title) {
          this.title = title;
          this.inventory = new Inventory();
        };
        Store.prototype.getStock = function(){
          return this.inventory.getLength();
        };
        return Store;

    }
);

Fordeler

  • Definer avhengigheter sammen med modulen
  • Ingen endringer i markupen ved optimalisering
  • Maven plugin for optimalisering
  • Importere templates fra eksterne filer

 

Ulemper

  • Et ekstra bibliotek
  • Krever litt konfigurering

Alternativer

Spørsmål?

Confused Lolcat

(Foiler finnes på kjarnet.no/jsibyggetpres.
Laget med reveal.js og markdown.)