HTML 요소의 메소드는 어떻게 만듭니 까?

저는 학습 목적으로 단순하고 작고 기본적인 자바 스크립트 프레임 워크를 만들려고합니다. 하지만 그 일은 제가 매우 기초적으로 다가와 있습니다.HTML 요소의 메소드는 어떻게 만듭니 까?

$('testdiv').testFunction();

그리고 내가 그것을 위해 작성한 코드 :

var elementID; 
var smallFramework = { 

    $:function(id) { 
    this.elementID = id; 
    }, 

    testFunction:function() { 
    alert(this.elementID); 
    } 

}; 
window.$ = smallFramework.$;

그러나 반환에

내가 얻을 : 나는 이런 식으로 뭔가를 할 노력하고있어

$('testdiv) is undefined

누구든지이 작고 희망적으로 쉬운 질문으로 나를 도울 수 있습니까?

출처

2009-02-08 Anonymous

다음 질문을 할 때 정말로 더 나은 제목을 갖도록 노력해야합니다. 현재 제목은 그다지 설명 적이 지 않습니다. – cbrulak

@starko, 나는 그 사람을 다소 고치려고 노력했다. – mmcdole

@ simucal, 나는 그것이 그가 요구하고있는 것이 확실하지 않다. 나는 당신이 방금 제목을 더 악화 시켰다고 생각합니다. – Breton

기대하는 동작을 얻으려면 testFunction 메서드로 개체를 반환하려면 $ 함수가 필요합니다. 시도 : 물론

var smallFramework = // an object for namespacing 
{ 
    $:function(id) // the core function - returns an object wrapping the id 
    { 
    return {     // return an object literal 
     elementID: id,   // holding the id passed in 
     testFunction: function() // and a simple method 
     { 
     alert(this.elementID); 
     } 
    }; 
    } 
};

, 당신이 원하는 행동을 달성하기 위해 many other ways이 있습니다.

출처

2009-02-08 22:30:23 Shog9

HTML 요소에 메서드를 추가하려는 경우 이러한 선을 따라 뭔가를 할 수 있습니다.

$ = function(elementId) { 
    var element = document.getElementById(elementId); 
    element.testFunction = function(){ 
     alert(this.id); 
     return this; // for chaining 
    } 
    return element; 
} 

$('test').testFunction();

출처

2009-02-08 22:41:16 meouw

대신

smallFramework.$('testdiv');

보십시오. 당신이 올린 코드에 따르면, 그것은 당신의 $ 함수가 끝난 곳입니다.

또는 jquery와 같은 것을 복제하려는 것 같습니다. 이런 것을 시도해 볼 수도 있습니다.

var $ = smallFramework = (function() { 
    var f = 
    { 

    find:function(id) { 
     f.elementID = id; 
     return f; //every function should return f, for chaining to work 
    }, 

    testFunction:function() { 
     alert(f.elementID); 
     return f; 
    } 

    } 

return f.find //the find function will be assigned to $. 
//and also assigned to smallFramework. 
//the find function returns f, so you get access to testFunction via chaining 
// like $("blah").testFunction() 

})() //note this function gets called immediately.

이 코드는 클로저 개념에 크게 의존하기 때문에 javascript에 익숙하지 않은 사용자에게 혼동을 줄 수 있습니다. 이것이 더 이상 적합하지 않다면 Douglas Crockford의 자바 스크립트 웹 사이트에서 시간을 보내십시오. 위의 코드는 find 함수에서 "this"를 사용하는 경우에 물결 치기 때문에 중요합니다. "this"는 f에 바인딩되지 않기 때문입니다. $ 또는 $에서 사용할 때 기대할 수 있습니다. smallFramework.

출처

2009-02-08 23:42:12 Breton

HTML 요소의 메소드는 어떻게 만듭니 까?

답변

관련 문제