Обмен жестко закодированными аргументами для переменных

Question

У меня на сайте есть функциональный скрипт, который позволяет мне открывать ссылку в новом окне, когда к ссылке добавляется определенный класс. Мне нужно много таких на моем сайте, хотя я решил, что сделаю скрипт немного проще для редактирования, работая с переменными.

В процессе замены жестко закодированных строк для переменных мой скрипт перестал работать. Единственное, что работает, это переменная, в которой я установил URL.

Я узнаю, что $ {} не везде работает. Надеюсь, что кто-то может указать, где мое мышление не так. Также надеюсь, что я понял терминологию правильно, пытаясь учиться, хотя! : -)

	
var function1Name		=	"test_function";
var function1Url		=	"https://www.google.com";	
var function1Class		=	".test_function_class";	
	

function ${function1Name}() {
    window.open(function1Url, "_blank", "height=200");
}

jQuery("${function1Class}").click(function(){
	${function1Name}()
});
		

Answer 1

Здесь есть несколько проблем с синтаксисом.

Во-первых, function ${function1Name}() недопустимый синтаксис.Имена функций должны быть определены до выполнения.Если вы хотите получить динамический доступ к функции, поместите ее в объект и задайте ключ с помощью ссылки на переменную.

Во-вторых, ${function1Name}() снова недопустимый синтаксис.Вы не можете вызывать такую ​​функцию динамически.Ссылаясь на приведенное выше предложение, вы можете получить динамический доступ к объекту, поэтому первая точка решает эту проблему.

В-третьих, интерполяция строк работает только в пределах литералов шаблона , поэтому вам необходимо разделить строку с помощьюгалочки: ``. Однако здесь полностью избыточно, так как вы можете просто использовать $(function1Class)

С учетом этих проблем приведем обновленный пример:

var function1Name = "test_function";
var function1Url = "https://www.google.com";
var function1Class = ".test_function_class";

var funcObj = {
  [function1Name]: function() {
    console.log(`function called, window would open here containing ${function1Url}...`);
    // window.open(function1Url, "_blank", "height=200");
  }
}

$(function1Class).click(function() {
  funcObj[function1Name]()
});

/*
alternative using a template literal, although note that it's redundant here
$(`${function1Class}`).click(function() {
  funcObj[function1Name]()
});
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="test_function_class">Click me</a>

Последнее, на что следует обратить внимание, это то, что ни одна версия IE не поддерживает литералы шаблонов, поэтому перед использованием убедитесь, что у вас есть требования к поддержке браузера.

Answer 2

Так круто, у меня все получилось!

var function1Name		=	"test_function_1";
var function1Url		=	"https://www.google.com";	
var function1Class		=	".test_function_class1";	

var function2Name		=	"test_function_2";
var function2Url		=	"https://www.cnn.com";	
var function2Class		=	".test_function_class2";	



// Function 1	
window[function1Name] = function () {
    window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function1Class).click(function() { 
    window[function1Name]();
});


// Function 2	
window[function2Name] = function () {
    window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function2Class).click(function() { 
    window[function2Name]();
});

Теперь я могу добавить несколько URL-адресов и соответствующих классов, как и было моим намерением. Очень рад этому.

Последующий вопрос, так как мне придется поэкспериментировать с идеальными параметрами окна, я тоже пытаюсь сделать эти аргументы переменными. Я пробовал примеры того, как вставить вывод переменных из функционального кода, но эти методы там не работают. Вот этот код:

var windowWidth			=	250	
	
var function1Name		=	"test_function_1";
var function1Url		=	"https://www.google.com";	
var function1Class		=	".test_function_class1";	

var function2Name		=	"test_function_2";
var function2Url		=	"https://www.cnn.com";	
var function2Class		=	".test_function_class2";	



// Function 1	
window[function1Name] = function () {
    window.open(function1Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=[windowWidth],height=745");
}

jQuery(function1Class).click(function() { 
    window[function1Name]();
});


// Function 2	
window[function2Name] = function () {
    window.open(function2Url, "_blank", "toolbar=no,status=no,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=745");
}

jQuery(function2Class).click(function() { 
    window[function2Name]();
});

Как мне вставить туда значение переменной (2-я строка в Function1)?

Answer 3

Ни один из ваших вариантов использования ${} не является допустимым синтаксисом JavaScript.

Ваш код объявления функции будет заменен на:

window[function1Name] = function () {
    window.open(function1Url, "_blank", "height=200");
}

Обратите внимание, что функция больше не будетбыть поднятым при объявлении таким образом, поэтому порядок операций имеет значение.

Обработчик щелчков можно записать следующим образом:

jQuery(function1Class).click(function() { // Note that I just used the variable there.
    window[function1Name]();
});

В JavaScript существует концепция ${},но это только в шаблонных литералах:

const myVariable = "Foo";
const message = `myVariable contains: "${myVariable}"!`;
console.log(message);