웹 페이지가 구성 될 때 삽입 될 일부 JavaScript를 동적으로 만드는 작업 중입니다.
JavaScript는 listbox
다른 listbox
. 하나의 선택 listbox
이 변경되면 선택한 값에 따라 메서드 이름이 호출됩니다 listbox
.
예를 들면 :
Listbox1
포함 :
Colours
Shapes
Colours
를 선택 하면 populate_Colours
다른을 채우는 메서드를 호출합니다 listbox
.
내 질문을 명확히하기 위해 : populate_Colours
JavaScript에서 어떻게 호출합니까?
답변
populate_Colours
메서드가 전역 네임 스페이스에 있다고 가정하면 모든 개체 속성에 개체가 연관 배열 인 것처럼 액세스 할 수 있고 모든 전역 개체가 실제로 window
호스트 개체의 속성임을 모두 이용하는 다음 코드를 사용할 수 있습니다 .
var method_name = "Colours";
var method_prefix = "populate_";
// Call function:
window[method_prefix + method_name](arg1, arg2);
답변
Triptych가 지적했듯이 호스트 개체의 내용에서 모든 전역 범위 함수를 찾아 호출 할 수 있습니다.
전역 네임 스페이스를 훨씬 덜 오염시키는 더 깨끗한 방법은 다음과 같이 함수를 배열에 직접 명시 적으로 넣는 것입니다.
var dyn_functions = [];
dyn_functions['populate_Colours'] = function (arg1, arg2) {
// function body
};
dyn_functions['populate_Shapes'] = function (arg1, arg2) {
// function body
};
// calling one of the functions
var result = dyn_functions['populate_Shapes'](1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions.populate_Shapes(1, 2);
이 배열은 전역 호스트 객체가 아닌 다른 객체의 속성 일 수도 있습니다. 즉, jQuery와 같은 많은 JS 라이브러리가 수행하는 것처럼 자신 만의 네임 스페이스를 효과적으로 만들 수 있습니다. 이것은 동일한 페이지에 여러 개의 개별 유틸리티 라이브러리를 포함 할 때 충돌을 줄이는 데 유용하며 (디자인의 다른 부분이 허용하는 경우) 다른 페이지에서 코드를 더 쉽게 재사용 할 수 있습니다.
다음과 같은 객체를 사용할 수도 있습니다.
var dyn_functions = {};
dyn_functions.populate_Colours = function (arg1, arg2) {
// function body
};
dyn_functions['populate_Shapes'] = function (arg1, arg2) {
// function body
};
// calling one of the functions
var result = dyn_functions.populate_Shapes(1, 2);
// this works as well due to the similarity between arrays and objects
var result2 = dyn_functions['populate_Shapes'](1, 2);
배열이나 객체를 사용하여 함수를 설정하거나 액세스하는 방법을 사용할 수 있으며 물론 다른 객체도 거기에 저장할 수 있습니다. 다음과 같이 JS 리터럴 표기법을 사용하여 동적이지 않은 콘텐츠에 대한 두 메서드의 구문을 더 줄일 수 있습니다.
var dyn_functions = {
populate_Colours:function (arg1, arg2) {
// function body
};
, populate_Shapes:function (arg1, arg2) {
// function body
};
};
편집 : 물론 더 큰 기능 블록의 경우 코드 기능을 체계적으로 캡슐화하는 인기있는 방법 인 매우 일반적인 “모듈 패턴”으로 위를 확장 할 수 있습니다.
답변
이 목적으로 / / 를 사용 하지 않는 것이 좋습니다 .
대신 다음과 같이하십시오. global
window
eval
모든 메서드를 Handler의 속성으로 정의합니다.
var Handler={};
Handler.application_run = function (name) {
console.log(name)
}
이제 이렇게 불러
var somefunc = "application_run";
Handler[somefunc]('jerry');
출력 : jerry
답변
다음과 같이 할 수 있습니다.
function MyClass() {
this.abc = function() {
alert("abc");
}
}
var myObject = new MyClass();
myObject["abc"]();
답변
내에서 ServiceWorker
또는 Worker
대체 window
와 함께 self
:
self[method_prefix + method_name](arg1, arg2);
작업자는 DOM에 액세스 할 수 없으므로 window
잘못된 참조입니다. 이 용도에 해당하는 전역 범위 식별자는 self
입니다.
답변
다른 답변 중 일부가 제안하는 것처럼 창을 사용하지 않는 것이 좋습니다. this
그에 따라 사용 하고 범위를 지정 하십시오 .
this['yourDynamicFcnName'](arguments);
또 다른 깔끔한 트릭은 다른 범위 내에서 호출하고 상속에 사용하는 것입니다. 함수를 중첩했고 전역 창 개체에 대한 액세스를 원한다고 가정 해 보겠습니다. 다음과 같이 할 수 있습니다.
this['yourDynamicFcnName'].call(window, arguments);
답변
안녕하세요,
var callback_function = new Function(functionName);
callback_function();
매개 변수 자체를 처리합니다.