2011-11-25 4 views
2

저는 프로그래머가 아니지만 바로 주변을 털어 내고 배우기를 좋아합니다. 다음과 같은 형식의정규 표현식으로 코드를 우아하게 만드는 데 도움이 필요합니다.

1) URL : 사용 가능한 페이지의 #를 출력 http://site.com/#!/show/me/stuff/1-12/

2)의 jQuery 매김 스크립트를 여기에 내가 가진거야. 각 번호는 href="#pageNumber"

의 링크입니다. 3) 모든 페이지 매김 링크에 바인딩되는 jQuery 스크립트. 기능 코드는 다음과 같습니다.

기본적으로 내 목표는 페이지 2를 선택하는 경우 내 URL의 1-12를 적절한 값으로 바꾸는 것입니다.

var pageId = this.href.split("#")[1]; 
// this gets the number from the pagination link (i.e., 
// http://site.com/#2 becomes 2) 

var url = location.hash.split("/"); 
var url = url[url.length-2]; 
// this is my way of extracting "1-12" from the URL :) 

var showFrom = parseFloat(url.split("-")[0]); // 1 
var showTo = parseFloat(url.split("-")[1]); // 12 
var itemsPerPage= (showTo-showFrom)+1; // 12 
var newShowTo = (itemsPerPage*pageId); // 24 
var newShowFrom = (itemsPerPage*pageId)-itemsPerPage+1; // 13 
var newUrl = newShowFrom+"-"+newShowTo; // 13-24 

location.hash = location.hash.replace(url, newUrl); 
// http://site.com/#!/show/me/stuff/1-12/ now becomes 
// http://site.com/#!/show/me/stuff/13-24/ 

가 어떻게이 더 우아하고 더 적은 단계로 할 수 있습니다

는 여기가 작동하지만 매우 추한입니다 요리 무엇인가?

+1

- 정수를 사용하고 있으므로 parseFloat()가 아닌 parseInt()를 사용하십시오. –

답변

6

코드가 너무 추합니다. 변수 이름은 자체적으로 설명되며, 우리는 모두 이 훨씬 더 좋음을 확인할 수 있습니다.. 이

var pageId = this.href.split("#")[1]; 
var pattern = /\/(\d+)-(\d+)\/?$/; 
location.hash = location.hash.replace(pattern, function(_, showFrom_str, showTo_str){ 
    var showFrom = parseInt(showFrom_str, 10); 
    var showTo = parseInt(showTo_str, 10); 
    var itemsPerPage = showTo - showFrom + 1; 
    return '/' + ((itemsPerPage * pageId) - itemsPerPage + 1) + '-' + (itemsPerPage * pageId) + '/'; 
}); 

작동 방법 :

패턴 : \/ 슬래시 한 다음

어쨌든

, 여기 당신은했지만 사용하여 정규 표현식에이 같은 일을 할 수있는 방법입니다 + 자릿수 \d 다음에 하이픈 -이 나오고 다음에 또 다른 자릿수 (\d+)이오고 그 다음에 임의로 ? 슬래시이옵니다.다음에 문자열 $의 끝이옵니다.

대체 : : replace 함수에 대체 함수를 전달하여 대체 텍스트가 대체 텍스트에 종속되도록 할 수 있습니다. 함수의 첫 번째 인수는 전체 일치 ("/1-12/")이며 무시합니다 (_은 "무시"에 대한 규칙입니다).

다음 인수는 괄호로 묶인 정규 표현식에서 캡처 한 패턴에 해당합니다. 귀하의 경우, 인수는 범위의 시작과 끝 숫자의 문자열 표현입니다. 당신이 그랬던 것처럼

는 그때 그냥에서는 parseInt 대신에서는 parseFloat을 사용하는

  • 제외하고, 같은 논리를 사용합니다. (비록 두 번째 매개 변수를 염두에 두지 마라. "08"은 당신을 물을 수있다.)
  • 나는 중간 변수를 적게 사용했다.

는 결국 모든 정규식은 문자열 분할을 제거하고 코드를 조금 간소화 취득했다. 그러나 실제 상황에서는 URL에서 취약한 문자열 연산에 의존하지 않는보다 강력한 솔루션에 대해 생각하려고 시도했을 것입니다.

+0

잘하고 설명! 대단히 감사합니다. 최적화 된 솔루션을 통해 배울 수 있습니다. 일을 더 튼튼하게하는 방법에 관해서는, 나는 물건을 지나치게 복잡하게하지 않고 어떻게 그렇게 할 것인지 잘 모르겠다. 해시 URL의 모든 매개 변수는 요청이있을 때 서버에서 유효성을 검사하므로 무언가가 올바르지 않으면 방문자를 시작 페이지로 리디렉션하거나 오류 메시지를 표시합니다. – MarkL

+0

나는 코드가 앞으로는 작동하지만 뒤로 향하는 것은 아니라는 것을 알아 차렸다. (pageId 또는 클릭 한 페이지 번호는 우아한 솔루션에서 생략되었다.) – MarkL

관련 문제