exports

(module.exports)

review 1.

(1) Server side JavaScript

(2) run on command mode

(3) You need a good Text editor

(1) NodeJS package manager

(2) npm install <package-name>

 > npm install jquery

review 2.

    var $ = require('jquery');

    $.ajax({
        url:'/myapi',
        method:'GET'
    }).success(functon(data){
        // do somthing ...
    });

var foo = require('package-name');

the way to using NodeJS package in JS file.

review 3.

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


  $.ajax({
      url:'/myapi',
      method:'GET'
  }).success(functon(data) {
      
  });


<scirpt src="js/jquery.js">

<script>
    $.ajax({
        url:'/myapi',
        method:'GET'
    }).success(functon(data) {
        
    });
</script>

HTML

Node.js


<scirpt src="js/jquery.js">

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

<script>

 var result = mySum(2, 3);

</script>

HTML

 
  var mySum = function(a, b) {

      return a + b;

  };

mySum.js

// result => 5

 
  var mySum = function(a, b) {

      return a + b;

  };

mySum.js

Node.js

  
var $ = require('jquery');

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

var result = mySum(2, 3);

var result = mySum(2, 3);
             ^
TypeError: object is not a function

 
  var mySum = function(a, b) {

      return a + b;

  };

  module.exports = mySum;

mySum.js

Node.js

  
var $ = require('jquery');

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

var result = mySum(2, 3);

// result => 5

module.exports

Your code uses require to include modules.
Modules use exports to make things available.

Node.JS - a Common.JS Module Implementation

  
  var Sum = function(a, b) {
      return a + b;
  };
  
  var Diff = function(a, b) {
      return a - b;
  };
  
  var myFunc = {};
  myFunc.mySum = Sum;
  myFunc.myDiff = Diff;
  
  module.exports = myFunc;

myFunc.js


var result1 = myFunc.mySum(2, 3); 
// result1 => 5

var result2 = myFunc.myDiff(2, 3); 
// result2 => -1


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

main.js

Module Pattern

CommonJS

AMD

EcmaScript6

(EcmaScirpt2015)

(ES Harmony)

Node.js
back-end

Require.js
front-end

standard
native in browser (not yet)
front-end & back-end

Why module pattern is important ?

JavaScript has no Class (before ES6)

decrease global variables.

dependency is a big problem in front-end.


<scirpt src="js/jquery.js">
<scirpt src="js/jquery-plugin-1.js">
<scirpt src="js/jquery-plugin-2.js">
<scirpt src="js/jquery-plugin-3.js">
<script>

$('#myDiv').jqPlugin3();

</script>

if this code work well...


<scirpt src="js/jquery.js">
<scirpt src="js/jquery-plugin-1.js">
<scirpt src="js/jquery-plugin-2.js">
<scirpt src="js/jquery-plugin-3.js">
<script>

$('#myDiv').jqPlugin3();

</script>

what if jquery.js is missing... or rename...


<scirpt src="js/jquery.js">
<scirpt src="js/jquery-plugin-1.js">
<scirpt src="js/jquery-plugin-2.js">
<scirpt src="js/jquery-plugin-3.js">
<scirpt src="js/jquery-plugin-3.js">
<script>

$('#myDiv').jqPlugin3();

</script>

or missing some dependency plugin.


<scirpt src="js/jquery.js">
<scirpt src="js/jquery-plugin-3.js">
<scirpt src="js/jquery-plugin-1.js">
<scirpt src="js/jquery-plugin-2.js">
<script>

$('#myDiv').jqPlugin3();

</script>

or the dependency ordering is wrong....


<scirpt src="js/jquery.js">
<scirpt src="js/jquery-plugin-3.js">
<scirpt src="js/jquery-plugin-1.js">
<scirpt src="js/jquery-plugin-2.js">
<script src="js/myApp.js>"
<script>

$('#myDiv').jqPlugin3();
$('.foo').myApp();

</script>

or add some custom js-file

 how can I know its dependency?
 rename:jquery-myApp.js
        jquery-pluging-3-myApp.js

var $ = require('jquery');
var jqPlugin3 = require('jquery-plugin-3');
var myApp = require('./myApp.js');

$('#myDiv').jqPlugin3();
$('.foo').myApp();

using module pattern

// jquery-plugin-3

var jqPlugin1 = require('jqPlugin1');
var jqPlugin2 = require('jqPlugin2');

var jqPlugin3 = function() {
     jqPlugin1().doSomething();
     jqPlugin2().doSomething();
}

module.exports = jqPlugin3;

// myApp.js

var $ = require('jquery');

var myApp = function() {
    $().doSomething();
}

module.exports = myApp;

main.js

var $ = require('jquery');
var jqPlugin3 = require('jquery-plugin-3');
var myApp = require('./myApp.js');

$('#myDiv').jqPlugin3();
$('.foo').myApp();

main.js


<scirpt src="js/main.js">

in HTML, we only one JS-file... perfect!!!

How about using it in HTML


<scirpt src="js/jquery.js">
<scirpt src="js/jquery-plugin-1.js">
<scirpt src="js/jquery-plugin-2.js">
<scirpt src="js/jquery-plugin-3.js">
<script src="js/myApp.js>"
<script>

$('#myDiv').jqPlugin3();
$('.foo').myApp();

</script>


<scirpt src="js/main.js">

before

after

HTML got superbly clear !!!

require & exports are part of CommonJS,

it works on Node.js ( back-end )

browser don't support CommonJS module pattern...

But... not work...

(1) using AMD ( Requre.js )

(2) compile CommonJS as front-end JavaScript.

(3) wait for ES6 in browser.