-
Notifications
You must be signed in to change notification settings - Fork 0
/
examples.html
159 lines (138 loc) · 5.79 KB
/
examples.html
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
<!DOCTYPE html>
<!--
/*
* R.js, ultra-light solution to dependencies management.
* https://github.com/RobertoPrevato/R.js
*
* Copyright 2017, Roberto Prevato
* https://robertoprevato.github.io
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
-->
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>R.js</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="ultra-light solution to dependencies management" />
<meta name="copyright" content="Copyright 2017 Roberto Prevato roberto.prevato@gmail.com" />
<!-- Bootstrap styles -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- Highlight.js styles -->
<link rel="stylesheet" href="styles/monokai.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="styles/styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<header>
<h1 class="title">R.js</h1>
<h3>ultralight solution to dependencies management, freely inspired by RequireJs and Angular dependency injection mechanism.</h3>
</header>
<div id="main">
<hr />
<ul class="nav nav-tabs">
<li role="presentation"><a href="index.html">Home</a>
<li role="presentation" class="active"><a href="examples.html">Examples</a></li>
</ul>
<div id="examples">
<ol class="links">
<li><a href="#hello-world">Hello World.</a></li>
<li><a href="#asynchronous-def">Asynchronous definition.</a></li>
<li><a href="#just-functions">Just functions.</a></li>
<li><a href="#/robscure">Keys obfuscation with robscure.</a></li>
</ol>
<h3 id="hello-world">Hello World.</h3>
<pre><code class="js">
//defines HelloWorld; its dependencies are: "Hello" and "World"; gets resolved when both "Hello" and "World" becomes defined.
R("HelloWorld", ["Hello", "World"], function (Hello, World) {
return Hello + " " + World;
});
//defines Hello
R("Hello", [], function () {
return "Hello";
});
//defines World
R("World", [], function () {
return "World";
});
</code></pre>
<h3 id="asynchronous-def">Asynchronous definition.</h3>
<pre><code class="js">
//defines "SomeModule", its dependency is "LateModule"; gets resolved when "LateModule" becomes defined
R("SomeModule", ["LateModule"], function (LateModule) {
//this function is called when the "LateModule" becomes available
//for example, this may happen when loading dynamically JavaScript with an AJAX call
console.log("LateModule was resolved!");
return "";
});
window.setTimeout(function () {
//defines "LateModule" after 5 seconds
R("LateModule", [], function () {
return "foo";
});
}, 5e3);
</code></pre>
<h3 id="just-functions">Just functions.</h3>
<pre><code class="js">
+function () {
var k;
//"Qualcosa" doesn't return anything, but depends upon "Something", therefore its function is called after "Something" function.
R("Qualcosa", ["Something"], function () {
//gets fired after "Something" function
console.log("@", k);
});
//defines "Something": its function does not return anything; but interacts with external variable "k"
R("Something", [], function () {
k = 30;
});
}();
</code></pre>
<h3 id="robscure">Keys obfuscation with robscure.</h3>
<p>If you desire, you can obfuscate the keys defined using R.js, to make your code even smaller and more secret.</p>
<p>Follow the instructions described here <a href="https://www.npmjs.com/package/robscure">robscure</a>.</p>
<pre><code class="js">
//in your GruntFile, define a configuration element for robscure, defining the areas files (it is recommended to use minified files)
grunt.initConfig({
robscure: {
website: {
// these are all the built or minified files of all areas: the task will look for each
// for each file, a new file will be generated, with obfuscated module names
areas: [
"../scripts/main.min.js",
"../scripts/area-one.min.js",
"../scripts/area-two.min.js",
"../scripts/area-three.min.js"
]
}
}
});
//************************************************************************************************
//after obfuscation of keys, the keys get converted from:
R("model",["extend","events"],function(a,b){var c=function(a,b){b&&_.extend...
//to... (something like)
R("♠",["♫","♦"],function(a,b){var c=function(a,b){b&&_.extend...
</code></pre>
</div>
</div>
<hr />
<footer>
<ol>
<li><a href="https://github.com/RobertoPrevato/R.js">Source code</a></li>
<li>Demo built using <a href="https://highlightjs.org/">highlight.js</a>; <a href="http://getbootstrap.com/">Bootstrap</a> and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
<li>External libraries in this page are loaded using <a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a>; if the connection is not stable this demo could stop working.</li>
</ol>
<hr />
<h6><a href="mailto:roberto.prevato@gmail.com">Roberto Prevato</a></h6>
</footer>
<script src="scripts/libs/r.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
</body>
</html>