Чи вважається поганою практикою наявність PHP у вашому JavaScript

Так багато разів на цьому сайті я бачу людей, які намагаються робити такі речі:

<script type="text/javascript">
  $(document).ready(function(){

     $('<?php echo $divID ?>').click(funtion(){
       alert('do something');
     });

  });
</script>

Я не думаю, що це якась закономірність, до якої люди природно потрапляють. Там має бути якийсь підручник чи навчальний матеріал, який це показує, інакше ми б його не бачили так сильно. Що я запитую, чи я роблю занадто велику справу чи це справді погана практика?

EDIT: Розмовляв з моїм другом про це, який часто кладе рубін у свій JavaScript, і він підкреслив це.

Чи нормально динамічно розміщувати константи з широкою програмою у вашому JavaScript, щоб не потрібно редагувати два файли. наприклад...

MYAPP.constants = <php echo json_encode($constants) ?>;

також нормально безпосередньо кодувати дані, які ви плануєте використовувати в бібліотеці

ChartLibrary.datapoints = <php echo json_encode($chartData) ?>;   

чи ми повинні робити дзвінок AJAX кожен раз?

Як правило, це погана практика , щоб використовувати мову X , щоб генерувати код на мові Y.

Спробуйте роз’єднати дві мови, зробивши дані єдиним інтерфейсом - не змішуйте код .

У вашому прикладі ви можете вдосконалити код, використовуючи PHP для заповнення cfgструктури, доступної JavaScript:

<script type="text/javascript">
  var cfg = {
    theId: "<?php echo $divID ?>",
    ...
  };

  $(document).ready(function(){
     $("#" + cfg.theId).click(funtion(){
       alert('do something');
     });
  });
</script>

Таким чином, PHP піклується лише про заселення структури даних, а JavaScript - про споживання структури даних.

Ця розв'язка також призводить до асинхронного завантаження даних у майбутньому (JSON).

Оновлення:

Щоб відповісти на додаткові запитання, які ви задали під час свого оновлення, так, було б добре застосувати принцип DRY та дозволити PHP та JavaScript ділитися одним об’єктом конфігурації:

<script type="text/javascript">
  var cfg = <?php echo json_encode($cfg) ?>;

  ...

Немає жодної шкоди, як вставити представлення конфігурації JSON безпосередньо на вашу сторінку. Вам не обов’язково добирати це через XHR.

Динамічно генерований JavaScript - жахлива, погана практика.

Що ви повинні зробити, це зрозуміти, що означає поділ занепокоєння та прогресивне підвищення.

Це в основному означає, що у вас є динамічний HTML і статичний JavaScript (що покращує HTML).

У вашому випадку, ймовірно, ви хочете клас у вашому div і виберіть його за допомогою селектора

Найбільша проблема у вашому фрагменті - це те, що ви не вистачаєте, #щоб зробити його дійсним селектором jQuery;).

Я б сказав, що вам слід спробувати уникати включення PHP у свій JavaScript, де це можливо. Що не в тому, щоб змінити перемикач вашого click()обробника на клас і додати клас до відповідного елемента, якщо ви хочете, щоб обробник був звільнений, а ні, якщо ви цього не зробите;

<script type="text/javascript">
  $(document).ready(function(){

     $('.foo').click(funtion(){
       alert('do something');
     });

  });
</script> 

<div id="bar" class="<?php echo ($someCond ? 'foo' : ''); ?>">Hello</div>

Там є обставини , коли вам необхідно включити PHP в вашому JavaScript; але мушу визнати, що їх небагато і далеко між ними.

Наприклад, коли у вас різні середовища; випробування, постановка і жити. Кожен з них має інше місце розташування ваших активів (переважно зображення). Найпростіший спосіб встановити шлях, щоб він міг використовувати JavaScript, - це щось на зразок;

var config = { assets: "<?php echo $yourConfig['asset_url']; ?>" };

На мою думку, це погана практика, оскільки вам потрібно було б викликати цей файл something.php, і тоді ви не могли його стиснути, наприклад, не згадуючи, що це не нормально змішувати на сервері речі зі своїм JavaScript. Постарайтеся максимально обмежити змішування між PHP та JS.

Ви завжди можете це зробити замість цього:

function setOnClick(divid) {
 $(divid).click(funtion(){
   alert('do something');
 });
}

І тоді ви можете викликати цю функцію у файлі php, щоб зробити ці змішувальні речі якомога меншими.

$(function() {
  setOnClick('<?php echo $divId; ?>');
});

