（Node.js）S1模块化编程

最新推荐文章于 2024-10-04 15:14:26 发布

Z_cx

最新推荐文章于 2024-10-04 15:14:26 发布

阅读量312

点赞数

分类专栏： # Node.js

本文链接：https://blog.csdn.net/Python1One/article/details/104471504

版权

Node.js 专栏收录该内容

4 篇文章

订阅专栏

初始模块化编程思想

在这里插入图片描述

模块化开发两个特点：

1. 开发效率高，方便代码使用，别人的代码可以直接拿来用，不用重复开发类似功能
2. 维护成本低，软件开发阶段最长的阶段是维护阶段，模块化开发更易维护

非模块开发问题

1. 变量命名易冲突
2. 文件依赖：当一个a文件依赖aaa时aaa放在前面a文件才可工作。

全局函数&对象命名空间

全局函数缺点：

1. 容易造成全局变量的污染
2. 四个方法无明显对应关系

命名空间

//	定义一个a1 变量，在a1变量后追加属性
//	这个函数就叫a1.b1
var a1 = {}
a1.b1=function(x,y){
	return x + y;
}
// 调用
var result = a1.b1(3,5)

//  var a1 = null; 这种会导致a1重新定义

1. 这种方式是缓解了污染问题，并不能解决
2. 解决了命名冲突

函数作用域&维护与扩展

匿名自执行函数

var a1 = (function(){
	function f1(x, y){
		return x + y;
	}
	function f2(x, y){
		return x - y;
	}
	return {
		f1:f1,
		f2:f2
	}
})();
// !!!!!!!!!!!!!注意匿名函数后加 ()!!!!!!!!!

1. return中是键值对，其中键可以随意取，值必须为函数中的函数。
2. 减少命名冲突问题
3. 形成封闭函数作用域，达到私有化目的。

扩展

var a1 =(function(cal){
	cal.mod = function(x, y){
		return x % y;
	}
	return cal;
})(a1 || {})

1. cal是临时的，用来返回用。
2. (a1 || {})是让函数先找a1如果没有就创建新的，有的话就合并。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="x" value="" />
		<select name="" id="opt">
			<option value="0">+</option>
			<option value="1">-</option>
			<option value="2">*</option>
			<option value="3">/</option>
		</select>
		<input type="text" id="y" value="" />
		<button type="button" id="cal">=</button>
		<input type="text" id="result" value="" />
		<script type="text/javascript">
			var a = (function(b){
				function add(x, y){
					return parseInt(x) + parseInt(y);
				}
				function ji(x, y){
					return parseInt(x) - parseInt(y);
				}
				b.ad = add;
				b.jian = ji;
				return b;
			})({}); // 小括号意为执行前面()，
			// 扩展
			var c = (function(a){
				a.cheng = function(x, y){
					return  parseInt(x) * parseInt(y);
				}
				a.chu = function(x, y){
					return  parseInt(x) / parseInt(y);
				}
				return a;
			})(a || {});    //前面()是有参函数，要传参，将d或者{}空传进去
			
			
			
			var ox = document.getElementById("x");
			var oy = document.getElementById("y");
			var oopt = document.getElementById("opt");
			var ocal = document.getElementById("cal");
			var oresult = document.getElementById("result");
			ocal.addEventListener("click", function(){
				var x = ox.value.trim();
				var y = oy.value.trim();
				var opt = oopt.value;
				var result = 0;
				switch(opt){
					case "0":
						result = a.ad(x, y);
						break;
					case "1":
						result = a.jian(x, y);
						break;
					case "2":
						result = a.cheng(x, y);
						break;
					case "3":
						result = a.chu(x, y);
						break;
				}
				oresult.value = result;
				
			})
		</script>

	</body>
</html>

优势

1. 加载时不用考虑顺序
2. 注意：
	1. 表面上下面的a1把上面的覆盖了，在扩展时先查找扩展的对象是否存在
	
	2. 存在：使用存在的；不存在：穿件一个新的