js 캡슐화 및scope_javascript 기술에 대한 간략한 분석
- WBOY원래의
- 2016-05-16 17:29:161059검색
기본 코드는 다음과 같습니다
코드 복사 코드는 다음과 같습니다
< html xmlns="http: //www.w3.org/1999/xhtml">
저장을 클릭했는데 전혀 응답이 없습니다. 가장 일반적으로 사용되는 jquery 바인딩 이벤트가 작동하지 않는 것이 이상합니다. 비교해 보니 실제로 바인딩이 $(document).ready(function () {})에서 수행되어야 한다는 사실을 잊어버렸습니다.
js는 다음과 같이 수정되었습니다.
코드 복사 코드는 다음과 같습니다.
var text="test"
$ (document).ready(function () {
var t=new functionTest(text);
})
function functionTest(text)
{
var AlertText=text
달러 텍스트);
} }
}
} function AlertTestOuter()
{
Alert(text);
}
수정 후 저장을 클릭하면 매개변수가 전달됩니다. 그래야 서로 다른 매개변수가 서로 다른 지점에 전달될 수 있습니다.
그러나 페이지가 일부 태그를 동적으로 생성하고 이러한 태그의 클릭 이벤트도 처리해야 하는 또 다른 상황이 있습니다. 취소 버튼을 다시 예로 들어보겠습니다. 동적으로 생성되므로 저장과 동일한 방법을 사용할 수 없습니다.
onclick="javascript:t.AlertTest;"
와 같은 바인딩만 사용할 수 있습니다. 그래서 다음과 같은 테스트가 있습니다.
수정
$ (document).ready(function () {
var t=new functionTest(text);
})
function functionTest(text)
{
var AlertText=text
달러 텍스트);
} }
}
} function AlertTestOuter()
{
Alert(text);
}
수정 후 저장을 클릭하면 매개변수가 전달됩니다. 그래야 서로 다른 매개변수가 서로 다른 지점에 전달될 수 있습니다.
그러나 페이지가 일부 태그를 동적으로 생성하고 이러한 태그의 클릭 이벤트도 처리해야 하는 또 다른 상황이 있습니다. 취소 버튼을 다시 예로 들어보겠습니다. 동적으로 생성되므로 저장과 동일한 방법을 사용할 수 없습니다.
onclick="javascript:t.AlertTest;"
와 같은 바인딩만 사용할 수 있습니다. 그래서 다음과 같은 테스트가 있습니다.
수정
코드 복사
코드는 다음과 같습니다.
눌렀을 때 반응이 없으면 다음과 같이 수정
코드 복사 코드는 다음과 같습니다
아직 응답이 없습니다. 클릭해도 오류가 발생하지 않습니다.
코드 복사 코드는 다음과 같습니다.
응답이 있습니다 이번에는 괄호 한 쌍이 빠진 것 같습니다. Encapsulation으로 수정하는 방법은
코드 복사 코드는 다음과 같습니다
클릭해도 응답이 없으며 Uncaught ReferenceError: t is not Defined
변수 t가 정의되지 않았고 범위가 적용되는 것 같습니다. 그래서 js를 다음과 같이 수정했습니다. 즉, 변수 t를 외부에 두고 할당을 내부에 두었습니다.
코드 복사 코드는 다음과 같습니다.
var t;
var text="test";
$(document).ready(function () {
t=new functionTest (텍스트);
});
functionTest(text)
{
var AlertText=text
$("#btnSave").click(function (e) {
AlertTestInnert();
{
경고(alertText);
}
}
함수 AlertTestOuter()
{
경고(텍스트);
}
마지막 단계는 매개변수 전달 메소드 호출을 취소하는 방법입니다.
첫 번째 단계는 js를 다음과 같이 수정하는 것입니다. 즉 호출을 취소하는 함수를 매개변수 전달이 필요한 메서드로 변경하는 것입니다. 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다. var t; var text="test" $( document).ready(function () { t =new functionTest(text);
})