Jquery 학습 노트-코드 조직

핵심 원칙:
 기능 에 따라 코드 구성:모듈,서비스 등 코드 중복 없 음,inheritance 로 해결 소나무 결합,코드 간 custom 이벤트,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.체인 깨 기 기능 수정

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 간 의 의존 도 를 관리 합 니 다.