Javascript Частная функция помощи - PullRequest
0 голосов
/ 18 марта 2020

У меня проблема с пониманием того, как сделать javascript функции / переменные приватными. Как бы мне нужно было отредактировать это, чтобы сделать функции / переменные приватными во что-то вроде этого.

<html>
<head>
<style>
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

#panel {
  display: none;
}
</style>
</head>
<body>

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>This panel contains a div element, which is hidden by default (display: none).</p>
  <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
  <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the user clicks on the p element, a function called myFunction() is executed, which changes the style of the div with id="panel" from display:none (hidden) to display:block (visible).</p>
  <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
</div>

<script>
function myFunction() {
  document.getElementById("panel").style.display = "block";
}
</script>

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 18 марта 2020

Вы не можете .

JavaScript не имеет никакого понятия о модификаторах доступа (кроме export в модуле, но элементы <script> со встроенными сценариями не JavaScript модулей).

Кроме того, модификатор private в языках OOP имеет смысл только для типов class / struct, но не free-functions (поскольку все свободные функции имеют глобальную область видимости), поэтому идея private function myFunction() { ... } не имеет смысла.

В настоящее время в экосистеме JavaScript при работе с JavaScript class (который это просто syntacti c sugar для prototype декларации) обычно принято обозначать «частные» свойства (включая функции) с помощью начального подчеркивания - но это соглашение, а не языковая функция, и при этом она не препятствует функции вызывается из другого скрипта:

class Foobar {

    doSomething() { // <-- "public"
        // ...
    }

    _doSomethingElse() { // <-- the leading underscore is a hint to consumers not to use this property directly, but they can still call it if they want to.
        // ...
    }
}

var f = new Foobar();
f.doSomething();
f._doSomethingElse(); // <-- nothing stops a consumer from calling this function-property.

Обходной путь:

Обратите внимание, что может иметь JavaScript объект (используя class или просто POJO) с недоступными анонимными функциями при условии, что вы можете подключить их способ, который не раскрывает их - но недостатком этого подхода является то, что ваш собственный код также не может напрямую вызывать их. Этот подход можно использовать для настройки обработчиков событий без загрязнения глобального пространства имен:

class Foobar {

    constructor() {

        (function() { // This is an IIFE

            const button = document.getElementById( 'foobar' );
            button.addEventListener( 'click', function() {
                alert("clicked!);
            } );

        })();
    }

}



В приведенном выше коде функции IIFE и click теперь не могут вызываться напрямую, поскольку они не У него нет имени, и после запуска скрипта он не будет находиться в области видимости.

0 голосов
/ 18 марта 2020

Вы можете сделать функции «приватными», поместив их в определенную область.

В вашем примере это означает, что вы должны обернуть их в немедленно вызванное выражение функции :

(function () {
  function myFunction() {
    document.getElementById("panel").style.display = "block";
  }

  // myFunction is only available within the outer function context.
})();

Это также означает, что следующее больше не будет работать:

<p class="flip" onclick="myFunction()">Click to show panel</p>

myFunction больше не является общедоступным, поэтому теперь при щелчке это вызовет ошибку. Однако вы можете установить его через addEventListener, когда вы все еще находитесь в том же диапазоне, что и myFunction:

(function () {
  function myFunction() {
    document.getElementById("panel").style.display = "block";
  }

  for(const p of document.querySelectorAll("p.flip")) {
    p.addEventListener("click", myFunction);
  }
})();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...