-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
312 lines (274 loc) · 7.35 KB
/
index.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
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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>namespace</title>
<!-- Date: 2009-12-03 -->
<style type="text/css" media="screen">
body {
text-align:center;
margin:20px 0px;
}
h1 {
font:24px georgia, serif;
text-align: center;
margin:30px 0 10px;
}
h1 em {
font-size:14px;
}
blockquote {
font:18px georgia;
font-style:italic;
}
.contents {
margin: 0 auto;
text-align: left;
width:960px;
}
.example {
float: left;
width: 60px;
width:100%;
}
.example b {
color: #F60;
}
p, ul, hr {
float: left;
margin-left: 90px;
width: 760px;
padding:0px 10px;
}
.left, .right {
float: left;
width: 450px;
padding:10px;
margin: 5px;
background: #EEE;
}
.comments {
font:14px helvetica, arial, "san-serif";
float: left;
width: 940px;
margin: 10px 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="contents">
<h1>Namespace<br/>
<em>an Erlang inspired method for organizing functions</em><br/>
<em>source at <a href="http://github.com/jweir/namespace">Github</a> and <a href="http://jweir.github.com/namespace/test">tests here</a> </em>
</h1>
<p>The purpose of <b>namespace</b> is to provide an organized way to expose public functions without thinking about objects.</p>
<blockquote>
Interesting idea. Can you explain the use case to me? Why would I want to use namespace() instead of something like...
</blockquote>
<div class="exmaple">
<div class="left" style="text-align:center">
<em>Rusty old style</em>
</div>
<div class="left" style="text-align:center">
<em>Namespace style</em>
</div>
</div>
<div class="example">
<div class="left">
<pre><code>
var obj = (function() {
var ret = {};
var private = function() { ... };
ret.public = function() { private(); };
return ret;
})();
</code></pre>
</div>
<div class="right">
<pre><code>
(function(){
namespace("obj", public);
function private(){ ... };
function public(){ private(); };
})();
</code></pre>
</div>
</div>
<p>
There is no difference in the outcome between the above. But there is a difference in style. I find the right to be a bit easier on the eyes.
</p>
<p>
And it is very easy to take a function public.
Here is the above example, with private taken public. Notice how little on the right had to change.
</p>
<div class="example">
<div class="left">
<pre><code>
var obj = (function() {
var ret = {};
<b>ret.</b>private = function() { ... };
ret.public = function() { <b>ret.</b>private(); };
return ret;
})();
</code></pre>
</div>
<div class="right">
<pre><code>
(function(){
namespace("obj", public, <b>private</b>);
function private(){ ... };
function public(){ private(); };
})();
</code></pre>
</div>
</div>
<p>
And when within the closure, or temporary scope, I don't have to think about whether to
prepend `ret` onto a function, unless it from another namespace. I just focus on the functions, not on if they are public or not.
</p>
<div class="example">
<div class="left">
<pre><code>
var another = (function(){
var ret = {};
ret.public = function(){
return obj.public();
}
return ret;
})();
</code></pre>
</div>
<div class="right">
<pre><code>
(function(){
namespace("another", public);
function public(){
return obj.public();
}
})();
</code></pre>
</div>
</div>
<p>
Lets look at a more complex example. When working in the scope I only think about the <em>function</em>, not <em>book_ns + function</em>.
</p>
<div class="example">
<div class="left">
<pre><code>
var book = (function(){
book_ns = {}; // **
book_ns.get_id = function(event){
// return ...
}
book_ns.edit = function(event){
var book = book_ns.get_id(event);
// ...
}
book_ns.move = function(event){
var book = book_ns.get_id(event);
// ...
}
book_ns.destroy = function(event){
var book = book_ns.get_id(event);
// ...
}
return book;
})();
</code></pre>
</div>
<div class="right">
<pre><code>
(function(){
namespace("book", get_id, edit, move, destroy);
function get_id(event){
// return ...
}
function edit(event){
var book = get_id(event);
// ...
}
function move(event){
var book = get_id(event);
// ...
}
function destroy(event){
var book = get_id(event);
// ...
}
})();
</code></pre>
</div>
</div>
<p>
** Notice on the left I use <em>book_ns</em>. If I used <em>book</em> there would be a namespace collision with my local var book. Which maybe the most natural name.
</p>
<p>
You can create nested namespaces, even if the parent does not already exist. In the below <em>foo</em> need not already exist.
<div class="example">
<div class="left">
<pre><code>
var foo = {};
foo.bar = (function() {
var ret = {};
ret.public = function() {};
return ret;
})();
</code></pre>
</div>
<div class="right">
<pre><code>
(function(){
namespace("foo.bar", public);
function public(){};
})();
</code></pre>
</div>
</div>
<p>
So there you have it. I recommend giving it a try, that would be the real test on if it is worthy or not. You may like or you may not.
</p>
<p>
What I like about it is I think in functions, not in objects. Working this way gets me to think about the code in a different manner. This of course is style or fashion, and not right nor wrong. Just perhaps ugly or beautiful, which is in the eye of the beholder.
</p>
<p>
<b>Tested with</b>:
<ul>
<li>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)</li>
<li>Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-us) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9</li>
<li>Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5</li>
<li>JavaScript-C 1.7.0 2007-10-03</li>
</ul>
</p>
<script type="text/javascript">
var disqus_developer = true;
</script>
<hr/>
<p>
<b><em>Questions? Comments?</em></b> Use the below XSS, email me <em>john <span style="display:none">smith</span> at <span style="display:none">mail.</span> smokinggun.com</em> or <a href="http://twitter.com/#!/tweetatweir">Tweet me</a>
</p>
<hr/>
<div class="comments">
<p id="disqus_thread">
<script type="text/javascript" src="http://disqus.com/forums/jweirongithub/embed.js"></script><noscript><a href="http://disqus.com/forums/jweirongithub/?url=ref">View the discussion thread.</a></noscript><a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</p>
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/jweirongithub/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
<br/><br/><br/>
</div>
</div>
</body>
</html>