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 => 5var 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
-
Most package do not support AMD,
we need to shim every time.
- 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;RequireJS
By Jayson Chiang
