一、立即执行函数

  立即执行函数可以有效避免临时变量污染全局空间。可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用。

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {  

        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i); //入参

}
使用立即执行函数,可以达到不暴露私有成员的目的
var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();  //无法读取_count    
 
对比立即执行函数
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
 	var a = function() {
 		alert(12)
 		var _count=1;
        var m1 = function(){
      alert(1);
    };
    var m2 = function(){
      alert(2);
    };
    return {
      m1 : m1,
      m2 : m2
    };
 	};
 
    var b = a();
 	b.m1();


 	var a2 = (function() {
 		alert(12);
 		var _count=1;
        var m1 = function(){
      alert(1);
    };
    var m2 = function(){
      alert(2);
    };
    return {
      m1 : m1,
      m2 : m2
    };
 	})();
 	a2.m2();
 	</script>
</body>
</html>
 

二、模块规范

目前主要的模块规范有commonJS与AMD
 

1.commonJS

commonJS是服务器端模块规范,nodeJs遵循此规范。因为服务端JS文件存放于本地,加载速度快,所以其加载模块(一个文件即一个模块)方式为同步加载,不适用于浏览器。
function foobar(){
        this.foo = function(){
                console.log('Hello foo');
        }

        this.bar = function(){
                console.log('Hello bar');
        }
}
 
exports.foobar = foobar; //通过export实现与外部通信
var foobar = require('./foobar').foobar,
    test   = new foobar();
 
test.bar(); 
2.AMD规范
  作为一个规范,只需定义其语法API,而不关心其实现。AMD规范简单到只有一个API,即define函数:

  define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

  其中:

  ◆  module-name: 模块标识,可以省略。

  ◆  array-of-dependencies: 所依赖的模块,可以省略。

  ◆  module-factory-or-object: 模块的实现,或者一个JavaScript对象。

  从中可以看到,第一个参数和第二个参数都是可以省略的,第三个参数则是模块的具体实现本身。后面将介绍在不同的应用场景下,他们会使用不同的参数组合。从这个define函数AMD中的A:Asynchronous,我们也不难想到define函数具有的另外一个性质,异步性。当define函数执行时,它首先会异步的去调用第二个参数中列出的依赖模块,当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也就通知了依赖于自己的模块自己已经可用。

  由于AMD规范的异步性,其与COMMONJS不同,更适用于客户端浏览器。require.js即遵循AMD规范。
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
       exports.verb = function() {
           return beta.verb();
           //Or:
           return require("beta").verb();
       }
   });

 

     

 
 
 
 
原文地址:
 
 
 
posted on 2014-10-25 15:41  grape1211  阅读(170)  评论(0编辑  收藏  举报