-
Notifications
You must be signed in to change notification settings - Fork 1
/
javascript-modules
258 lines (169 loc) · 8.71 KB
/
javascript-modules
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
Javascript Module system
// References
https://auth0.com/blog/javascript-module-systems-showdown/
**********************************************************************************************************8
Initial Problem: At the moment that other piece of software is brought into the project a dependency is created between it and the new piece of code.
Since these pieces of software need to work together, it is of importance that no conflicts arise between them.
This may sound trivial, but without some sort of encapsulation it is a matter of time before two modules conflict with each other
Solution: Encapsulation is essential to prevent conflicts and ease development.
An Ad-Hoc Solution: The Revealing Module Pattern
var myRevealingModule = (function () {
var privateVar = "Ben Cherry",
publicVar = "Hey there!";
function privateFunction() {
console.log( "Name:" + privateVar );
}
return {
setName: publicSetName
}
);
Cons:
No way to programmatically import modules (except by using eval).
Dependencies need to be handled manually.
Asynchronous loading of modules is not possible.
Circular dependencies can be troublesome.
Hard to analyze for static code analyzers.
----------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
CommonJS:
1) require: require is a function that can be used to import symbols from another module to the current scope.
The parameter passed to require is the id of the module.
2) exports: exports is a special object: anything put in it will get exported as a public element. Names for fields are preserved.
// In circle.js
const PI = Math.PI;
exports.area = (r) => PI * r * r;
exports.circumference = (r) => 2 * PI * r;
// In some other file
const circle = require('./circle.js');
console.log( `The area of a circle of radius 4 is ${circle.area(4)}`);
CommonJS modules were designed with server development in mind.
Naturally, the API is synchronous. In other words, modules are loaded at the moment and in the order they are required inside a source file.
Pros
Simple: a developer can grasp the concept without looking at the docs.
Dependency management is integrated: modules require other modules and get loaded in the needed order.
require can be called anywhere: modules can be loaded programmatically.
Circular dependencies are supported.
Cons
Synchronous API makes it not suitable for certain uses (client-side).
One file per module.
Browsers require a loader library or transpiling.
No constructor function for modules (Node supports this though).
Hard to analyze for static code analyzers.
----------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
Asynchronous Module Definition (AMD)
The main difference between AMD and CommonJS lies in its support for asynchronous module loading.
define(['module1', ',module2'], function(module1, module2) {
console.log(module1.setName());
});
The function is called only when the requested modules are finished loading.
The define function takes the first argument as an array of dependency modules.
These modules are loaded in a non-blocking manner in the background and once the loading is completed, the callback function is executed.
It is designed to be used in browsers for better startup times and these modules can be objects, functions, constructors, strings, JSON, etc
Pros
Asynchronous loading (better startup times).
Circular dependencies are supported.
Compatibility for require and exports.
Dependency management fully integrated.
Modules can be split in multiple files if necessary.
Constructor functions are supported.
Plugin support (custom loading steps).
Cons
Slightly more complex syntactically.
Loader libraries are required unless transpiled.
Hard to analyze for static code analyzers.
----------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
RequireJS:
RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming.
It also helps to improve the speed and quality of the code.
Features of RequireJS
It manages the dependencies between JavaScript files and improves the speed and quality of the code.
It combines and minifies the modules into one script for an optimized experience.
It reduces code complexity in large applications.
It gathers different JavaScript files from different modules at the time of compilation.
It allows for easy debugging as it loads the files from plain script tags.
Download requirejs file & need to include the require.js file in your libs folder
|--libs/
|---main.js
|---require.js
|---helper/
|----util.js
<head>
<script data-main="libs/main" src="libs/require.js"></script>
</head>
// main.js
define(function (require) {
var myteam = require("./team");
var mylogger = require("./player");
alert("Player Name : " + myteam.player);
mylogger.myfunc();
});
// team.js
define({
player: "Sachin Tendulkar",
team : "India"
});
// player.js
define(function (require) {
var myteam = require("./team");
return {
myfunc: function () {
document.write("Name: " + myteam.player + ", Country: " + myteam.team);
}
};
});
----------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
ES2015 Modules:
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
import:
The import directive can be used to bring modules into the namespace.
export:
The export directive, on the other hand, can be used to explicitly make elements public.
Pros
Synchronous and asynchronous loading supported.
Syntactically simple.
Support for static analysis tools.
Integrated in the language (eventually supported everywhere, no need for libraries).
Circular dependencies supported.
Cons
Still not supported everywhere.
----------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
SystemJS:
Universal dynamic module loader
Load scrip ondemand
<script src="System.js"></script>
<script>
SystemJS.import('Customer.js').then(function () {
const cust = new Customer();
})
</script>
Advantage:
Less memory footprint
Increase application performance
----------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------
CSSOM: CSS Object Model
The term CSS Object Model describes a map of all CSS selectors & relevant properties for each selector.
These styles can be root elements or have nested children.
It’s the map used by the browser to properly render CSS styles on a web page.
There’s no easy way to tell a computer that all paragraphs in a .main-content div must have extra line-height.
In both the DOM & CSSOM, all information is converted from bytes into digital maps that render every element in a web document.
The process works as follows:
1. The browser downloads the HTML for a web page.
2. While processing the HTML, the parser may bump into a link element referencing an external stylesheet.
3. This CSS stylesheet is then parsed into a map using the CSS Object Model specs.
4. The resulting code can then be applied to elements in the DOM.