#javascript
#javascript
Вопрос:
Хорошо, пожалуйста, будьте нежны, я изучаю Javascript.
У меня есть две кнопки ( <button>
теги HTML5), обе они настроены на вызов одной и той же функции, в этой функции есть две другие функции (показать скрыть), теперь мне интересно, правильно ли это, т.е. Если я нажимаю на кнопку скрыть, она вызывает функцию visibility, которая затем вызываетфункция скрывает и скрывает все, что определено в этой функции, включая исходные кнопки. Но если я нажимаю на кнопку показать, она скрывает исходное содержимое и отображает дополнительное содержимое с большим количеством кнопок.(интерактивный процесс повсюду)Или возможно ли вызывать эти функции отдельно внутри этой функции, например:
function visible() {
function show() {
slide = document.getElementById('side');
pos = 0;
move = setInterval(slider, 1000/60);
slide1 = document.getElementById('main');
pos1 = 100;
move1 = setInterval(slider1, 1000/60);
document.getElementById('welcomer').style.display = 'none';
document.getElementById('welcome').style.display = 'none';
function slider() {
if (pos == 20) {
clearInterval(move);
}else {
pos ;
slide.style.display = 'block';
slide.style.width = pos '%';
}
}
function slider1() {
if (pos1 == 80) {
clearInterval(move1);
}else {
pos1--;
slide1.style.width = pos1 '%';
}
}
}
function hide() {
slide = document.getElementById('side');
pos = 0;
move = setInterval(slider, 1000/60);
slide1 = document.getElementById('main');
pos1 = 100;
move1 = setInterval(slider1, 1000/60);
document.getElementById('welcomer').style.display = 'none';
document.getElementById('welcome').style.display = 'none';
function slider() {
if (pos == 20) {
clearInterval(move);
}else {
pos ;
slide.style.display = 'block';
slide.style.width = pos '%';
}
}
function slider1() {
if (pos1 == 80) {
clearInterval(move1);
}else {
pos1--;
slide1.style.width = pos1 '%';
}
}
}
document.getElementById('vis').addEventListener('click', show());
document.getElementById('invis').addEventListener('click', hide());
}
Или семантически правильно не иметь вложенных функций, вместо этого иметь две отдельные функции и вызывать функции отдельно onclick. Например:
function show() {
slide = document.getElementById('side');
pos = 0;
move = setInterval(slider, 1000/60);
slide1 = document.getElementById('main');
pos1 = 100;
move1 = setInterval(slider1, 1000/60);
document.getElementById('welcomer').style.display = 'none';
document.getElementById('welcome').style.display = 'none';
function slider() {
if (pos == 20) {
clearInterval(move);
}else {
pos ;
slide.style.display = 'block';
slide.style.width = pos '%';
}
}
function slider1() {
if (pos1 == 80) {
clearInterval(move1);
}else {
pos1--;
slide1.style.width = pos1 '%';
}
}
}
function hide() {
slide = document.getElementById('side');
pos = 0;
move = setInterval(slider, 1000/60);
slide1 = document.getElementById('main');
pos1 = 100;
move1 = setInterval(slider1, 1000/60);
document.getElementById('welcomer').style.display = 'none';
document.getElementById('welcome').style.display = 'none';
function slider() {
if (pos == 20) {
clearInterval(move);
}else {
pos ;
slide.style.display = 'block';
slide.style.width = pos '%';
}
}
function slider1() {
if (pos1 == 80) {
clearInterval(move1);
}else {
pos1--;
slide1.style.width = pos1 '%';
}
}
}
Или это возможно, для кнопки скрыть, я просто создаю массив с каждым элементом ID / Class, который я хочу скрыть, вызываю его с помощью onclick на кнопке, чтобы скрыть, а затем изменить стиль display: none;
для всех элементов в этом массиве?.
И наоборот для divs, которые я бы создал с помощью button show?
Теперь я понимаю, что многое из этого можно считать самоуверенным, поэтому причина, по которой я спрашиваю, заключается в следующем: я хочу знать, какой метод будет самым быстрым с использованием ванильного javascript, какой способ сократит объем кода и сократит время загрузки с наилучшим возможным результатом, основанным на фактах.
Пожалуйста, обратите внимание, что мне пришлось писать этот код практически с нулевым знанием, поскольку я изучаю Javascript, это в первую очередь, например, и оба show / hide пока делают одно и то же, В конечном итоге функция show создаст больше divs и контента и т. Д.
Комментарии:
1. Я предлагаю вам добавить немного кода в jsfiddle? Свертку, которую вы здесь имеете, трудно понять без надлежащего примера.
2. Хорошо, мне придется написать код, я дошел до набросков… а затем задумался над этим вопросом, скоро обновится
3. Является ли рассматриваемая функция известным узким местом? Или это скорее вопрос типа «как я могу предварительно оптимизировать свой код»?
4. @Dom это скорее лучшая практика для предварительной оптимизации, а также помогает мне понять функциональные возможности, если это имеет смысл?
5. Не размещайте код в другом месте, ссылки гниют. Вы можете публиковать доступные для выполнения фрагменты здесь. Похоже, это больше касается практики программирования и архитектуры приложений, чем вопрос программирования, поэтому он не очень подходит для SO.
Ответ №1:
Наличие вложенных функций вполне приемлемо, а часто желательно или даже необходимо. Для этого синтаксис будет следующим :
function base_function(){
this.function_1 = function(){};
this.function_2 = function(){};
}
Это определяет конструктор функций с двумя значениями … function_1 и function_2. Затем вы можете вызвать любой из них, используя следующее
var base = new base_function();
base.function_1();
Теперь, если вам нужно только ссылаться на эти дочерние функции в рамках base_function , будет достаточно чего-то вроде следующего.
function base_function(){
function child_function_1(){}
function child_function_2(){child_function_1();}
}
Представьте function
себе, как это происходит в js, тип данных, например, строковый или числовой тип. Вы можете передать его в переменные, ссылаться на него позже в коде, передавать его как обратный вызов (например setTimeout
, вы передаете ссылку на функцию как переменную. т. е. setTimeout(function_1,1000)
Вместо setTimeout(function_1(),1000)
). Вы также можете объявлять функции, используя var function_1 = function(){}
из-за этого (и это мой предпочтительный метод).
Из-за того, как javascript обрабатывает функции, вы можете делать с ними интересные и очень крутые вещи, такие как замыкания или IIFYs! Вот отличное объяснение этого и того, как их использовать!
Чтобы ответить на ваш вопрос, я бы предложил пойти по первому маршруту, сохранив переменную внутри функции, ссылающуюся на содержимое, которое вы хотите отобразить / скрыть. Даже если это означает, что вам нужно написать несколько дополнительных строк, это делает код намного более читаемым, когда вы сохраняете модульность, а читаемость действительно важна в большинстве случаев.
Что-то вроде этого
var Vis_Controller = function(content){
this.content = content;
this.hide = function(){
content.style.display = "none";
}
this.show = function(){
content.style.display = "block";
}
}
window.addEventListener("load", function(){
var content = document.getElementById("content");
var button_show = document.getElementById("button-show");
var button_hide = document.getElementById("button-hide");
var vis_controller = new Vis_Controller(content);
button_show.addEventListener("click",vis_controller.show);
button_show.addEventListener("click",vis_controller.hide);
});
Комментарии:
1. Это не прототип объекта — это функция конструктора.
2. Вы правы, я соответствующим образом обновлю его. Я склонен использовать термины взаимозаменяемо, tbh, поскольку все функции сохраняют ссылку на прототип конструктора этой функции… Полезно, если вам нужен статический доступ (среди других потенциальных преимуществ).
3. Могу я спросить, почему это было отклонено? Также я вроде понял ваши первые два предварительных просмотра кода, но вы потеряли меня на третьем с этим: функция child_function_2(){child_function_1();} Зачем вам нужно вызывать function_1 в function_2, если (я полагаю) они уже определены и разделены, но могут быть доступны base_function ? Но остальная часть в значительной степени отвечает на мой вопрос.
4. Привет, ооочень… Если вы слышали об инкапсуляции на других языках (общедоступных / защищенных / частных), то в моем третьем примере это было бы похоже на использование частных методов. Вы могли бы использовать обе эти функции в base_function, но если (позже в вашем коде) вы объявите переменную, содержащую base_function (var x = new base_function()), вы не сможете использовать дочерние функции за пределами области действия base_function 🙂 Что касается отрицательных голосов, кто знает. Кто-то может подумать, что подчеркивания — это мерзость? К сожалению, многие люди на этом сайте склонны отдавать предпочтение отрицательному голосованию, а не конструктивности.
5. (Вы также обнаружите, что если вы задаете вопрос, который слегка открыт, люди часто будут комментировать что-то вроде «инструкции неясны, xyz застрял в потолочном вентиляторе», даже для таких простых вопросов, как этот)