I don’t have much experience with web development. I’m developing a web app that will be used privately by a company (SEO isn’t needed, no need to ensure support of old browsers).

I made some custom interactive components (calendar, file manager, contact picker, etc) that I am not sure what is the best way of implementing them. I use the simplest of them (contact picker) as an example here.

What I have in mind right now is making separate php and js files for each component and require_once-ing the needed php files on each page that uses some of the components. The php file will echo a <script> tag to include the component’s js file (to avoid loading unneeded javascript code of unused components). Since the js files are cached by the browser I assume including many js files instead of one big file won’t have a negative impact on loading time.

The main things I am not sure about are:

• Are the following approaches bad:
  • Many js files
  • echoing script tag from component’s php file
• Should I make a js object for each component? (with getters, setters, etc)

The contact picker:

The contact picker is a text box that shows suggestions for contacts (based on server’s response to ajax requests) while the user types the name of the contact. The hidden input with name="contact_id" is the value that will actually be used in html forms, the rest is there for the user’s convenience.

contactPicker.php

<script src="components/contactPicker.js"></script> <?php function echo_contact_picker($  type = null){ ?> <div class="contact_picker"<?php if($  type) echo ' data-type="'. $  type .'"'; ?>>    <input type="hidden" name="contact_id">    <input type="text" class="contact_name" oninput="suggestContacts(this)" onfocus="toggleSuggestions(this, true)" onblur="toggleSuggestions(this, false)">    <table class="dropdown"></table> </div> <?php } ?> 

contactPicker.js

function suggestContacts(sender){    const picker = sender.closest('.contact_picker');    unpickContant(picker);     const contactName = picker.getElementsByClassName('contact_name')[0].value;    if(contactName == ''){       const container = picker.getElementsByClassName('dropdown')[0];       container.innerHTML = '';       return;    }    const contactType = picker.getAttribute('data-type');    const ajaxData = {name: contactName, type: contactType};    if(contactType == null){       delete ajaxData.type;    }     $  .ajax({       type: 'GET',       url: '../ajax/suggestContacts.php',       data: ajaxData,       success: function(data){          updateSuggestions(data, picker);       }    }); }  function updateSuggestions(data, picker){    const container = picker.getElementsByClassName('dropdown')[0];    data = JSON.parse(data);     if(data.length == 0){       container.innerHTML = '<span class="note">No matches</span>';    } else {       container.innerHTML = '';        for(contact of data){          const tr = document.createElement('tr');          let td = document.createElement('td');          td.textContent = contact.type;          tr.appendChild(td);          td = document.createElement('td');          td.textContent = contact.name;          let span = document.createElement('span');          span.textContent = contact.title;          span.classList.add('note');          td.appendChild(document.createElement('br'));          td.appendChild(span);          tr.appendChild(td);          tr.setAttribute('data-contact-id', contact.id);          tr.setAttribute('data-contact-name', contact.name);          tr.setAttribute('onmousedown', 'pickContact(this)');          container.appendChild(tr);       }    }    positionSuggestions(picker, container); }  function positionSuggestions(picker, container){    const rectP = picker.getBoundingClientRect();    const rectC = container.getBoundingClientRect();     if(rectP.bottom + rectC.height > (window.innerHeight || document.documentElement.clientHeight)){       container.style.top = 'auto';       container.style.bottom = 'calc(100% - 3px)';    } else {       container.style.bottom = 'auto';       container.style.top = 'calc(100% - 3px)';    } }  function clearSuggestions(sender){    const picker = sender.closest('.contact_picker');    const container = picker.getElementsByClassName('dropdown')[0];    container.innerHTML = ''; }  function toggleSuggestions(sender, visible){    const picker = sender.closest('.contact_picker');    const container = picker.getElementsByClassName('dropdown')[0];    container.style.display = visible ? '' : 'none'; }  function pickContact(selected){    const picker = selected.closest('.contact_picker');    const idElem = picker.querySelector('input[name="contact_id"]');    const nameElem = picker.getElementsByClassName('contact_name')[0];    nameElem.value = selected.getAttribute('data-contact-name');    idElem.value = selected.getAttribute('data-contact-id');    if(!picker.classList.contains('picked')){       picker.classList.add('picked');    } }  function unpickContant(picker){    picker.querySelector('input[name="contact_id"]').value = null;    picker.classList.remove('picked'); }  function createContactPicker(container, contactType){    const picker = document.createElement('div');    picker.classList.add('contact_picker');    let html = '<input type="hidden" name="contact_id">';    if(contactType != null){       picker.setAttribute('data-type', contactType);    }    html += '<input type="text" class="contact_name" onkeyup="suggestContacts(this)" onfocus="toggleSuggestions(this, true)" onblur="toggleSuggestions(this, false)"><button class="minibutton plus" style="width:24px; height:24px" data-tooltip="new contact"></button><table class="dropdown"></table>';    picker.innerHTML = html;    container.appendChild(picker); } 

css (relevant part out of a big file)

/* Form inputs */  input[type="text"]{     padding: 3px;     margin: 2px;     border: solid 1px #999;     margin: 2px;     width: 160px;     font-size: 11px; }  /* Contact picker */  .contact_picker{    position: relative; } .contact_picker .dropdown{    position: absolute;    border: solid 1px #000;    background-color: #fff;    z-index: 1;    left: 2px;    top: calc(100% - 3px);    min-width: 160px;    border-collapse: collapse; } .contact_picker .dropdown tr td:first-child{    color: rebeccapurple; } .contact_picker .dropdown td{    padding: 3px; } .contact_picker .dropdown tr:hover{    background-color: floralwhite;    cursor: pointer; } .contact_picker.picked .contact_name{    border-color: #00aa00; } 

Usage example:

<html>    <head>       <?php require_once "components/contactPicker.php"; ?>    </head>    <body>       <form name="choose_client_example">          Choose a client:<br>          <?php echo_contact_picker("client"); ?>          <button>Submit</button>       </form>    </body> </html>