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.

thus...

to be continued...

exports

By Jayson Chiang

Made with Slides.com

exports

NodeJS basic II - exports

  • 502

More from Jayson Chiang