Jquery学习笔记——代码组织

核心原则：

 按功能组织你的代码：模块，服务等
 无代码重复，使用inheritance解决
 松耦合，代码之间通过 custom event，pub/sub完成消息传递

封装：

使用对象进行封装的好处是：解决消除匿名函数，以配置参数为中心，更方便去重构和重用。比如对事件处理函数，定义为_开头的函数，隐含其为工具函数或私有函数，一个简单的实例：

var myFeature = {
	myProperty : 'hello',
	
	myMethod : function() {
	    console.log(myFeature.myProperty);
	},
	
	init : function(settings) {
	    myFeature.settings = settings;
	},
	
	readSettings : function() {
	    console.log(myFeature.settings);
	}
};

myFeature.myProperty; // 'hello'
myFeature.myMethod(); // logs 'hello'
myFeature.init({ foo : 'bar' });
myFeature.readSettings(); // logs { foo : 'bar' }

如何将对象应用在Jquery编写的程序中，一个典型的Jquery程序如下：

$(document).ready(function() {
	$('#myFeature li')
	.append('<div/>')
	.click(function() {
	  var $this = $(this);
	  var $div = $this.find('div');
	  $div.load('foo.php?item=' +
	    $this.attr('id'),
	    function() {
	      $div.show();
	      $this.siblings()
	        .find('div').hide();
	    }
	  );
	});
});

可以从以下几个方面进行优化：1. 将和功能无关的部分分离，如常量字符串，多个函数都会用到的变量； 2. 打破chain 方便修改功能

var myFeature = {
		init : function(settings) {
			myFeature.config = {
					$items : $('#myFeature li'),
					$container : $('<div class="container"></div>'),
					urlBase : '/foo.php?item='
			};

			// allow overriding the default config
			$.extend(myFeature.config, settings || {});

			myFeature.setup();
		},

		setup : function() {  //开始功能处理
			myFeature.config.$items
			.each(myFeature.createContainer)
			.click(myFeature.showItem);
		},

		createContainer : function() {
			var $i = $(this),
			$c = myFeature.config.$container.clone()
			.appendTo($i);

			$i.data('container', $c);
		},

		buildUrl : function() {
			return myFeature.config.urlBase +
			myFeature.$currentItem.attr('id');
		},

		showItem : function() {
			var myFeature.$currentItem = $(this);
			myFeature.getContent(myFeature.showContent);
		},

		getContent : function(callback) {
			var url = myFeature.buildUrl();
			myFeature.$currentItem
			.data('container').load(url, callback);
		},

		showContent : function() {
			myFeature.$currentItem
			.data('container').show();
			myFeature.hideContent();
		},

		hideContent : function() {
			myFeature.$currentItem.siblings()
			.each(function() {
				$(this).data('container').hide();
			});
		}
};

$(document).ready(myFeature.init);

修改好的状态：

      1. 去除了匿名函数
      2. 将配置信息从函数中移除，并放在中心位置
      3. 解除了chain，保证重用性

使用函数：modelPattern

使用对象可以很好地将数据和函数分开，但没法对函数的访问方式进行限定，如无法对函数和属性进行private限定，一个简单实例

var feature =(function() {

//	private variables and functions
	var privateThing = 'secret',
	publicThing = 'not secret',

	changePrivateThing = function() {
		privateThing = 'super secret';
	},

	sayPrivateThing = function() {
		console.log(privateThing);
		changePrivateThing();
	};

//	public API
	return {
		publicThing : publicThing,
		sayPrivateThing : sayPrivateThing
	}

})();

feature.publicThing; // 'not secret'

feature.sayPrivateThing();
//logs 'secret' and changes the value of privateThing

下面使用这种方式，继续对jquery程序进行优化

$(document).ready(function() {
	var feature = (function() {

		var $items = $('#myFeature li'), $container = $('<div class="container"></div>'), $currentItem,

		urlBase = '/foo.php?item=',

		createContainer = function() {
			var $i = $(this), $c = $container.clone().appendTo(
					$i);

			$i.data('container', $c);
		},

		buildUrl = function() {
			return urlBase + $currentItem.attr('id');
		},

		showItem = function() {
			var $currentItem = $(this);
			getContent(showContent);
		},

		showItemByIndex = function(idx) {
			$.proxy(showItem, $items.get(idx));
		},

		getContent = function(callback) {
			$currentItem.data('container').load(buildUrl(),
					callback);
		},

		showContent = function() {
			$currentItem.data('container').show();
			hideContent();
		},

		hideContent = function() {
			$currentItem.siblings().each(function() {
				$(this).data('container').hide();
			});
		};

		$items.each(createContainer).click(showItem);

		return {
			showItemByIndex : showItemByIndex
		};
	})();

	feature.showItemByIndex(0);
});

管理依赖

可 使用RequiredJS 来管理JS之间的依赖