Self Directed Assessment and Practice Modules for Youth in Transition
JavaScript Modules in Practice
-
Upload
maghdebura -
Category
Software
-
view
192 -
download
0
description
Transcript of JavaScript Modules in Practice
![Page 1: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/1.jpg)
JavaScript Modules
by Ivan Sirosh
![Page 2: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/2.jpg)
JavaScript module pattern: How to create it and why?
![Page 3: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/3.jpg)
Approach to building large applications
![Page 4: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/4.jpg)
Module pattern requires understanding modules as a
system<!doctype html><html lang="en"> <head> <link rel="stylesheet" href="/public/css/main.css"> </head>
<body> <div id="content"> </div> <script src="/public/js/libs/lib1.js"></script> <script src="/public/js/libs/lib2.js"></script> <script src="/public/js/libs/lib3.js"></script>
<script src="/module1.js"></script> <script src="/module2.js"></script> <script src="/app.js"></script>
</body></html>
![Page 5: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/5.jpg)
This is how it’s usually done
var Module = { a: 1,
b: function() { //do something }};
![Page 6: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/6.jpg)
Correct ****** pattern
(function () {var a = 1;
function b(){//do something
}}());
![Page 7: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/7.jpg)
Import of global variables
(function ($, YUI) {$.each([1,2,3,4,5], function(){
//do something});
var Y = YUI();Y.use('node', function(Y){
//do something});
}(jQuery, YUI));
![Page 8: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/8.jpg)
Import of local variables
(function(awesome) { var a;
awesome.splash(function() { a = 1; });
waterPool.set("new", function() { return a; });
} (waterPool.get("awesome")));
![Page 9: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/9.jpg)
Export of the module
var MODULE = (function () {var my = {},
privateVariable = 1;
function privateMethod() { // do something
}
my.moduleProperty = 1;my.moduleMethod = function () {
// do something};
return my;}());
![Page 10: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/10.jpg)
Module extension if the module doesn't exist
var MODULE = (function (my) {my.anotherMethod = function () {
// do something};
return my;}(MODULE || {}));
![Page 11: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/11.jpg)
We’re done here*
* almost done
![Page 12: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/12.jpg)
Let's look at 3 types of solutions
![Page 13: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/13.jpg)
The bad one
pure JS
var _modules = [];_modules[0] = function(p){
//do something};_modules[1] = [];_modules[1][0] = 1;_modules[0](_modules[1][0]);
![Page 14: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/14.jpg)
The ugly one –Why reinvent the wheel?
pure JS
(function () { var $ = this.jQuery;
this.myExample = function () {};}());
![Page 15: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/15.jpg)
The good one
AMD api
define(['jquery'] , function () { return jQuery;});
require(['jquery'] , function ($) { console.log($.now());});
![Page 16: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/16.jpg)
Require JS
RequireJS is a JavaScript file and module loader. It is
optimized for in-browser use, but it can be used in other
JavaScript environments, like Rhino and Node. Using a
modular script loader like RequireJS will improve the speed
and quality of your code.
IE 6+ .......... compatible ✔Firefox 2+ ..... compatible ✔Safari 3.2+ .... compatible ✔Chrome 3+ ...... compatible ✔Opera 10+ ...... compatible ✔
http://requirejs.org
![Page 17: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/17.jpg)
Almond JS
A replacement AMD loader for RequireJS. It is a smaller "shim"
loader, providing the minimal AMD API footprint that includes
loader plugin support.
What is supported:• dependencies with relative IDs.• define('id', {}) definitions.• define(), require() and requirejs() calls.
https://github.com/jrburke/almond
![Page 18: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/18.jpg)
AMDThe Asynchronous Module Definition
https://github.com/amdjs/amdjs-api/wiki/AMD
define(id, dependencies, factory);
require(dependencies, callback);
![Page 19: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/19.jpg)
define
define('a-module', function () {return 'a-module';
});
define('b-module', function () {return 'b-module';
});
define('c-module', ['a-module', 'b-module'] function (a, b) {return a + ' ' + b + ' ' + 'c-module';
});
![Page 20: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/20.jpg)
require
require(['c-module'], function (c_module) {if(c_module){
console.log(c_module)}
});
a-module b-module c-module
![Page 21: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/21.jpg)
define("alpha", ["require", "exports", "beta"], function(require, exports, beta) { exports.verb = function() { return beta.verb(); //Or: return require("beta").verb(); }});
![Page 22: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/22.jpg)
define(["alpha"], function(alpha) { return { verb: function() { return alpha.verb() + 2; } };});
define({ add: function(x, y) { return x + y; }});
![Page 23: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/23.jpg)
(function(root, factory) { if (typeof define === 'function' && define.amd) { define('my-awesome-module', [], factory); } else { root.MyAwesomeModule = factory(); }}(this, function() { var MyAwesomeModule = function() {};
return new MyAwesomeModule();}));
If AMD JS isn't implemented, modules can look as follows
![Page 24: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/24.jpg)
jQuery example done already in the new version which support
AMD (function(global, factory) { if (typeof module === "object" && typeof module.exports === "object") { module.exports = global.document ? factory(global, true) : function(w) { if (!w.document) { throw new Error("jQuery requires a window with a document"); } return factory(w); }; } else { factory(global); }}(typeof window !== "undefined" ? window : this, function(window, noGlobal) { var jQuery; /*-----------------------------------*/ /* ... /* extend jQuery oject /* ... /*-----------------------------------*/ return jQuery;}));
![Page 25: JavaScript Modules in Practice](https://reader035.fdocuments.in/reader035/viewer/2022081413/54939113b479595b4d8b4899/html5/thumbnails/25.jpg)
Don't reinvent the wheel – just use it smartly ;)
JS Modules