<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Four Function Call Modes</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//The earliest, we wrote the code like this
//Global is polluted and is prone to naming conflicts
function aaa(){
console.info('aaa');
}
aaa();
//Simple encapsulation: Namespace mode
//Reduce the number of variables on Global
//The essence is an object, which is not safe at all
var BBB = {
bbb1:function(){
console.info ('bbb1');
},
bbb2:function(){
console.info ('bbb2');
}
}
BBB.bbb1();
BBB.bbb2 ();
//Anonymous closure: IIFE pattern
//Function is JavaScript's only Local Scope
var CCC = (function () {
var _val = "ccc1";
var ccc1 = function () {
console.info (_val);
}
return{
ccc1: ccc1
}
})()
CCC.ccc1();
console.info(CCC._val);// undefined
// Enhance it a little more: introduce dependencies
//this is the module pattern
// Also the cornerstone of modern module implementations
var DDD = (function ($) {
var _$var = $("body");
var ddd1 = function () {
console.info (_ $ var);
}
return{
ddd1: ddd1
}
})(jQuery);
DDD.ddd1();
console.info (DDD ._ $ var); // undefined
/ / Use JQ to load it, just understand it below, save it temporarily
//Technology for dynamically loading script files
//http://www.labjs.com/
//http://www.cnblogs.com/yuzhongwusan/archive/2013/04/14/3020559.html
//The way to optimize JS
//Merge Concat
//compress Minify
//obfuscate Uglify
</script>
</body>
</html>
Effect picture: