关闭

JavaScript中的组件模式(Module Pattern)

268人阅读 评论(0) 收藏 举报
The Module Pattern(组件模式)

        组件模式最原始的定义是提供一个对类的封装,包括private and public属性。在Java中就相当于Bean,FormBean的这些概念。

       在JavaScript中,组件模式是通过模拟私有变量和私有方法的方式来实现的,防止全局变量的冲突,尤其是引入了很多框架的时候。

      JavaScript语言机制并不提供成员的访问修饰符来提供真正的访问权限。但是我们能通过变量的作用域来模拟这种权限。 下面来看个简单的例子:

	var testModule = (function(){
	  var counter = 0;
	  return {
	    incrementCounter: function() {
	      return counter++;
	    },
	    resetCounter: function() {
	      console.log('counter value prior to reset:' + counter);
	      counter = 0;
	    }
	  };
	})();
	 
	// test
	testModule.incrementCounter();
	testModule.resetCounter();
      当你开始于组件模式打交道时,很容易就生成代码的模板,组件模式就像是一个命名空间,将变量都统一在一个命名空间呢,下面就是一个简单的模板代码

	var myNamespace = (function(){
	 
	  var myPrivateVar = 0;
	  var myPrivateMethod = function( someText ){
	    console.log(someText);
	  };
	   
	  return {
	 
	    myPublicVar: "foo", 
	 
	    myPublicFunction: function(bar){
	      myPrivateVar++;
	      myPrivateMethod(bar);
	    }
	  };
	   
	})();

        Yahoo's YUI library就运用了组件模式,感兴趣的可以自己上网搜资料

Advantages:

第一,对于初学者来说,尤其是有面向对象编程基础的,代码显得更加的清晰。

第二,支持私有数据,公有成员函数也能访问到私有的变量。

Disadvantages:

访问公有成员和私有成员的方式不同,当你需要改变他们的可见性是,你不得不改变每处你所使用的代码,前期设计就显得非常重要。

var someModule = (function(){
	 
	  // private attributes
	  var privateVar = 5;
	 
	  // private methods
	  var privateMethod = function(){
	     return 'Private Test';
	  };
	 
	  return {
	    // public attributes
	    publicVar: 10,
	    // public methods
	    publicMethod: function(){
	      return ' Followed By Public Test ';
	    },
	 
	    // let's access the private members
	    getData: function(){
	      return privateMethod() + this.publicMethod() + privateVar;
	    }
	  }
	})(); //the parens here cause the anonymous function to execute and return
	         
	someModule.getData();

要继续深入研究组件模式的话,作者建议访问Ben Cherry's JavaScript Module Pattern In-Depth

最后增加一段供借鉴的JS代码:


	 var myRevealingModule = (function(){
	 
	    var name = 'John Smith';
	    var age = 40;
	 
	    function updatePerson(){
	      name = 'John Smith Updated';
	    }
	    function setPerson () {
	       name = 'John Smith Set';
	    }
	    function getPerson () {
	       return name;
	    }
	    return {
	        set: setPerson,
	        get: getPerson
	    };
	}());
	 
	// Sample usage:
	myRevealingModule.get();

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2570次
    • 积分:81
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:1篇
    • 译文:3篇
    • 评论:0条
    文章存档