add namespace

Yuanbin-xavier · Oct 12, 2013 · 88ef4b2 · 88ef4b2
1 parent 441d59e
commit 88ef4b2
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -24,7 +24,8 @@
 4.
 <a href="https://github.com/wchaowu/javascript-code/blob/master/javascript-based/event.html">
 JavaScript 事件</a> <br />
-5.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/crossDomain.html">javascript 跨域</a> <br /> 
+5.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/crossDomain.html">javascript 跨域</a> <br /> 
+6.<a href="https://github.com/wchaowu/javascript-code/tree/master/javascript-based/namespace">javascript 命名空间</a> <br /> 
 
 <h3 name="OjectOriented">Oject-Oriented</h3>
 1.<a href="https://github.com/wchaowu/javascript-code/tree/master/object-oriented/Expressive-JavaScript">JavaScript Expressive </a> <br />

diff --git a/javascript-based/namespace/README.md b/javascript-based/namespace/README.md
@@ -0,0 +1,17 @@
+<h3>javascript命名空间</h3>
+----------
+几乎所有重要的 Javascript 程序中都会用到命名空间。除非我们只是编写简单的代码，否则尽力确保正确地实现命名空间是很有必要的。这也能避免自己的代码收到第三方代码的污染。本小节将阐述以下设计模式
+---------------------------
+
+>单一全局变量
+>
+>对象序列化的表示
+>
+>命名空间注入
+>
+>即时调用的函数表达式
+>
+>内嵌的命名空间
+>
+>嵌套空间
+
diff --git a/javascript-based/namespace/namespace.HTML b/javascript-based/namespace/namespace.HTML
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+  <title> 命名空间的注入 </title>
+  <meta name="Generator" content="Vbooking System">
+  <meta name="Author" content="cwwu">
+  <meta name="Keywords" content="">
+  <meta name="Description" content="">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ </head>
+ <body>
+  <script type="text/javascript">
+    var myApp = myApp || {};
+myApp.utils =  {};
+
+(function () {
+  var val = 5;
+
+  this.getValue = function () {
+      return val;
+  };
+
+  this.setValue = function( newVal ) {
+      val = newVal;
+  }
+
+  // also introduce a new sub-namespace
+  this.tools = {};
+
+}).apply( myApp.utils );  
+
+// inject new behaviour into the tools namespace
+// which we defined via the utilities module
+
+(function () {
+    this.diagnose = function(){
+        return "diagnosis";   
+    }
+}).apply( myApp.utils.tools );
+
+// note, this same approach to extension could be applied
+// to a regular IIFE, by just passing in the context as 
+// an argument and modifying the context rather than just
+// "this"
+
+// Usage:
+
+// Outputs our populated namespace
+console.log(myApp);
+
+// Outputs: 5
+console.log( myApp.utils.getValue());
+
+// Sets the value of `val` and returns it
+myApp.utils.setValue( 25 ); 
+console.log(myApp.utils.getValue());
+
+// Testing another level down
+console.log( myApp.utils.tools.diagnose() );
+  </script>  
+
+ </body>
+</html>
diff --git a/javascript-based/namespace/namespace1.HTML b/javascript-based/namespace/namespace1.HTML
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+  <title> 自动嵌套命名空间 </title>
+  <meta name="Generator" content="Vbooking System">
+  <meta name="Author" content="">
+  <meta name="Keywords" content="">
+  <meta name="Description" content="">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ </head>
+ <body>
+ 单一全局变量
+ <script type="text/javascript">
+ var myApplication =  (function () { 
+        function(){
+            //...
+        },
+        return{
+            //...
+        }
+})();
+ </script>
+
+ 前缀命名空间
+ <script type="text/javascript">
+	var myApplication_propertyA = {};
+	var myApplication_propertyB = {};
+	function myApplication_myMethod(){ 
+	  //...
+	}
+ </script>
+
+ 我们就简单的介绍过IIFE (即时调用的函数表达式) ，它是一个未命名的函数，在它被定义之后就会立即执行。
+ 如果听起来觉得耳熟，是因为你以前遇到过并将它称之为自动生效的（或者自动调用的）匿名函数，然而我个人更认为 Ben Alman的 IIFE 命名更准确。在JavaScript中，因为在一个作用域中显示定义的变量和函数只能在作用域中可见，
+ 函数调用为实现隐私提供了简单的方式。
+
+  <script type="text/javascript">
+	  // an (anonymous) immediately-invoked function expression
+	(function () { /*...*/})();
+
+	// a named immediately-invoked function expression
+	(function foobar () { /*..*/}());
+
+	// this is technically a self-executing function which is quite different
+	function foobar () { foobar(); }
+  </script>
+ 嵌套命名空间
+  <script type="text/javascript">
+    var application = {
+      utilities:{
+          drawing:{
+              canvas:{
+                  2d:{
+                          //...
+                  }
+              }
+          }
+    }        
+};
+  </script>  
+ </body>
+</html>