Skip to content

Commit 88ef4b2

Browse files
wchaowuwchaowu
committed
add namespace
1 parent 441d59e commit 88ef4b2

File tree

4 files changed

+144
-1
lines changed

4 files changed

+144
-1
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
4.
2525
<a href="https://github.com/wchaowu/javascript-code/blob/master/javascript-based/event.html">
2626
JavaScript 事件</a> <br />
27-
5.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/crossDomain.html">javascript 跨域</a> <br />
27+
5.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/crossDomain.html">javascript 跨域</a> <br />
28+
6.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/namespace">javascript 命名空间</a> <br />
2829

2930
<h3 name="OjectOriented">Oject-Oriented</h3>
3031
1.<a href="https://github.com/wchaowu/javascript-code/tree/master/object-oriented/Expressive-JavaScript">JavaScript Expressive </a> <br />

‎javascript-based/namespace/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<h3>javascript命名空间</h3>
2+
----------
3+
几乎所有重要的 Javascript 程序中都会用到命名空间。除非我们只是编写简单的代码，否则尽力确保正确地实现命名空间是很有必要的。这也能避免自己的代码收到第三方代码的污染。本小节将阐述以下设计模式
4+
---------------------------
5+
6+
>单一全局变量
7+
>
8+
>对象序列化的表示
9+
>
10+
>命名空间注入
11+
>
12+
>即时调用的函数表达式
13+
>
14+
>内嵌的命名空间
15+
>
16+
>嵌套空间
17+

‎javascript-based/namespace/namespace.HTML

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html>
3+
<head>
4+
<title> 命名空间的注入 </title>
5+
<meta name="Generator" content="Vbooking System">
6+
<meta name="Author" content="cwwu">
7+
<meta name="Keywords" content="">
8+
<meta name="Description" content="">
9+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10+
</head>
11+
<body>
12+
<script type="text/javascript">
13+
var myApp = myApp || {};
14+
myApp.utils = {};
15+
16+
(function () {
17+
var val = 5;
18+
19+
this.getValue = function () {
20+
return val;
21+
};
22+
23+
this.setValue = function( newVal ) {
24+
val = newVal;
25+
}
26+
27+
// also introduce a new sub-namespace
28+
this.tools = {};
29+
30+
}).apply( myApp.utils );
31+
32+
// inject new behaviour into the tools namespace
33+
// which we defined via the utilities module
34+
35+
(function () {
36+
this.diagnose = function(){
37+
return "diagnosis";
38+
}
39+
}).apply( myApp.utils.tools );
40+
41+
// note, this same approach to extension could be applied
42+
// to a regular IIFE, by just passing in the context as
43+
// an argument and modifying the context rather than just
44+
// "this"
45+
46+
// Usage:
47+
48+
// Outputs our populated namespace
49+
console.log(myApp);
50+
51+
// Outputs: 5
52+
console.log( myApp.utils.getValue());
53+
54+
// Sets the value of `val` and returns it
55+
myApp.utils.setValue( 25 );
56+
console.log(myApp.utils.getValue());
57+
58+
// Testing another level down
59+
console.log( myApp.utils.tools.diagnose() );
60+
</script>
61+
62+
</body>
63+
</html>

‎javascript-based/namespace/namespace1.HTML

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2+
<html>
3+
<head>
4+
<title> 自动嵌套命名空间 </title>
5+
<meta name="Generator" content="Vbooking System">
6+
<meta name="Author" content="">
7+
<meta name="Keywords" content="">
8+
<meta name="Description" content="">
9+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10+
</head>
11+
<body>
12+
单一全局变量
13+
<script type="text/javascript">
14+
var myApplication = (function () {
15+
function(){
16+
//...
17+
},
18+
return{
19+
//...
20+
}
21+
})();
22+
</script>
23+
24+
前缀命名空间
25+
<script type="text/javascript">
26+
var myApplication_propertyA = {};
27+
var myApplication_propertyB = {};
28+
function myApplication_myMethod(){
29+
//...
30+
}
31+
</script>
32+
33+
我们就简单的介绍过IIFE (即时调用的函数表达式) ，它是一个未命名的函数，在它被定义之后就会立即执行。
34+
如果听起来觉得耳熟，是因为你以前遇到过并将它称之为自动生效的（或者自动调用的）匿名函数，然而我个人更认为 Ben Alman的 IIFE 命名更准确。在JavaScript中，因为在一个作用域中显示定义的变量和函数只能在作用域中可见，
35+
函数调用为实现隐私提供了简单的方式。
36+
37+
<script type="text/javascript">
38+
// an (anonymous) immediately-invoked function expression
39+
(function () { /*...*/})();
40+
41+
// a named immediately-invoked function expression
42+
(function foobar () { /*..*/}());
43+
44+
// this is technically a self-executing function which is quite different
45+
function foobar () { foobar(); }
46+
</script>
47+
嵌套命名空间
48+
<script type="text/javascript">
49+
var application = {
50+
utilities:{
51+
drawing:{
52+
canvas:{
53+
2d:{
54+
//...
55+
}
56+
}
57+
}
58+
}
59+
};
60+
</script>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)