Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 88ef4b2

Browse filesBrowse files
wchaowuwchaowu
committed
add namespace
1 parent 441d59e commit 88ef4b2
Copy full SHA for 88ef4b2

4 files changed

+144-1Lines changed: 144 additions & 1 deletion

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎README.md‎

Copy file name to clipboardExpand all lines: README.md
+2-1Lines changed: 2 additions & 1 deletion
  • Display the source diff
  • Display the rich diff
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 />
Collapse file

‎javascript-based/namespace/README.md‎

Copy file name to clipboard
+17Lines changed: 17 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
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+
Collapse file

‎javascript-based/namespace/namespace.HTML‎

Copy file name to clipboard
+63Lines 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>
Collapse file

‎javascript-based/namespace/namespace1.HTML‎

Copy file name to clipboard
+62Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.