添加 js 变量管理插件

zhiqiang21 · zhiqiang21 · commit 0e7bb8ec215d · 2016-03-29T12:11:30.000+08:00
diff --git a/JsNameSpaceManage/README.md b/JsNameSpaceManage/README.md
@@ -1,3 +1,23 @@
-### JavaScript 命名空间管理 Demo
+## JavaScript 命名空间管理 Demo
 
 ----
+### JavaScript 作用域
+
+因为 JavaScript 的弱语言的特性。只有`function`是唯一具有块级作用域的标识符。
+所以在平时的开发过程中对变量名的管理和对引入的第三方插件的管理，就成为了一个非常重要的工作。
+
+正因为这个原因，催生出了`AMD 规范`，`CMD 规范`，和一些库文件比如：`require.js`等；
+
+
+**这里的这里的 demo 文件主要是通过对象的方式来管理 JavaScript 变量的作用域。
+**
+
+代码运行结束以后，我们可以发现，将位于不同目录下的 js 文件 中包含的方法，管理在一个 js 对象中。
+
+![执行结果](http://ww2.sinaimg.cn/large/698e22a9jw1f2dlm5pqlvj20ku09sgn6.jpg)
+
+
+
+html 文件中这些单独引入的 js文件可以通过使用前端构建工具合并成一个 js 文件。这个 demo 仅仅是用于演示。
+
+![js 文件列表](http://ww2.sinaimg.cn/large/698e22a9jw1f2dlmhovmfj20fg049q44.jpg)
diff --git a/JsNameSpaceManage/demo/js/comfirm.js b/JsNameSpaceManage/demo/js/comfirm.js
@@ -0,0 +1,13 @@
+JSManage.loadPlugin('js.confirm',function($){
+
+	return function(content,conf){
+
+		var that ={};
+		var con=confirm('这个是 confirm 对象');
+        if(con){
+
+        }
+
+		return that;
+	};
+});
diff --git a/JsNameSpaceManage/demo/js/dir1/dir2/alert.js b/JsNameSpaceManage/demo/js/dir1/dir2/alert.js
@@ -0,0 +1,12 @@
+JSManage.loadPlugin('js.dir1.dir2.alert',function($){
+
+	return function(content,conf){
+
+		var that ={};
+		//TODO
+
+        alert('我是 alert对象');
+
+		return that;
+	};
+});
diff --git a/JsNameSpaceManage/demo/js/dir1/dir2/alert2.js b/JsNameSpaceManage/demo/js/dir1/dir2/alert2.js
@@ -0,0 +1,10 @@
+JSManage.loadPlugin('js.dir1.dir2.alert2',function($){
+
+	return function(content,conf){
+
+		var that ={};
+		alert('我是 alert2 对象');
+
+		return that;
+	};
+});
diff --git a/JsNameSpaceManage/demo/test.html b/JsNameSpaceManage/demo/test.html
@@ -1,11 +1,16 @@
 <!DOCTYPE html>
-<html >
+<html>
+
 <head>
     <meta charset="UTF-8">
     <title>测试</title>
 </head>
+
 <body>
- <script src="js/comfirm.js"></script>
- <script src="../js/manage.js"></script>
+    <script src="../js/JSManage.js"></script>
+    <script src="js/comfirm.js"></script>
+    <script src="js/dir1/dir2/alert.js"></script>
+    <script src="js/dir1/dir2/alert2.js"></script>
 </body>
+
 </html>
diff --git a/JsNameSpaceManage/js/JSManage.js b/JsNameSpaceManage/js/JSManage.js
@@ -0,0 +1,68 @@
+
+/**
+ * [管理 JavaScript 中变量的作用域]
+ * @param  {[type]} function( [description]
+ * @return {[type]}           [description]
+ */
+var JSManage = (function() {
+    var that = {};
+    var errorList = [];
+
+    /**
+     * [function 挂载其它目录下的 js 文件]
+     * @param  {[type]} ns    [目录结构]
+     * @param  {[type]} maker [插件的回掉函数]
+     * @return {[type]}       [description]
+     */
+    that.loadPlugin = function(ns, maker) {
+        var NSList = ns.split('.');
+        var step = that;
+        var k = null;
+        while (k = NSList.shift()) {
+            if (NSList.length) {
+                if (step[k] === undefined) {
+                    step[k] = {};
+                }
+                //这里相当于将 step 又指向了
+                step = step[k];
+            } else {
+                if (step[k] === undefined) {
+                    try {
+                        step[k] = maker(that);
+                    } catch (exp) {
+                        errorList.push(exp);
+                    }
+                }
+            }
+        }
+    };
+
+    /**
+     * [function 编写插件过程中让默认参数和自定义参数合并]
+     * @param  {[type]} oSource [默认插件的参数]
+     * @param  {[type]} oParams [自定义配置参数]
+     * @param  {[type]} isown   [是否复制默认参数原型链上的属性和值]
+     * @return {[type]}         [description]
+     */
+    that.parseParam=function(oSource, oParams, isown){
+		var key, obj = {};
+		oParams = oParams || {};
+		for (key in oSource) {
+			obj[key] = oSource[key];
+			if (oParams[key] != null) {
+                //如果为 true 仅仅复制自身，不复制原型链
+				if (isown) {
+					if (oSource.hasOwnProperty[key]) {
+						obj[key] = oParams[key];
+					}
+				}
+				else {
+					obj[key] = oParams[key];
+				}
+			}
+		}
+		return obj;
+	};
+
+    return that;
+})();
diff --git a/JsNameSpaceManage/js/alert.js b/JsNameSpaceManage/js/alert.js
@@ -0,0 +1,31 @@
+JSManage.loadPlugin('js.alert',function($){
+	//插件的 html 模板
+	var TPL = '<div class="plugin">'
+			+ 	'<span>我是模板的内容</span>'
+			+	'<a>确定</a>'
+			+ '</div>';
+
+	/**
+	 * [function 插件的操作方法]
+	 * @param  {[type]} content [插件将要显示的内容]
+	 * @param  {[type]} conf    [插件自定义配置]
+	 * @return {[type]}         [description]
+	 */
+	return function(content,conf){
+		conf = $.parseParam({
+			ok : function(){},         //点击 ok 后 执行的回掉函数
+			title : '提示',
+			content : content || '',
+			okTxt : '确定'
+		}, conf);
+
+		var that ={};
+		//TODO
+		//这里可以根据参数操作 html 模板
+		// var render = $T.compile(TPL);
+        // var html = render(conf);
+
+
+		return that;
+	};
+});
diff --git a/JsNameSpaceManage/js/manage.js b/JsNameSpaceManage/js/manage.js
diff --git a/JsNameSpaceManage/js/other.js b/JsNameSpaceManage/js/other.js
