Javascript files

modified: 2020-02-18T08:22:35+01:00

Handling JavaScriptFiles

All Javascript files can be changed at any time at any point during the initial-page-load. The following class is responsible for processing all Javascript-Files on initial-page-load.

$jybridScripts = Jybrid\Jybrid::getScripts();

General setting options

Get access to the javascript-file's configuration
// Long way
$jybridScriptConfig = \Jybrid\Factory::getScripts()->getConfiguration();
Uncompressed Scripts

Jybrid Javascripts in Development Mode. Here javascripts are delivered uncompressed. The name range is as in JQuery scriptname. min. js or scriptname. js.

If the scriptname.min.js was configured and the file was not found, the script-processor will try to use the scriptname.js

// for debugging uncompressed scripts scriptname.js
Setters are chained!

In Production-Mode you don't need the configuration above

Deferred loading of javascript-files

because javascript-files "script" expression should be in tag the defer attribute should be set in javascript-files. So the src="" in script-tag will be fetched during rendering/loading/parsing the html-code of your page. After the rendering the html-page the src="" will be executed.

Default in jybrid is without "defer".

In html without defer attributed javascript-tag looks like
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" charset="UTF-8" src="/src/assets/js/jybrid.core.js"></script>
    <script type="text/javascript" charset="UTF-8">/*<![CDATA[*/try { if (undefined == typeof jybrid.config) jybrid.config = {};} catch (e) { jybrid = {}; jybrid.config = {};}.........)});/*]]>*/</script>
In html the defer attributed javascript-tag looks like
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" charset="UTF-8">/*<![CDATA[*/var loadJybridInitScript = function(){ try { if (undefined == typeof jybrid.config) jybrid.config = {};} catch (e) { jybrid = {}; jybrid.config = {};}.........)});}/*]]>*//*]]>*/</script>
    <script type="text/javascript" charset="UTF-8" src="/src/assets/js/jybrid.core.js" defer=""></script>
Override Scripts and other Script-Directories

Jybrid Javascripts are no longer permanently integrated in Jybrid. You can use your own Javascript files instead of the Jybrid-Javascripts, without having to change the original Jybrid scripts.

Create new javascript Directory

It makes sense to copy the Javascript files installed via Composer from this directory and insert them in a better place. The background is that all publicly accessible files should be located in one directory. The remaining directories should, as far as possible cannot be called.

original Javascript directory /vendor/jproof/jybrid/src/assets/

Examples of more useful locations for scripts /templates/myTemplate/assets/js/ /media/scripts

Adding a new javascript Directory to the scripts search path
// or
// or
// wherever the place is

All Javascript directories can be set relative or absolute. Jybrid\Factory:: getScripts () works internally with the absolute paths to the respective directories or files. The output of the relative urls organizes the script class independently.

 will be out to Browser as

this method maybe is handy for the following case

In each newly added ScriptDirectory the scripts requested by Jybrid are searched first (priority)

Adding an JavaScript

Depending on the application, it may be useful to deliver other Javascripts to the browser with jybrid. This saves work in the Html header. jQuery should serve as an example.

// short Way
Jybrid\Factory::getScripts()->addScript(new Jybrid\Scripts\Core(['scriptName' => 'jQuery', 'fileName' => 'jquery.js','useScriptLoadTimeout' => true]));

This file is then searched in all set JavaScriptDirectories.

If JavaScripts are wildly distributed in the application, the parameter dir can be used to specify that this JavaScript file may only be retrieved from this directory.

Jybrid\Factory::getScripts()->addScript(new Jybrid\Scripts\Core(['scriptName' => 'jQuery', 'fileName' => 'jquery.js', 'dir' => '/media/scripts/jQuery-3.0']));

Like the configuration above, the extra JavaScripts try to load the scriptfile. min. js or in development-mode the scriptfile. js.

Blocking JavaScripts

Depending on the situation, it may be necessary that JavaScripts are requested by a part of the application, but it is not necessary or desired. to deliver these JavaScriptFiles to the browser as well. In this case, a script can be prevented from being output.


The setLockScript works only if the script was set with an method of Jybrid\Factory::getScripts();

Description Jybrid\Scripts\Core()

As already mentioned in addScript (new Jybrid\Scripts\Core ()), I would like to explain this object in more detail. Each Javascript file, whether core or custom, is registered as a separate object. Each of these Javascript file registrations has a separate and independent setting.

$scriptObject = new Jybrid\Scripts\Core(['scriptName' => 'jQuery', 'fileName' => 'jquery.js', 'dir' => '/media/scripts/jQuery-3.0','useScriptLoadTimeout' => true])


The "scriptName" parameter specifies a possible group of files. This parameter can be used to set several scripts of the same name in the priority queue. However, only the file that is highest in the order is taken. Examples: "jybrid","jybrid_debug", "jquery"... whatever you want.


The file name must be the correct filename of this file. uncompressed-scripts

dir (optional)

If you specify the directory here, you will disable the priority queue for this "scriptName"group. It is tried to find this file in this directory. If the file is not found in this directory, an error will be thrown.

So, use this parameter only as a last resort. I am sure that with the above mentioned means "Jybrid\Factory:: getScripts ()->addScriptDir (' FULL-SERVER-DIRECTORY/media/scripts');" there are plenty of ways to avoid this.

useScriptLoadTimeout (optional)

If you use this setting, please make sure that your Javascript file contains the necessary check-load-var. Jybrid Javascript files has this check-load-var in scripts For custom/own javascript files have a look at check your script was load correctly

Javascript file load mechanism examples

@see schematic js files.php