2009-09-16 2 views
3

나는 이전 자바 스크립트의 데이터를 알고있는 모든 함수를 연쇄 할 수있는 작은 자바 스크립트 (프레임 워크)를 작성하고 싶다.jQuery와 같은 체인 가능한 JavaScript 프레임 워크를 구현하는 가장 쉬운 방법은 무엇입니까?

기본적으로 나는 jQuery가 제공하지만 그 학습의 일부를 모방하고 싶습니다. 주로 학습 목적과 데이터를 가지고 싶습니다. 모든 체인 기능에서 사용할 수 있습니다.

나는 예를 들어 같은 것을 할 수있는, 좋아하는 것 :

myJsLib.processForm("user", "pass").url("http://domain.dev/form.php").queryString({ secure: true, errorPage: "login_failure.htm" }); 

을 위의 예에서 모든 기능을 다른 무엇을하고 있는지 어느 정도 알고 있어야합니다.

또는 더 구체적으로 :

myJsLib.getDataIntoArray(jsonObjectOrWhatever).each(function(item) { alert(item); }); 

은 "항목이"배열이 될 것이라고 getDataIntoArray() 생성 (반환?).

나는 이것을 적절하게 표현했으면한다. 나는 그 예제를 조금 배제하려고 노력했다. jQuery의 프로토 타입 확장에 대한 의미는 쓸모가 없다는 것을 알았지 만, 나는 자바 스크립트에 전혀 정통하지 않습니다. 나는 상세한 (아직 숙달되지 않은) 설명과 코드 예제를 매우 고맙게 생각한다.

감사합니다.

편집 : 앤드류 덕분에 나는 만족스러운 것으로 생각났습니다. 고마워 할 수있는 오해를 바로 잡아주십시오. 감사합니다.

function myLib() 
{ 
this.properties = ['status', 'window', 'ui'], 
this.inputArrayParms = function(parms) 
{ 
    for (var i = 0, len = parms.length; i < len; i++) 
    { 
     this.properties[this.properties.length] = parms[i]; 
    } 
    return this; 
}, 
this.each = function(callback) 
{ 
    for (var i = 0, len = this.properties.length; i < len; i++) 
    { 
     callback(this.properties[i]); 
    } 
    return this; 
} 
} 

var f = new myLib; 
f.inputArrayParms(["one", "two", "three"]).each(function(theMsg){ alert(theMsg); }); 

이것은 예상대로 작동하는 것으로 보입니다. 어떤주의 사항?

+0

@Brainsick : "Resolved"를 제목에 추가 할 필요가 없습니다.또한 Andrew의 대답이 문제를 해결하는 데 도움이 되었다면, 예의 옆에있는 옆에있는 체크 표시를 클릭하여 대답을 수락으로 표시해야합니다. –

+0

Gotcha. 정말 죄송 해요! – Brainsick

+0

this.properties [this.properties.length] = parms [i]를 수행하는 for 루프를 간단하게 Array.prototype.push.apply (this.properties, parms)로 바꿀 수 있습니다. –

답변

5

이것은 fluent interface이라고하며이 함수를 만드는 가장 좋은 방법은 모든 함수에서 반환되는 단일 마스터 개체 (예 : jQuery 개체)를 사용하여 추가 함수 호출을 함께 연결할 수 있도록하는 것입니다.

여기 작은 예이다

function foo() { 
    this.first = function(first) { 
     alert(first); 
     return this; 
    } 
    this.second = function(second) { 
     alert(second); 
     return this; 
    } 
} 

foo 클래스는 두 가지 방법, 및 firstsecond을 가지고 있음이 통지. 이러한 방법 모두가 임의의 순서로 체인 될 수 this를 반환하기 때문에 당신이 원하는 :

new foo().first("hello").second("world"); 
new foo().second("hello").first("world"); 
new foo().first("hello").first("world"); 

당신은 아이디어 : 유창 인터페이스에 대해 생각하는

좋은 방법을 얻을 그들이 쉽게 흘러 틀림없이 있다는 것입니다 읽기 쉽습니다.

f = new foo(); 
f.first("hello"); 
f.second("world"); 

이 유창 인터페이스는 당신이 그렇게 this를 반환하는 메서드 호출이 체인 될 수 있다는 것을 의무화 넘어 클래스의 구현 중 하나를 지시하지 않음을 의미 : 위의 예는 단순히이보다 전통적인 사용을 대체합니다. 즉,이 클래스에 다른 클래스와 마찬가지로 모든 함수에서 사용할 수있는 필드를 추가 할 수 있습니다.

+0

감사합니다, Andrew. 이 접근법을 시도 할 것이지만 코드의 작은 예제를 매우 고맙게 생각할 것입니다. – Brainsick

+0

환상적이고 이해하기 쉽습니다. 고맙습니다. 그렇지만, 예를 들어, second()에 "first"또는 first()에서 선언되거나 처리 된 배열을 사용할 수 있습니까? – Brainsick

+0

정확하게 이해했다면 각 "방법"이 단순히 원래 대상의 "속성"을 나타낼 것이라는 점에서 기본적으로 실제 수업을 모방하고 있습니다. 도움을 주셔서 감사 드리며 내 눈에 띄는 부분을 수정 해주십시오. – Brainsick

관련 문제