JS 四种函数调用模式

skyGAYD 2017-04-09

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 四种函数调用模式</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//最早,我们这么写代码
//Global 被污染,很容易命名冲突
function aaa(){
	console.info('aaa');
}
aaa();

//简单封装:Namespace 模式
//减少 Global 上的变量数目
//本质是对象,一点都不安全
var BBB = {
	bbb1:function(){
		console.info('bbb1');
	},
	bbb2:function(){
		console.info('bbb2');
	}
}
BBB.bbb1();
BBB.bbb2();

//匿名闭包 :IIFE 模式
//函数是 JavaScript 唯一的 Local Scope
var CCC = (function(){
	var _val = "ccc1";
	var ccc1 = function(){
		console.info(_val);
	}
	return{
		ccc1: ccc1
	}
})()
CCC.ccc1();
console.info(CCC._val);// undefined

//再增强一点 :引入依赖
//这就是模块模式
//也是现代模块实现的基石
var DDD = (function($){
	var _$var = $("body");
	var ddd1 = function(){
		console.info(_$var);
	}
	return{
		ddd1:ddd1
	}
})(jQuery);
DDD.ddd1();
console.info(DDD._$var);// undefined

//使用 JQ加载 就可以了,下面仅了解,暂时保存
//动态加载脚本文件的技术
//http://www.labjs.com/
//http://www.cnblogs.com/yuzhongwusan/archive/2013/04/14/3020559.html

//优化JS的方法
//合并 Concat
//压缩 Minify
//混淆 Uglify
</script>
</body>
</html>

 效果图:
JS 四种函数调用模式
 

相关推荐