RequireJS

Problem

<!-- common -->
<script src="~/jquery-1.8.2.min.js"></script>
<script src="~/jquery-ui-1.11.4.min.js"></script>
<script src="~/jquery.easing.min.js"></script>
<script src="~/jquery.equalHeights.js"></script>
<script src="~/jquery.cookie.js"></script>
<script src="~/common.js"></script>
<script src="~/jquery.tabSlideOut.v1.3.js"></script>
<script src="~/SearchCompleteV2.js"></script>
<script src="~/aonline-livechat-global.js"></script>
<script src="~/AdvTrack.js"></script>
<script src="~/GoogleAdwords/ad.js"></script>

<!-- project -->
<script src="~/jquery.masonry.min.js"></script>
<script src="~/jsrender.min.js"></script>
<script src="~/underscore-min.js"></script>
<script src="~/es5-shim.min.js"></script>
<script src="~/success-stories.js"></script>

var mySum = function(a, b) {

      return a + b;

  };
<script src="mySum.js">
<script>

    var result = mySum(2, 3);

</script>
  • mySum.js

in HTML

Problem

Traditional JS dependency pattern... Global Variable

require() / exports()


var mySum = require('./mySum.js');

var result = mySum(2, 3);

// result => 5
var mySum = function(a, b) {

      return a + b;

  };

module.exports = mySum;
  • mySum.js
  • main.js
> browserify main.js > bundle.js

Before

<script src="mySum.js" />
<script>

    var result = mySum(2, 3);

</script>

<script src="bundle.js" />

After

Node.js ( require, export )

Browserify

  • one huge js-file.
  • compile every time.
  • a little complex for debug

Can we using module pattern
with out Node.js ?

RequireJS

http://requirejs.org/

Node.js

Require.js


  require( )

  requirejs([ ], function() {

  });

  module.exports

  define([ ], function() {

  });

Quick Compare

Node.js

Require.js


var foo = require('foo');

    // code here

requirejs(["foo"], function(foo) {

    // code here

});

var foo = function() {
    // some process
  };

module.exports = foo;

define(function() {

    var foo = function() {
        // some process
    };

    return foo;
});

foo.js

foo.js


var $ = require('jquery');
var sum = require('./Sum.js');

var result = sum(1, 2);

requirejs(["jquery","Sum"], function($, sum) {

    var result = sum(1, 2);

});

Node.js + Browserify

Require.js


var Sum = function(a, b) {
      return a + b;
  };

module.exports = Sum;
define(function() {

    var Sum = function(a, b) {
        return a + b;
    };

    return Sum;
});

main.js

main.js

Sum.js

Sum.js

> browserify main.js > bundle.js
<script src="bundle.js"></script>

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

Comparision

  • CommonJS
  • AMD
    ( part of CommonJS )
  • Sync
  • Frontend
    by using require.js library
  • Backend
    compile to use
  • Async

1. file stucture

Discussion

  • src and pub
  • js

2. How to use third-party js-plugin

  • shim
  • shim

3. package-manager

  • npm
  • No ( Bower recommend)

Discussion

  1. Most package do not support AMD,
    we need to     shim every time. 
     
  2. Sometimes async JS is hard to debug. 

Thank you !!

require(['mySum','jquery'], function(sum, $) {
	
  console.log('result', sum(1,2));
  $('#myDiv').text('hello Jayson');

});

Require.js

define(function() {

    var Sum = function(a, b) {
        return a + b;
    };

    return Sum;
});

main.js

Sum.js

<html>
  <head>
    <title>demo</title>
      <script data-main="js/main" 
                    src="js/require.js"></script>
  </head>
  <body>
    <div id="myDiv">hello world</div>
  </body>
</html>
require(['jquery'], function($) {
	
  $('#myDiv').click(function(){
		
    require(['mySum'], function(sum){
      var result = sum(1 ,2);
      $('#myDiv').text('result is '+ result );
    });
		
  });

});

Require.js

define(function() {

    var Sum = function(a, b) {
        return a + b;
    };

    return Sum;
});

main.js

Sum.js

<html>
  <head>
    <title>demo</title>
      <script data-main="js/main" 
                    src="js/require.js"></script>
  </head>
  <body>
    <div id="myDiv">hello world</div>
  </body>
</html>

CommonJS

AMD


var mySum = require('./mySum.js');

var result = mySum(2, 3);
  • main.js
var mySum = function(a, b) {
      return a + b;
  };

module.exports = mySum;
  • mySum.js
> browserify main.js > bundle.js
<script src="bundle.js">
var mySum = function(a, b) {
      return a + b;
  };

module.exports = mySum;
Made with Slides.com