JavaScript模块化编程

丿卡卡

已于 2023-08-24 17:18:14 修改

阅读量36

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言前端框架

于 2023-08-23 10:38:29 首次发布

本文链接：https://blog.csdn.net/Ice_Cream_AF/article/details/132446983

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript模块化编程

一、定义

模块化是一种编程技术，将程序分解为独立的、可重用的模块。模块是一段代码，可以独立地被编写、测试、维护和升级。这种技术可以让程序更易于编写、理解和维护，同时还可以提高代码的复用性和可扩展性。模块化编程是现代软件开发中的一种重要思想，被广泛应用于各种编程语言和平台。(小助手定义)

二、演变

1. 全局函数

所有的变量和函数都暴露在全局，无法保证全局变量不与其他模块的变量发生冲突。另外，全局函数形成的模块成员之间看不出直接关系。

<body>
	<script>
		//定义
		var name;
		function print(arg){console.log(arg)};
		function cleanName(){name='';console.log(name)};
		//操作
		name = '索菲亚';
		print(name);
		cleanName();
	</script>
</body>

2. 对象命名空间

定义一个新的对象，例如：__def, 就会解决了name，print，cleanName 3个函数的命名冲突。但再定义一个名称为_def的命名空间还是会存在冲突，而且对象内部属性可以被外部随意改写。

<body>
	<script>
		//定义
		var _def = {}
		_def.name;
		_def.print = function(arg){console.log(arg)};
		_def.cleanName = function(){name='';console.log(name)};
		//使用
		_def.name = '索菲亚';
		_def.print(_def.name);
		_def.cleanName();
	</script>
</body>

3. 函数作用域（闭包）

利用JavaScript函数作用域的特点，通过匿名自执行函数，进行私有变量隔离。添加返回值后，在全局可以通过“匿名函数.属性/匿名函数.方法()”的方式进行调用。这样有效地公开了公有方法，并且可以隐藏一些私有属性和元素，私有空间的函数和变量也不会影响全局作用域。

<body>
	<script>
		//定义
		var _def = (function(){
			var name;
			var print = function(arg){console.log(arg)};
			var cleanName = function(){name='';console.log(name)};
			return {name:name,print:print,cleanName:cleanName};
		})();
			
		//使用
		_def.name = '索菲亚';
		_def.print(_def.name);
		_def.cleanName();
	</script>
</body>

闭包定义中，返回值说明：

在定义中不添加返回的属性，外部访问不到

比如定义中不返回name属性，只返回print、cleanName函数，return {print:print,cleanName:cleanName};，使用_def.name会输出undefined
返回的属性名可自定义

比如定义的时候return {ns:name,ps:print,cs:cleanName};,其中ns/ps/cs为自定义属性，在使用的过程中只能通过自定义属性_def.ns访问，如直接使用_def.name会输出undefined

4. 扩展

拓展_def函数,为其添加pro方法

<body>
	<script>
		//定义
		var _def = (function($){
			var name;
			var print = function(arg){console.log(arg)};
			var cleanName = function(){$.name='';console.log($.name)}; 
			$.name = name;
			$.print = print;
			$.cleanName = cleanName;
			return $;
		})( _def || {});
        
		//自定义扩展
		var _defpro = (function($){
			$.pro = function(){
				$.name += 'pro';
				console.log($.name);
			}
			return $;
		})(_def || {})
		
        //使用
		_def.name='索菲亚';
		_def.print(_defpro.name);//输出 索菲亚
		_def.pro();  //输出 索菲亚pro
	</script>
</body>