Javascript i bygget

JavaScript Sabotage

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

</small>

Problemet

<html>
    <script type=".." src="/js/jquery.js"></script>
    <script type=".." src="/js/underscore.js"></script>
    <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>
    ..

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;

    }
);

Require.js - main-script

requirejs()

// i js/main.js
requirejs(['jquery', 'canvas', 'my/store'],
function   ($,        canvas,   Store) {
    var theStore = new Store();
    theStore.init();
});

markup

// i storepage.html
<script src="js/require.js"></script>
<script src="js/main.js"></script>

… eller …

<script src="js/require.js" data-main="js/main.js"></script>

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.)