Роблячи це (маючи більші файли JS, а не 2-3 рядки, де це не має значення), ви можете скористатися компресією файлу JS, а розробникам інтерфейсу відчувати себе набагато комфортніше працювати тільки з JavaScript, на мій погляд (як ви могли написати Python, Ruby тощо не тільки PHP - і код може бути більшим і більшим залежно від того, що вам потрібно там робити).

Я не думаю, що це погана практика. Якщо ідентифікатор, необхідний у вашому JavaScript, динамічний, іншого способу це зробити не існує.

Я вважав би це поганою практикою. Розміщуючи динамічний вміст всередині блоків скриптів, ви завжди повинні знати про те, що вийти з контексту javascript не так просто, як ви могли би сподіватися. Якщо значення були користувачем при умови, що це НЕ досить , щоб HTML-уникнути їх.

На шпаргалках OWASP XSS є більше деталей, але в основному вам слід прийняти цю схему:

<script id="init_data" type="application/json">
    <?php echo htmlspecialchars(json_encode($yourdata)); ?>
</script>

Потім завантажте цей код у окремий .js файл, пов’язаний із вашим головним html:

var dataElement = document.getElementById('init_data');
var jsonText = dataElement.textContent || dataElement.innerText  // unescapes the content of the span
var initData = JSON.parse(jsonText);

Причина використання окремого .js-файлу дворазова:

• Це кеш-пам'ять, тому продуктивність краща
• HTML-аналізатор не спрацьовує, тому немає ризику проскочити помилку XSS, коли хтось помістить швидкий тег <? Php

Деякі люди стверджують, що це погана практика. Не тому, що це PHP всередині JS, а тому, що він є вбудованим JS і тому браузер не буде кешований для зручності завантаження наступного разу.

IMO, завжди краще використовувати JSON для передачі змінних між двома мовами, але я думаю, це залежить від вас.

Я б сказав, що взагалі цього не роблять. Однак якщо ви хочете передати дані з PHP -> Javascript, це не вразило б мене, як божевільний, щоб мати вбудований блок Javascript, де ви маєте код форми, показаної нижче. Тут код просто передає дані з php в javascript, не створюючи логіку на льоту або тому подібне. Хороша частина цього виклику проти ajax-дзвінка полягає в тому, що дані доступні, як тільки сторінка завантажується, і не вимагає додаткової поїздки на сервер.

<script>
window.config = <?php echo json_encode($config);?>;
</script>

Звичайно, іншим варіантом є побудова файлу конфігурації javascript з PHP через якусь форму сценарію побудови, який помістить його у файл .js.

Єдине, що я можу придумати, що може насправді викликати проблеми - це коли PHP встановлено відображення помилок, і це передає HTML-код, що відображає помилку PHP у вашому JavaScript.

Крім того, оскільки його це в сценарії, тому він не відображається, і іноді може знадобитися деякий час, щоб зрозуміти, чому ваш сценарій зламаний.

Це залежить від кого, і якщо ви запитаєте мене, так, я вважаю, що це практика з кількох причин. Перш за все, я вважаю за краще мати код JavaScript у власному файлі JS, до якого PHP-аналізатор не міг би торкнутися.

По-друге, php виконується лише в серверний час, тому, якщо ви залежаєте від якоїсь змінної в php, щоб змінити свій JavaScript, це може не працювати дуже добре. Якщо є якесь налаштування завантаження сторінки, яким ви хочете керувати за допомогою JavaScript, я, як правило, вважаю за краще додавати це значення до DOM за допомогою php, щоб javascript міг досягти цього, коли і якщо він захоче (наприклад, у прихованому розділі).

Нарешті, лише з організаційних цілей це може стати дуже дратує. Досить погано змішувати html та php (на мою думку).

Вміст PHP в об'єкт configданих проходить 90% шляху, але найкраща практика - це повністю відокремити його. Ви можете використовувати RESTful api лише для того, щоб запитувати потрібні вам дані, це трохи більше JavaScript, але має кілька переваг.

• Сценарій статичний і може кешуватися постійно
• PHP вже не XSS вектор
• Повна розлука проблем

Недоліки:

• Потрібен додатковий запит HTTP
• більш складний javascript

Сценарій

//pure javascript
$.on('domready',function({
    //load the data
    $.get({
       url:'/charts/3D1A2E', 
       success: function(data){
           //now use the chart data here
           ChartModule.init(data);
       }
    });
})

Це не погана практика ТОЛЬКІ, якщо він використовується для ініціалізації коду javascript, (у моїх темах WordPress я ініціалізую свої об’єкти JavaScript з такими функціями php, як site_url (), тому що це єдиний спосіб впоратися з цим (можливо, ми могли б використати запит ajax, щоб отримати json, і так ... але це біль у попці).

Гарна практика:

Погана практика: