JS 四种函数调用模式-CSDN博客

本文链接：https://blog.csdn.net/linkedin_38250634/article/details/69942734

    Js代码   
    
  
 <!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>  

效果图：